本文介绍了前端如何使用 Axios 进行 POST 请求，详细讲解了后台 Spring MVC 如何封装返回 JSON 的函数，并涉及到中文编码处理。在前端，通过 axios 的 transformRequest 处理请求数据，后台接收到数据后进行解码。最后展示了 Vue 中的 mounted 生命周期钩子中调用该函数获取并显示客户姓名。
1、首先前端引入控件：
2、后台封装函数：
a)切记返回的是json;
b)后台spring mvc的话，要加上@responsebody;
c)如果是中文，还要encode,decode;
methods: {
axiosPostRequst(url,data) {
let result = axios({
method: 'post',
url: url,
data: data,
transformRequest:[function(data){
let ret = '';
for(let i in data){
ret += encodeURIComponent(i)+'='+encodeURIComponent(data[i])+"&";
}
return ret;
}],
header:{
'Content-Type':'application/x-www-form-urlencoded'
}
}).then(function(result){
//return result.data.Realname;
return decodeURIComponent(result.data.Realname);
}).catch(error=>{
return "exception="+error;
});
return result;
}
}
3、调用
mounted: function () {
this.axiosPostRequst('https://XXXXXXX/imobile/wonderful/demoEntranceName.do',{}).then(result=>{
this.customerName = result;
});
}
扫一扫
7274
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
