您的位置:首页 > 移动开发 > IOS开发

对于axios.post的前后台的参数传递问题

2018-02-02 14:11 423 查看
axios 可以看成是另一种ajax,就是负责向后台进行请求和数据传递的组件

一般我们在前台页面请求后台时,如果数据量不大的情况下,get方式请求完全可以实现,如下:

var projectid = 1;

axios.get('../tplusbranch/gettplusbranchs.json',

 params: {//请求数据
  "projectid":projectid
}

})

.then(function(response) {
 //成功请求后的操作

})

后台的接收参数:

@RequestMapping(value = "/gettplusbranchs.json")
public String  getProjectName(Model model, HttpServletRequest request,
HttpServletResponse response, HttpSession session) throws Exception{

 Integer projectid = ServletRequestUtils.getIntParameter(request, "projectid", -1);

}

 但是当数据量特别大的时候,get请求显然就不可以了,因为get请求的所带的数据会拼接到url上,而url的长度是受限制的(不同的浏览器,情况可能不一样)。所以应当用post请求更合适。

 但使用post时,并不是简单的将axios.get换成axios.post,仅仅是这样的话,后台按照上面的简单的写法是无法接收到参数数据的,为null,通过调试前后台发现传递的参数,是一个json串,后台的接收参数那里应该是要接收一个json串,然后再解析。具体的方式我没有对深入的研究。

 考虑在前台改变参数的组织,找了很久,终于找到了一个组织的结构,是URLSearchParams,具体这个URLSearchParams

是什么,应该怎么用可以参考下面的地址:
https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams#Browser_compatibility https://segmentfault.com/a/1190000005980048
var params = new URLSearchParams();

params.append('projectid', projectid);
params.append('branches', mybranchesnames);
 axios.post('../tplusbranch/deletebranches.json',params,{
        headers:{
       
 "access-control-allow-origin":"*"//这里的access-control-allow-origin可以用来解决跨域问题
        }
})
.then(function(response) {

}

这样后台就可以以上面的方式获取到数据了。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  axios post