vue中post请求使用form表单格式发送数据
接着上一篇博文讲post请求发送form表达格式的数据(VUE),getSign(“username=” + _this.user.username + “&password=” + _this.user.password)代表的是算签名,下一篇博文讲。new Vue({el: ‘#app’,data: {user: {},result: {}},// 发送post请求时,不...
·
这一篇是原生vue中post请求使用form表单格式发送数据,里面还掺杂了一些关于算签名业务。可能看起来比较繁琐,不过注释还写的挺全的,可以供大家参考。
html:
<div id="app">
用户名:<input type="text" style="width: 200px" name="username" v-model="user.username"/>
密 码:<input type="password" style="width: 200px" name="password" v-model="user.password"/>
<!--<input type="submit" name="submit" value="登录"/>-->
<button style="width: 50px;height: 30px;" @click="login()">登录</button>
</div>
js:
new Vue({
el: '#app',
data: {
user: {},
result: {}
},
// 发送post请求时,不能发送 Content-Type: application/json;charset=UTF-8 这个格式,因为后台过滤器要进行处理签名
headers: {
'Content-Type': 'application/x-www-form-urlencoded', // 设置请求头为form表单格式
// 'Content-Type': 'application/json;charset=UTF-8'
},
methods: {
login: function () {
var _this = this;
axios({
method: 'post',
url: '/noauth/login' + getSign("username=" + _this.user.username + "&password=" + _this.user.password),
data: {
username: _this.user.username,
password: _this.user.password
},
transformRequest: [function (data) { // 将{username:111,password:111} 转成 username=111&password=111
var ret = '';
for (var it in data) {
// 如果要发送中文 编码
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret.substring(0,ret.length-1)
}],
}).then(function (response) {
// 拿到data
_this.result = response.data;
console.info(_this.result.message);
// 将验证信息放入缓存
localStorage.setItem("sbkjauth",response.headers["sbkjauth"]);
if (_this.result.status == "0201") {
var url = "/html/index.html";
axios({
method:"get",
url:url+getSign(),
headers:{
"sbkjauth":localStorage.getItem("sbkjauth")
},
}).then(function (resp) {
console.info(resp.data);
})
}
}).catch(function (reason) {
console.error(reason)
})
},
created: function () {
console.info("页面尚未加载完成!")
}
});
其中里面的getSign(“username=” + _this.user.username + “&password=” + _this.user.password),代表的是算签名,会在下一篇博文讲。
如果发现什么问题请留言,毕竟代码都是人写的难免会出错。
更多推荐
已为社区贡献3条内容
所有评论(0)