angularjs中$http POST请求问题

摘要: 时隔三年再提笔，解决下自己给自己挖的坑。

在angular中发出一个POST请求

$http({
method: "POST",
url: "url地址",
params: id
}).success();

在调试中发现，参数在url上出现了，如?id=123，跟GET请求一样，然后查了一下发现参数的写法（GET用params，用POST/PUT/PATCH/DELETE就是data）修改为：

$http({
method: "POST",
url: "url地址",
data: id
}).success();

发现发送的参数出现在了request payload里，后端认为参数非法无法获取。查询POST表单请求提交，使用的Content-Type是application/x-www-form-urlencoded，而使用原生AJAX的POST请求如果不指定请求头RequestHeader，默认使用的Content-Type是text/plain;charset=UTF-8，在html中form的Content-type默认值：Content-type：application/x-www-form-urlencoded。修改为：

$http({
method: "POST",
url: "url地址",
headers: { 'Content-Type': 'application/x-www-form-urlencoded' } ,
data: id
}).success();

然后确实就转成form data了，但是参数如果是对象还是不行。如果参数是对象，还需要加上transformRequest将参数转成序列化的形式。修改为：

$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("&");
}
}).success();

个人觉得好麻烦，于是用$.param()将参数直接序列化，搞定。

$http({
method: "POST",
url: "url地址",
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
data:$.param({'id':123})
}).success();