天天看點

【ajax 送出表單】多種方式的注意事項 ,serialize()的使用

在業務中,可能因為表單内容過于龐大,字段過于繁雜,如果人為去拼接的話 ,需要耗費大量的時間和精力,與此同時,代碼看上去也是備援不堪。

是以,送出表單的時候如果能整個表單資料整體送出,那是非常開心的事情。

同時,有時候會有需求在前台送出給背景資料之後,希望背景能在處理之後傳回資料給前台,可能是辨別也好,可能是具體的資料也罷。

這時候又需要使用ajax去送出資料。【因為使用jQuery的submit()方法是沒有回調函數的,那個函數隻是當表單發生送出時,要同時執行的函數而已,例如:$("#poFromId").submit()】

那能不能使用ajax進行局部頁面重新整理的同時将整個表單的資料送出呢?

答案肯定是可以的,

首先,咱們把整個的一圈代碼給出來:

1.jsp頁面

【ajax 送出表單】多種方式的注意事項 ,serialize()的使用
【ajax 送出表單】多種方式的注意事項 ,serialize()的使用

View Code

2.js  表單整體使用ajax送出部分

【ajax 送出表單】多種方式的注意事項 ,serialize()的使用
【ajax 送出表單】多種方式的注意事項 ,serialize()的使用

3.controller背景接收部分

【ajax 送出表單】多種方式的注意事項 ,serialize()的使用
【ajax 送出表單】多種方式的注意事項 ,serialize()的使用

4.上面表單中name對應的實體Position

【ajax 送出表單】多種方式的注意事項 ,serialize()的使用
【ajax 送出表單】多種方式的注意事項 ,serialize()的使用

接下來,咱們要細細談一談這上面需要注意的小細節:

1.首先,如果你想使用js控制送出整個表單,那最起碼的,頁面中不能存在元素的name=submit的,當然最下面的送出按鈕也不能使用type=submit了,因為你想在js中處理之後再去使用js送出表單資料嘛!!

2.其次,js中,擷取整體的表單資料,使用了var position = $("#poFromId").serialize();序列化的方法去擷取整個表單的資料!!

3.再者說,既然你講前背景表單資料傳輸交給spring去管理了,那最起碼的要求,你得在form表單中将實體中規定不能為null的字段值都給上,同樣的,如果你想前台傳遞給背景,背景直接拿到的就是一個字段都比較完整的實體對象,那表單中的name就要盡量多的和實體中的字段值保持一緻;

4.對于第3點中,可能會出現,實體中的某個屬性也是個實體,例如:【注冊的時候,User實體需要選擇是哪個部門的,而Department實體在注冊頁面上,也就是個下拉框,也就是個departmentId而已,對于這種情況,我們可以将name設定為其他的,在背景單獨接收這個name對應的值,然後将departmentId執行個體化成Department對象,再指派給User實體】

5.注意ajax中,data部分是:$.getJSON("../department/addPosition.htmls?"+position,拼接的,而不是$.getJSON("../department/addPosition.htmls",{position:position},給出的。這就需要試驗一下,兩種方式最後請求的位址是什麼樣子的;

【ajax 送出表單】多種方式的注意事項 ,serialize()的使用

6.Controller中,這裡需要傳回資料給前台,才使用了@ResponseBody這個注解;而就算你傳回是void的,不希望給前台傳回值,也需要@ResponseBody。不然,spring會認為你要去找那一串位址,會無休止的找下去,就會報錯。

【ajax 送出表單】多種方式的注意事項 ,serialize()的使用

這裡接着說:

上面那個表單,資料量很小,如果送出的是個大表單,那麼就不能采用上面這種ajax的寫法了,而是:

【ajax 送出表單】多種方式的注意事項 ,serialize()的使用
【ajax 送出表單】多種方式的注意事項 ,serialize()的使用

使用jQuery中最原始的ajax的寫法,這樣就可以保證大量的資料傳遞給背景了。