详说Vue中axios 表单POST提交

Vue中axios 表单POST提交

后端要求是按表单提交的形式给他数据，

这是我的原代码：

 // axios.post("/HisApi1/wxpay",{    //  '/wxpay'
        //   "bodyType": "06",     //  09就诊卡充值    06住院预交金
        //   "totalAmount": this.total,
        //   "payType": "1",
        //   "operatorId": operatorNo,
        //   "businessNo": orderId, 
        //   "payChannel": "03",
        //   "authCode": this.zhifuma,
        //   "emulateJSON":true
        // }).then((result) => {
        //   log.info('------->微信支付成功接口返回数据result',result)
        // }).catch((error) => {
        //   this.$message({
        //         message: 'his接口出错，本机暂停服务，请联系工作人员处理！',
        //         type: 'warning'
        //       })
        // })

打开控制台，报400，报错信息是：传递的参数不存在，但在请求中看的到参数，只是参数的格式是Request Payload，具体也没看懂是什么，总之知道就是参数格式不对

解决方法：

1.es6写法

import qs from 'qs';
const data = { 
           "bodyType": "06",     //  09就诊卡充值    06住院预交金
           "totalAmount": this.total,
           "payType": "1",
           "operatorId": operatorNo,
           "businessNo": orderId, 
           "payChannel": "03",
           "authCode": this.zhifuma,
           "emulateJSON":true };
const options = {
  method: 'POST',
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
  data: qs.stringify(data),
  url,
};
axios(options);

2. 使用params

 var params = new URLSearchParams()
        params.append('bodyType',"06");
        params.append('totalAmount',"0.01");   //  TODO 测试用 之后要改过来
        params.append('payType',"1");
        params.append('operatorId',operatorNo);
        params.append('businessNo',orderId);
        params.append("payChannel","03");
        params.append('authCode',this.zhifuma);

        axios.post("/HisApi1/wxpay",params)
        .then((result) => {
          log.info('------> zhiixng ')
           log.info('------->微信支付成功接口返回数据result',result)
        }).catch((error) => {
           log.info('------->微信支付失败接口返回数据error',error)
        })