如何将数据作为表单数据而不是请求有效负载发布?

小开

最佳答案

下面一行需要添加到传递的$http对象中:

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

并且传递的数据应该转换为url编码的字符串:

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

你会得到这样的结果:

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

来自:# EYZ0

更新

要使用AngularJS V1.4中添加的新服务，请参见

只使用AngularJS服务的url编码变量

小开

你可以全局定义行为:

$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
});

小开

如果你不想在解决方案中使用jQuery，你可以试试这个。解决方案从这里捕获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 () {});

小开

AngularJS的做法是正确的，因为它在http-request头中执行了以下内容类型:

Content-Type: application/json

如果你像我一样使用php，甚至使用Symfony2，你可以简单地扩展json标准的服务器兼容性:http://silex.sensiolabs.org/doc/cookbook/json_request_body.html

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());

好处是，你不需要使用jQuery参数，你可以使用AngularJS的原生方式来做这样的请求。

小开

仅仅设置内容类型是不够的，url在发送前编码表单数据。 # EYZ0 < / p >

小开

你可以试试下面的溶液

$http({
method: 'POST',
url: url-post,
data: data-post-object-json,
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
transformRequest: function(obj) {
var str = [];
for (var key in obj) {
if (obj[key] instanceof Array) {
for(var idx in obj[key]){
var subObj = obj[key][idx];
for(var subKey in subObj){
str.push(encodeURIComponent(key) + "[" + idx + "][" + encodeURIComponent(subKey) + "]=" + encodeURIComponent(subObj[subKey]));
}
}
}
else {
str.push(encodeURIComponent(key) + "=" + encodeURIComponent(obj[key]));
}
}
return str.join("&");
}
}).success(function(response) {
/* Do something */
});

小开

我目前正在AngularJS谷歌组中使用以下解决方案i# EYZ0。

$http
.post('/echo/json/', 'json=' + encodeURIComponent(angular.toJson(data)), {
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}
}).success(function(data) {
$scope.data = data;
});

注意，如果您使用的是PHP，则需要使用类似Symfony 2 HTTP组件的Request::createFromGlobals()来读取该文件，因为$_POST不会自动加载。

小开

我取了一些其他的答案，并使一些东西更干净，把这个.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("&");
});
}]);

小开

对于Symfony2用户:

如果你不想改变javascript中的任何东西，你可以在symfony app中做这些修改:

创建一个扩展Symfony\Component\HttpFoundation\Request类的类:

<?php


namespace Acme\Test\MyRequest;


use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\ParameterBag;


class MyRequest extends Request{




/**
* Override and extend the createFromGlobals function.
*
*
*
* @return Request A new request
*
* @api
*/
public static function createFromGlobals()
{
// Get what we would get from the parent
$request = parent::createFromGlobals();


// Add the handling for 'application/json' content type.
if(0 === strpos($request->headers->get('CONTENT_TYPE'), 'application/json')){


// The json is in the content
$cont = $request->getContent();


$json = json_decode($cont);


// ParameterBag must be an Array.
if(is_object($json)) {
$json = (array) $json;
}
$request->request = new ParameterBag($json);


}


return $request;


}


}

现在使用app_dev.php中的类(或您使用的任何索引文件)

// web/app_dev.php


$kernel = new AppKernel('dev', true);
// $kernel->loadClassCache();
$request = ForumBundleRequest::createFromGlobals();


// use your class instead
// $request = Request::createFromGlobals();
$response = $kernel->handle($request);
$response->send();
$kernel->terminate($request, $response);

小开

作为一种变通方法，你可以简单地让接收POST的代码响应application/json数据。对于PHP，我添加了下面的代码，允许我以表单编码或JSON形式POST到它。

//handles JSON posted arguments and stuffs them into $_POST
//angular's $http makes JSON posts (not normal "form encoded")
$content_type_args = explode(';', $_SERVER['CONTENT_TYPE']); //parse content_type string
if ($content_type_args[0] == 'application/json')
$_POST = json_decode(file_get_contents('php://input'),true);


//now continue to reference $_POST vars as usual

小开

有一个非常好的教程，介绍了这个和其他相关的东西——提交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函数。

小开

这并不是一个直接的答案，而是一个略有不同的设计方向:

不要将数据作为表单发布，而是作为JSON对象直接映射到服务器端对象，或者使用REST风格的路径变量

现在我知道这两个选项都不适合您的情况，因为您试图传递一个XSRF键。像这样把它映射成一个路径变量是一个糟糕的设计:

http://www.someexample.com/xsrf/{xsrfKey}

因为从本质上讲，你会想要传递xsrf键到其他路径，/login， /book-appointment等，你不想搞砸你的漂亮URL

有趣的是，将它作为对象字段添加也不合适，因为现在你传递给服务器的每个json对象都必须添加字段

{
appointmentId : 23,
name : 'Joe Citizen',
xsrf : '...'
}

您当然不希望在服务器端类上添加另一个与域对象没有直接语义关联的字段。

在我看来，传递xsrf密钥的最佳方式是通过HTTP报头。许多xsrf保护服务器端web框架库都支持这一点。# EYZ1。

Angular出色的将JS对象绑定到UI对象的能力意味着我们可以摆脱一起发布表单的做法，而是发布JSON。JSON可以很容易地反序列化为服务器端对象，并支持复杂的数据结构，如映射、数组、嵌套对象等。

如何在表单有效负载中发布数组?也许是这样的:

shopLocation=downtown&daysOpen=Monday&daysOpen=Tuesday&daysOpen=Wednesday

或:

shopLocation=downtwon&daysOpen=Monday,Tuesday,Wednesday

都是糟糕的设计。

小开

这些答案看起来很疯狂，有时，简单是更好的:

$http.post(loginUrl, "userName=" + encodeURIComponent(email) +
"&password=" + encodeURIComponent(password) +
"&grant_type=password"
).success(function (data) {
//...

小开

var fd = new FormData();
fd.append('file', file);
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
.success(function(){
})
.error(function(){
});

< p >请付款! # EYZ0 < / p >

小开

从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);

小开

在你的应用程序配置-

$httpProvider.defaults.transformRequest = function (data) {
if (data === undefined)
return data;
var clonedData = $.extend(true, {}, data);
for (var property in clonedData)
if (property.substr(0, 1) == '$')
delete clonedData[property];


return $.param(clonedData);
};

与您的资源请求-

 headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}

小开

你唯一需要改变的是在创建$http对象时使用属性"params"而不是"data":

$http({
method: 'POST',
url: serviceUrl + '/ClientUpdate',
params: { LangUserId: userId, clientJSON: clients[i] },
})

在上面的例子中，客户端[i]只是JSON对象(没有以任何方式序列化)。如果你使用“params”而不是“data”，angular将为你使用$httpParamSerializer: https://docs.angularjs.org/api/ng/service/$httpParamSerializer序列化对象

小开

完全回答(从angular 1.4开始)。你需要包含去依赖$httpParamSerializer

var res = $resource(serverUrl + 'Token', { }, {
save: { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
});


res.save({ }, $httpParamSerializer({ param1: 'sdsd', param2: 'sdsd' }), function (response) {


}, function (error) {


});

小开

为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)
})
}


})

小开

这就是我所做的我的需要，在那里我需要发送登录数据API作为表单数据和Javascript对象(userData)正在自动转换为URL编码的数据

        var deferred = $q.defer();
$http({
method: 'POST',
url: apiserver + '/authenticate',
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: userData
}).success(function (response) {
//logics
deferred.resolve(response);
}).error(function (err, status) {
deferred.reject(err);
});

这就是我的用户数据

var userData = {
grant_type: 'password',
username: loginData.userName,
password: loginData.password
}