如何将数据发布为表单数据而不是请求有效载荷？

本文翻译自：How can I post data as form data instead of a request payload?

In the code below, the AngularJS $http method calls the URL, and submits the xsrf object as a "Request Payload" (as described in the Chrome debugger network tab). 在下面的代码中，AngularJS $http方法调用该URL，并将xsrf对象作为“请求有效负载”提交（如Chrome调试器网络标签中所述）。 The jQuery $.ajax method does the same call, but submits xsrf as "Form Data". jQuery $.ajax方法执行相同的调用，但是将xsrf提交为“表单数据”。

How can I make AngularJS submit xsrf as form data instead of a request payload? 如何使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() {}
});

---

#1楼

参考：https://stackoom.com/question/m0ka/如何将数据发布为表单数据而不是请求有效载荷

---

#2楼

The following line needs to be added to the $http object that is passed: 需要将以下行添加到传递的$ http对象中：

headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}

And the data passed should be converted to a URL-encoded string: 并且传递的数据应转换为URL编码的字符串：

> $.param({fkey: "key"})
'fkey=key'

So you have something like: 所以你有这样的事情：

$http({
    method: 'POST',
    url: url,
    data: $.param({fkey: "key"}),
    headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}
})

From: https://groups.google.com/forum/#!msg/angular/5nAedJ1LyO0/4Vj_72EZcDsJ 发件人： https : //groups.google.com/forum/#!msg/angular/5nAedJ1LyO0/4Vj_72EZcDsJ

UPDATE 更新

To use new services added with AngularJS V1.4, see 要使用AngularJS V1.4中添加的新服务，请参阅

• URL-encoding variables using only AngularJS services 仅使用AngularJS服务进行URL编码的变量

---

#3楼

You can define the behavior globally: 您可以全局定义行为：

$http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

So you don't have to redefine it every time: 因此，您不必每次都重新定义它：

$http.post("/handle/post", {
    foo: "FOO",
    bar: "BAR"
}).success(function (data, status, headers, config) {
    // TODO
}).error(function (data, status, headers, config) {
    // TODO
});

---

#4楼

The continued confusion surrounding this issue inspired me to write a blog post about it. 围绕这个问题的持续困惑促使我写了一篇有关它的博客文章。 The solution I propose in this post is better than your current top rated solution because it does not restrict you to parametrizing your data object for $http service calls; 我在这篇文章中提出的解决方案比您当前评价最高的解决方案要好，因为它不会限制您为$ http服务调用参数化数据对象。 ie with my solution you can simply continue to pass actual data objects to $http.post(), etc. and still achieve the desired result. 即，使用我的解决方案，您可以继续将实际数据对象继续传递到$ http.post（）等，仍然可以达到所需的结果。

Also, the top rated answer relies on the inclusion of full jQuery in the page for the $.param() function, whereas my solution is jQuery agnostic, pure AngularJS ready. 另外，评价最高的答案取决于在页面中为$ .param（）函数包含完整的jQuery，而我的解决方案是与jQuery无关的纯AngularJS。

http://victorblog.com/2012/12/20/make-angularjs-http-service-behave-like-jquery-ajax/ http://victorblog.com/2012/12/20/make-angularjs-http-service-behave-like-jquery-ajax/

Hope this helps. 希望这可以帮助。

---

#5楼

If you do not want to use jQuery in the solution you could try this. 如果您不想在解决方案中使用jQuery，可以尝试一下。 Solution nabbed from here https://stackoverflow.com/a/1714899/1784301 从这里获得的解决方案https://stackoverflow.com/a/1714899/1784301

$http({
    method: 'POST',
    url: url,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    transformRequest: function(obj) {
        var str = [];
        for(var p in obj)
        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
        return str.join("&");
    },
    data: xsrf
}).success(function () {});

---

#6楼

AngularJS is doing it right as it doing the following content-type inside the http-request header: AngularJS正确地执行了此操作，因为它在http-request标头中执行了以下内容类型：

Content-Type: application/json

If you are going with php like me, or even with Symfony2 you can simply extend your server compatibility for the json standard like described here: http://silex.sensiolabs.org/doc/cookbook/json_request_body.html 如果您使用像我这样的php，甚至使用Symfony2，您都可以像下面描述的那样简单地扩展与json标准的服务器兼容性： http : //silex.sensiolabs.org/doc/cookbook/json_request_body.html

The Symfony2 way (eg inside your DefaultController): Symfony2的方式（例如在DefaultController内部）：

$request = $this->getRequest();
if (0 === strpos($request->headers->get('Content-Type'), 'application/json')) {
    $data = json_decode($request->getContent(), true);
    $request->request->replace(is_array($data) ? $data : array());
}
var_dump($request->request->all());

The advantage would be, that you dont need to use jQuery param and you could use AngularJS its native way of doing such requests. 这样做的好处是，您不需要使用jQuery param，而可以使用AngularJS的本机方式来执行此类请求。