vue中post请求使用form表单格式发送数据

7 篇文章 0 订阅

这一篇是原生vuepost请求使用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),代表的是算签名,会在下一篇博文讲。
如果发现什么问题请留言,毕竟代码都是人写的难免会出错。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值