为什么我不能通过AngularJS's post发送一个post到我的WebApi ?
Why cannot I send a post to my WebApi through AngularJS's POST?
我已经发送了"mytest.html"到IIS上,这个项目是由WebApi+Angularjs组成的,我不能得到一个正确的请求到我的WebApi ......我不知道为什么?
【HTML代码】<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
</head>
<body>
<div ng-app="A" ng-controller="Test">
<form method='post' name='myForm'>
<table width="100%">
<tr>
<td>Name:</td>
<td><input type='text' ng-model='user.name' name='myname' required/>
<span style='color:red' ng-show='myForm.myname.$dirty && myForm.myname.$invalid'>Name cannot be empty!</span>
</td>
</tr>
<tr>
<td>Gender:</td>
<td>
<div ng-repeat='s in sexs'>
<input type='radio' ng-model='user.sex' name='mysex' value='{{s}}'>
{{s}}
</div>
</td>
</tr>
<tr>
<td>Hobby:</td>
<td>
<select ng-model='user.love' name='selLove'>
<option ng-repeat='l in loves' value='{{l}}'>{{l}}</option>
</select>
<span style='color:red' ng-show='selChoice(myForm.selLove.$dirty);'>You cannot choose "Please choose"</span>
</td>
</tr>
</table>
<input type ='submit' value='Submit' ng-click='isDisable();'/>
</form>
</div>
<script>
var app = angular.module('A',[],function($httpProvider){
$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
});
app.controller('Test',function($scope,$http){
$scope.user = {};
$scope.sexs = ['M','F'];
$scope.loves = ['Please choose','Programming','Piano','Swimming'];
$scope.user.sex = 'M';
$scope.user.love = 'Please choose';
$scope.selChoice= function(isDirty){
var isFalse = (myForm.selLove.value == 'Please choose' && isDirty);
$scope.myForm.selLove.$invalid = isFalse;
$scope.myForm.$invalid |= isFalse;
return isFalse;
};
$scope.isDisable = function(){
$scope.selChoice(true);
var requestData = $.param($scope.user);
alert(requestData);
if($scope.myForm.$invalid){
alert('Invalid form');
}
else{
$http({
method:'POST',
data: requestData,
url:'http://localhost:60031/api',
success: function (data){
alert(JSON.stringify(data));
}
});
}
};
});
</script>
</body>
</html>
【WebApi代码】
namespace AngularJSDemo.Controllers
{
using Models;
using System.Web.Http;
public class DefaultController : ApiController
{
[HttpPost]
public Person GetPerson([FromBody] Person p)
{
return p;
}
}
}
【模型代码】
namespace AngularJSDemo.Models
{
public class Person
{
public string Name { get; set; }
public string Sex { get; set; }
public string Love { get; set; }
}
}
【注册码】
namespace AngularJSDemo
{
using Newtonsoft.Json.Serialization;
using System.Net.Http.Formatting;
using System.Web.Http;
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
config.Formatters.Clear();
var jsonFormatInstance = new JsonMediaTypeFormatter();
jsonFormatInstance.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();
config.Formatters.Add(jsonFormatInstance);
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional,controller="Default" }
);
}
}
}
请注意,在我的谷歌浏览器控制台的错误是:
angular.js:10695 POST http://localhost:60031/api 415(不支持的媒体类型)
我也试过使用json,但没有帮助:(
$http({
method:'POST',
data: {p:$scope.user},
url:'http://localhost:60031/api/Default',
success: function (data){
alert(JSON.stringify(data));
}
});
我的Content-Type是:
var app = angular.module('A',[],function($httpProvider){
$httpProvider.defaults.headers.post['Content-Type'] = 'application/json';
});
因为我有不同种类的端口,以便跨域,我也这样做了:
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Methods" value="*" />
<add name="Access-Control-Request-Methods" value="*" />
<add name="Access-Control-Allow-Headers" value="Content-Type" />
</customHeaders>
</httpProtocol>
</system.webServer>
URL错误
URL应该是:http://localhost:60031/api/Default
$http({
method:'POST',
data: requestData,
url:'http://localhost:60031/api/Default',
success: function (data){
alert(JSON.stringify(data));
}
});
此外,最好以JSON形式提交数据,而不是form-urlencoded
总之,我认为:
1)我们必须使用默认值,并将头文件设置为"application/json",如下所示:
$http({
method:'POST',
data: $scope.user,
url:'http://localhost:60031/api/Default',
headers:{'Content-Type':'application/json'}
}).success(function (data){
alert(JSON.stringify(data));
});
2)让我们的WebApi"CORS"(跨域),所以这是最终的答案
https://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api相关文章:
- Javascript XMLHttpRequest——只有第一个POST请求有效
- 打开一个选项卡,并在firefox网络扩展中向其发出POST请求
- 为什么我的$http.post返回一个400错误
- 如何将JavaScript自动POST的状态代码获取到另一个域
- jQuery's$.post只返回一个空白数据
- 当我想发布一个变量但有 1 个 js 时,ajax post 的解决方案是什么
- 从返回的数据 ajax post 创建一个变量
- 从chrome扩展创建一个包含POST数据的链接
- 使用Jquery和PHP在POST Ajax之后返回(一个空字符串)
- 从一个函数传递到另一个函数的变量在使用jQuery的.post之后变得未定义
- 与node.js的get/post混淆,并试图创建一个新页面
- 在引导文件输入中通过post发送一个额外的变量
- 我想单击一个
- 并获取 id 以通过 POST 将其插入数据库,可以吗?
- 同步函数调用涉及post-json调用,其中一个函数应该在另一个函数成功后成功
- 如何将jquery post结果传递给另一个函数
- node.js - 发送一个整数作为 POST 请求中的输入参数
- 在JSON中POST一个js::数组,得到"undefined:undefined”;
- Webkit JavaScript可以PUT或POST一个rest风格的纯二进制图像吗?
- Post一个Javascript数组到Node.js
- 如何POST一个extjs标签字段作为一个数组,没有引号