vue.js - axios发送post请求，如何提交表单数据？

问题描述

问 题

我在vue.js中使用axios发送post请求到后台。提交的对象是vue中定义的。代码如下：

/**
 * 
 */
var app = new Vue({
    
    el: "#register",
    
    data: {
        registerUrl: "/KindlePocket/bindingData"
        newUserInfo: {
            userName:'n',
            phone:'13',
            email:'12',
            emailPwd:'22',
            kindleEmail:'asd'
        }
    },
    
    methods: {
        register: function() {
            
                axios.post(this.registerUrl, this.newUserInfo, {
                      headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                      }
                  })
                  .then(function (response) {
                    console.log(response);
                  })
                  .catch(function (error) {
                    console.log(error);
                  });
            
        }
    }
})

我想提交 newUserInfo这个对象到后台，以表单形式。请问应该如何处理参数呢？
谢谢。

---

在node环境中可以使用Qs模块,Qs.stringify(data)来处理数据，可是如果在非node环境高中呢，如何使用Qs模块呢？

解决方案

你要是看下用法就解决了。。。
https://www.npmjs.com/package...
或者
https://github.com/mzabriskie...

axios({
  url: '/user',
  method: 'post',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  },
  transformRequest: [function (data) {
    // Do whatever you want to transform the data
    let ret = ''
    for (let it in data) {
      ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
    }
    return ret
  }],
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})

这篇关于vue.js - axios发送post请求，如何提交表单数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！