1. 程式人生 > >spring mvc ajax請求form表單轉換成json

spring mvc ajax請求form表單轉換成json

在使用jquery傳送ajax請求的時候,通過jquery的serialize()方法對錶單進行處理髮送到服務端是比較方便的。

有一種場景是,欄位大部分在form表單下,個別欄位需要組裝,

如果需要組裝的欄位比較簡單,可以使用serializeArray()將form序列化成array之後通過objList.push({name:"id",value:"999"})的方式新增,

相當於新增了一個<input name="id" value="99"> 的表單元素。

如果是複雜的物件,這麼拼接會出現以下問題。

1、從Chrome裡面檢視物件是一個object,name和value分別對應form表單裡面元素的name和value。

2、當頁面向伺服器傳送請求的時候,檢視傳送的請求,欄位值顯示[object Object]

 3、接著問題就來了,後臺提示接收到的引數 businessArea失敗,仔細看一下發送的form表單


仔細看,就是這麼傳過去了。。。這就想起來,以前表單裡面新增List型別的物件的時候,html的name標籤經常就是user[0].id user[1].id 以這種方式組裝的。

現在看這種方法行不通。

4、如果自己拼接form表單感覺太麻煩,比較方便的解決方案還是有的,我們可以改成application/json的形式提交,首先要將form表單序列化成json物件,方法如下

$.fn.serializeObject 
= function() { var o = {}; var a = this.serializeArray(); $.each(a, function() { if (o[this.name]) { if (!o[this.name].push) { o[this.name] = [o[this.name]]; } o[this.name].push(this.value || ''); } else { o[this.name] = this.value || ''
; } }); return o; };

使用$("form").serializeObject()方法後form表單內的元素就可以序列化成json物件傳送給後臺。

這時如果我們需要對form表單新增引數,直接  data["name"] = addedObj 即可。

同時ajax新增請求引數contentType:'application/json',

5、服務端開發框架是 spring boot,在直接接收form表單時是不需要@RequestBody標籤的,

    當請求頭改為 Accept:application/json後,服務端需要打上@RequestBody標籤。

     自此問題解決。

參考了一篇spring mvc 接收引數的文章