Vue向後臺傳遞數組參數

今天在做Vue+Element UI+Jfinal框架的項目中，遇到數組參數無法傳遞到後臺的問題，經排查原因，是因為request中的headers的Content-Type導致的，我的默認的Content-Type如下：

<code>application/x-www-form-urlencoded;charset=UTF-8/<code>

如果按照“application/x-www-form-urlencoded”類型向後臺傳遞參數，並用qs.stringify序列化參數，如傳遞數據name=['1','2','3']，會被轉換成：name[0]=1&name[1]=2&name[2]=3，如果你在後臺定義對應的List<string> name;是無法獲取傳遞的值。/<string>

解決辦法：在向後臺請求前進行攔截，並判斷是否用其他類型進行傳遞，如JSON格式或form-data等，這裡傳遞數組時採用JSON格式，對參數不進行序列化。

<code>var flag = config.headers['Content-Type'] && config.headers['Content-Type'].indexOf('application/json') !== -1;
if (!flag) { //如果參數不是JSON格式，則需要格式化
\tvar mult = config.headers['Content-Type'] && config.headers['Content-Type'].indexOf('multipart/form-data') !== -1;
\tif (!mult) { //如果參數不是文件格式的，則需要格式化
\t\tconfig.data = qs.stringify(config.data);
\t}
}/<code>

在調用請求時添加請求頭：

<code>export function test(data) {
\treturn request({
\t\theaders: {
\t\t\t'Content-Type': 'application/json'
\t\t},
\t\turl: '/test',
\t\tmethod: 'post',
\t\tdata: data
\t});
}/<code>

閱讀更多 稻草人1052 的文章

關鍵字: 後臺 JSON 數組