AngularJS $http.post 简单方法不起作用答案

【问题标题】：AngularJS $http.post simple method is not workingAngularJS $http.post 简单方法不起作用
【发布时间】：2014-06-20 07:29:31
【问题描述】：

我尝试使用 Angular $http.post(url, data) 方法。但是我在将正确的数据发布到服务器（WebAPI）时遇到了一些问题。我尝试了以下选项，但没有一个有效。

var data1 = new Object();
    data1.UserName = "UserA1";
    data1.Password = "password123";
    data1.ConfirmPassword = "password123";

var data2 = angular.toJson(data1);

var data3 = JSON.stringify(data1);

var data4 = { UserName: "UserA2", Password: "password123", ConfirmPassword: "password123" };

var data5 = "UserName=UserA3&Password=password123&ConfirmPassword=password123";

$http.post(url, data1)
$http.post(url, data2)
$http.post(url, data3)
$http.post(url, data4)
$http.post(url, data5)

没有工作。什么样的数据对这种方法是正确的。我用上述数据尝试了 JQuery.post() 并且它有效。这对我来说超级奇怪，为什么这个简单的 angularjs 方法这么难用，或者我遗漏了一些东西。

更新：基本上我正在研究以下示例。我想从客户端注册用户（/api/Account/Register）。 http://www.asp.net/web-api/overview/security/individual-accounts-in-web-api

【问题讨论】：

你的 WebAPI 控制器方法是什么样的？你得到什么响应码？
你在服务器端使用什么？是php吗？
你说它不起作用是什么意思？服务器是否响应错误？
你试过 Fiddler 看看是否有任何 web api 端点被击中吗？问题似乎出在服务器端。可能是一些路由问题。
服务器端我正在使用 MVC WebAPI。我收到 400 错误代码作为响应。

标签： javascript jquery asp.net-mvc angularjs asp.net-web-api

【解决方案1】：

根据您在服务器端的内容，您应该转换您的请求（例如，PHP 就是这种情况，或者您可以从输入流中读取：php://input）。

请参阅此要点：https://gist.github.com/JensRantil/5713606。

如果这不能解决您的问题，请检查 Angular 正在创建的请求（例如，使用 Chrome 中的开发者工具 -> 网络选项卡），并告诉我们您看到了什么。

【讨论】：

【解决方案2】：

这是因为您的服务器端需要一个内容为 x-www-form-urlencoded 的请求。

jQuery 的 $.post() 发送内容类型为 application/x-www-form-urlencoded 的请求，而 Angular 的 $http.post() 发送内容类型为 application/json 的请求（并且还将数据编码为 JSON（代替 form-data ) 如果传递了一个 JS 对象）。

您可以使用$http 发送x-www-form-urlencoded 请求的方法（SO 上有几个相关的答案），但它涉及的直接代码较少。
我建议您更改服务器端以使用 JSON 请求。

【讨论】：