在下面的代码中，AngularJS $http方法调用URL，并提交xsrf对象作为“Request Payload”(在Chrome调试器网络选项卡中描述)。jQuery $。ajax方法做同样的调用，但提交xsrf作为“表单数据”。
如何让AngularJS将xsrf作为表单数据而不是请求有效载荷提交?
var url = 'http://somewhere.com/';
var xsrf = {fkey: 'xsrf key'};
$http({
method: 'POST',
url: url,
data: xsrf
}).success(function () {});
$.ajax({
type: 'POST',
url: url,
data: xsrf,
dataType: 'json',
success: function() {}
});
当前回答
有一个非常好的教程，介绍了这个和其他相关的东西——提交AJAX表单:AngularJS的方式。
基本上，您需要设置POST请求的报头，以指示您将以URL编码字符串的形式发送表单数据，并将要发送的数据设置为相同的格式
$http({
method : 'POST',
url : 'url',
data : $.param(xsrf), // pass in data as strings
headers : { 'Content-Type': 'application/x-www-form-urlencoded' } // set the headers so angular passing info as form data (not request payload)
});
注意，这里使用了jQuery的param()帮助函数将数据序列化为字符串，但如果不使用jQuery，也可以手动执行此操作。
其他回答
使用AngularJS的$http服务，并使用它的post方法或配置$http函数。
从AngularJS v1.4.0开始，就有一个内置的$httpParamSerializer服务，它可以根据文档页面上列出的规则将任何对象转换为HTTP请求的一部分。
它可以这样使用:
$http.post('http://example.com', $httpParamSerializer(formDataObj)).
success(function(data){/* response status 200-299 */}).
error(function(data){/* response status 400-999 */});
请记住，对于正确的表单post, Content-Type头必须更改。要对所有POST请求全局执行此操作，可以使用以下代码(取自Albireo的half-answer):
$http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
为了只针对当前post，需要修改request-object的headers属性:
var req = {
method: 'POST',
url: 'http://example.com',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: $httpParamSerializer(formDataObj)
};
$http(req);
我取了一些其他的答案，并使一些东西更干净，把这个.config()调用放在你的angular。模块在你的app.js:
.config(['$httpProvider', function ($httpProvider) {
// Intercept POST requests, convert to standard form encoding
$httpProvider.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
$httpProvider.defaults.transformRequest.unshift(function (data, headersGetter) {
var key, result = [];
if (typeof data === "string")
return data;
for (key in data) {
if (data.hasOwnProperty(key))
result.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key]));
}
return result.join("&");
});
}]);
你可以全局定义行为:
$http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
所以你不必每次都重新定义它:
$http.post("/handle/post", {
foo: "FOO",
bar: "BAR"
}).success(function (data, status, headers, config) {
// TODO
}).error(function (data, status, headers, config) {
// TODO
});
为post创建一个适配器服务:
services.service('Http', function ($http) {
var self = this
this.post = function (url, data) {
return $http({
method: 'POST',
url: url,
data: $.param(data),
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
}
})
在你的控制器或其他地方使用它:
ctrls.controller('PersonCtrl', function (Http /* our service */) {
var self = this
self.user = {name: "Ozgur", eMail: null}
self.register = function () {
Http.post('/user/register', self.user).then(function (r) {
//response
console.log(r)
})
}
})
