在業務中,可能因為表單内容過于龐大,字段過于繁雜,如果人為去拼接的話 ,需要耗費大量的時間和精力,與此同時,代碼看上去也是備援不堪。
是以,送出表單的時候如果能整個表單資料整體送出,那是非常開心的事情。
同時,有時候會有需求在前台送出給背景資料之後,希望背景能在處理之後傳回資料給前台,可能是辨別也好,可能是具體的資料也罷。
這時候又需要使用ajax去送出資料。【因為使用jQuery的submit()方法是沒有回調函數的,那個函數隻是當表單發生送出時,要同時執行的函數而已,例如:$("#poFromId").submit()】
那能不能使用ajax進行局部頁面重新整理的同時将整個表單的資料送出呢?
答案肯定是可以的,
首先,咱們把整個的一圈代碼給出來:
1.jsp頁面
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIml2ZuUWYxYmZhR2MiNjY3QGMjFGZlNTOzUWZjJGO2YzM1MWMfdWbp9CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.gif)
View Code
2.js 表單整體使用ajax送出部分
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIml2ZuUWYxYmZhR2MiNjY3QGMjFGZlNTOzUWZjJGO2YzM1MWMfdWbp9CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.gif)
3.controller背景接收部分
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIml2ZuUWYxYmZhR2MiNjY3QGMjFGZlNTOzUWZjJGO2YzM1MWMfdWbp9CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.gif)
4.上面表單中name對應的實體Position
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIml2ZuUWYxYmZhR2MiNjY3QGMjFGZlNTOzUWZjJGO2YzM1MWMfdWbp9CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.gif)
接下來,咱們要細細談一談這上面需要注意的小細節:
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},給出的。這就需要試驗一下,兩種方式最後請求的位址是什麼樣子的;
6.Controller中,這裡需要傳回資料給前台,才使用了@ResponseBody這個注解;而就算你傳回是void的,不希望給前台傳回值,也需要@ResponseBody。不然,spring會認為你要去找那一串位址,會無休止的找下去,就會報錯。
這裡接着說:
上面那個表單,資料量很小,如果送出的是個大表單,那麼就不能采用上面這種ajax的寫法了,而是:
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIml2ZuUWYxYmZhR2MiNjY3QGMjFGZlNTOzUWZjJGO2YzM1MWMfdWbp9CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.gif)
使用jQuery中最原始的ajax的寫法,這樣就可以保證大量的資料傳遞給背景了。