关于angularjs中$http POST请求参数的问题
2016-10-17 11:37
691 查看
本人AngularJS小白,今天遇到这样一个问题。
在angularjs中发出这样一个POST请求
[javascript] view
plain copy
$http({
method: "POST",
url: "",
params: id
}).success();
在调试中发现,参数在url上出现了,就是以?id=123124的形式出现,跟GET请求变成一样的了,然后查了一下发现参数的写法『用GET的时候就是params,用POST/PUT/PATCH/DELETE就是data』,修改后
[javascript] view
plain copy
$http({
method: "POST",
url: "",
data: id
}).success();
发现发送的参数出现在了request payload里,后端会认为参数非法无法获取(前一种是序列化的参数a=bbb&c=ddd,后者是参数为一个对象)
于是查询了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。修改为
[javascript] view
plain copy
$http({
method: "POST",
url: "",
data: id,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).success();
然后确实就转成form data了,但是参数如果是对象还是不行
于是再查资料发现,如果参数是对象,还需要加上transformRequest
[javascript] view
plain copy
$http({
method: "POST",
url: "",
data: id,
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();
这样终于可以了
其实仔细看transformRequest,也就是把参数转成序列化的形式,所以以后如果使用的话,干脆就写成序列化的形式就好了,省的还要再转一道。jQuery中有$.param()方法可以实现,angularjs里面不知道有没有
在angularjs中发出这样一个POST请求
[javascript] view
plain copy
$http({
method: "POST",
url: "",
params: id
}).success();
在调试中发现,参数在url上出现了,就是以?id=123124的形式出现,跟GET请求变成一样的了,然后查了一下发现参数的写法『用GET的时候就是params,用POST/PUT/PATCH/DELETE就是data』,修改后
[javascript] view
plain copy
$http({
method: "POST",
url: "",
data: id
}).success();
发现发送的参数出现在了request payload里,后端会认为参数非法无法获取(前一种是序列化的参数a=bbb&c=ddd,后者是参数为一个对象)
于是查询了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。修改为
[javascript] view
plain copy
$http({
method: "POST",
url: "",
data: id,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).success();
然后确实就转成form data了,但是参数如果是对象还是不行
于是再查资料发现,如果参数是对象,还需要加上transformRequest
[javascript] view
plain copy
$http({
method: "POST",
url: "",
data: id,
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();
这样终于可以了
其实仔细看transformRequest,也就是把参数转成序列化的形式,所以以后如果使用的话,干脆就写成序列化的形式就好了,省的还要再转一道。jQuery中有$.param()方法可以实现,angularjs里面不知道有没有
相关文章推荐
- 关于angularjs中$http POST请求参数的问题
- 关于angularjs中$http POST请求参数的问题
- 关于 HTTP GET/POST 请求参数长度最大值的问题
- HttpGet HttpPost HttpPut HttpDelete关于参数请求问题
- 关于winfrom程序http post请求多参数问题
- 关于 HTTP GET/POST 请求参数长度最大值的问题
- 解决 AngularJs $http 发送post,get请求,SpringMvc无法接受参数的问题。
- 关于 HTTP GET/POST 请求参数长度最大值的一个理解误区
- 解决AngularJS Http请求参数问题
- 关于 HTTP GET/POST 请求参数长度最大值的一个理解误区
- 关于 HTTP GET/POST 请求参数长度最大值的一个理解误区
- 关于 HTTP GET/POST 请求参数长度最大值的一个理解误区
- 关于AngularJs中$http post、get 发送和接受参数详解
- Spring Tomcat Post Get 请求参数有中文时出现乱码或+号变空格等关于编码的问题
- AngularJS出现$http异步后台无法获取请求参数问题的解决方法
- AngularJS $http模块POST请求,传递参数为数组或者对象时
- 关于post与get请求参数存在特殊字符问题
- HTTP请求关于GET/POST 理解若干问题
- Angularjs中$http以post请求通过消息体传递参数的实现方法
- angular的$http发送post,get请求无法传送参数的问题