axios.js送出表單資料的解決辦法

axios因為小巧而性能強大受到很多人的追捧，但是其預設的資料送出方式為Payload，這樣給背景解析帶來了較大的困擾，因為難以從Request中擷取到參數，是以預設的資料對象拼裝無法成功 ，尤其是采用Spring MVC的@ModalAttribute注解時(沒有使用@RequestBody注解)。表單資料與Payload資料之間的差異請參見$.ajax使用總結(一)：Form送出與Payload送出。

解決方法如下：

1. 修改頭部資訊，将Content-Type改為“application/x-www-form-urlencoded”; charset=UTF-8”;

2. 将資料進行“form-urlencoded”編碼；

編碼的庫采用官方推薦的Qs，可用如下指令直接安裝：

npm install qs --save
           

以Form送出的代碼實作如下：

//  首先進行url編碼
var data =  Qs.stringify({
    firstName: 'yiifaa',
    lastName: '@163.com'
});
//  送出資料
axios({
      method: 'post',
      url: '/user/12345',
      //    必不可少，修改資料的送出方式
      headers : {
          "Content-Type":'application/x-www-form-urlencoded; charset=UTF-8'
      },
      data
});
           

如果存在資料的級聯與數組情況，假定要傳輸的資料如下；

{
    date : {
        startTime : '2017-07-07'
    },
    names : ['yiifaa', 'yiifee']
}
           

那麼需要加入以下參數:

var data =  Qs.stringify({
    date : {
        startTime : '2017-07-07'
    },
    names : ['yiifaa', 'yiifee']
},
    //  加入JS對象轉換配置
    {allowDots: true});
           

最後送出Form Data的效果如下：

date.startTime:2017-07-07
names[0]:yiifaa
names[1]:yiifee
           

剛好是Spring MVC要求的資料格式。

結論

利用”Content-Type”與qs庫可輕松解決axios.js送出表單資料的難題，強烈建議不要輕易使用params參數，尤其是在執行POST送出時，它們之間的差別參見浏覽器查詢參數與表單資料的優先級問題。