vue axios传中文参数导致乱码的解决方案
2023-06-13 09:15:18 时间
问题描述
var that = this;
var name = that.signform.signname;
var username = that.signform.signusername;
var password = that.signform.signpassword;
var user_type = that.sign_user_type;
var email = that.signform.mailAddress;
var studentid = that.signform.studentid;
this.$axios({
method: "post",
url:
this.$api +
`/Register/?name=${name}&username=${username}&password=${password}&user_type=${user_type}&email=${email}&studentid=${studentid}`, //利用了字符串模板来携带id
})
.then((res) => {
console.log(res);
this.changeCode();
})
.catch((req) => {
// console.log(req);
});
在vue axios post 请求注册用户时,刚开始通过如上字符拼接形式调用api时,在服务器后端出现了utf-8汉语乱码:
图中name字段本是中文,服务器后端出现了utf-8汉语乱码,
查询bing后有如下几种解决办法:
其中有添加
- headers: {
- “Content-Type”: “application/x-www-form-urlencoded;charset=UTF-8”
- },
但个人实验了一下没有解决问题,
之后又试了下js函数把字符转换,没有解决问题。
方法:
使用vue axios推荐的vue-axios的使用及其get与post网络请求
即:
get请求时用如下方式代替字符拼接方式
// Optionally the request above could also be done as
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
post请求时一样:
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
所以项目中最终采取的代码:
let data = new FormData();
data.append("name", this.signform.signname);
data.append("username", this.signform.signusername);
data.append("password", this.signform.signpassword);
data.append("user_type", this.sign_user_type);
data.append("email", this.signform.mailAddress);
data.append("studentid", this.signform.studentid);
console.log(data);
var that = this;
axios
.post(this.$api + "/Register/", data) //以slash结尾
.then(function (response) {
console.log(response.data);
})
.catch((err) => {});
注意的时此时后台时没有显示字段的,但是数据库里已经加入了(注册功能哈)。
相关文章
- vue怎么和后端对接_vue搭配什么后端
- 尚硅谷Vue课程P30-P35笔记(后台回复 vue 可获得更多笔记!)
- 初识 Vue
- renren-fast 与 renren-fast-vue 与 renren-generator 基本操作[通俗易懂]
- vue.js 渲染函数_Vue.js的不可渲染且可扩展的RTF编辑器[通俗易懂]
- VUE双向绑定原理_vue的数据绑定怎么实现
- Vue transition动画
- 在网页文档中引入Vue.js的方法有哪些?_vue直接引入js文件没有用
- vue devtools如何使用调试_千牛提示opendevtools
- Vue全家桶介绍_vue全家桶有什么好处
- vue 带参数跳转_vue跳转页面的几种方法
- 富文本vue-quill-editor结合el-element实现自定义上传组件
- vue路由嵌套,配置children嵌套路由
- Vue 自定义指令生成 placeholder
- vue基础语法
- 【架构师(第三十篇)】Vue-Test-Utils 全局组件和第三方库 vuex | vue-router
- 京东前端二面必会vue面试题(持续更新中)_2023-02-24
- vue.js入门篇之Vue.js 样式绑定
- Vue取消eslint语法限制
- 关于 “ React 和 Vue 该用哪个” 我真的栓 Q
- Vue框架下的Redis调用实战(vue调用redis)
- Vue结合Redis,加快数据读取速度(vue读取redis)
- 用Vue从Redis中获取强有力的数据(vue用redis中数据)
- Vue结合Redis实现性能优化(vue引入redis)
- 优化网站性能,Vue搭配Redis缓存更加有效(vue使用redis缓存)
- 构建基于Vue与Redis的高性能缓存系统(VUE redis缓存)
- Oracle Vue网站助力网站创新,让你的网站飞起来(oracle vue网站)