今天接了個開發任務要開發一套評分系統,其中評分頁面要照搬原來紙質的表格,界面示例如下:
項目一 | 項目二 | 項目三 | 項目四 | 項目五 | |
部門a | |||||
部門b | |||||
部門c | |||||
部門d | |||||
部門e |
實際的行列比這個要多。我的頁面設計是每個tr里嵌入一個form,在提交form到controller處理,那么才能一起接受這么多form並正確獲取數據?
開始我的做法是,每個form對應一個不同的action值,然后再controller中分別對應這么多個requestmapping。但是很快就發現了問題:首先如何處理頁面跳轉,其次有些方法根本不會執行,而且執行到的方法寫入數據庫的時候數據全亂了。
於是我考慮要重新設計提交方案了,於是想到了用js先獲取每個form的值,拼接成json串以后提交到后台。拼接json串的時候發現jquery的api不能一步到位,於是又用到了serializedjons插件,最終成功解決。代碼如下:
$(function() { $("#myButton").click(function() { var form1= $("#form1").serializeJSON(); var form2= $("#form2").serializeJSON(); var form3= $("#form3").serializeJSON(); var form1Str = JSON.stringify(form1); var form2Str = JSON.stringify(form2); var form3Str = JSON.stringify(form3); //拼接成["{}","{}"]的狀態 var finalStr = "[" + form1Str + "," + form2Str + "," + form3Str + "]"; $.ajax({ type:'post', url:'dealFormData.do', contentType:'application/json;charset=utf-8', data:finalStr, success:function(data) { //跳轉到成功頁面 $(location).prop('href', '../complete.html'); }
});
});
)};
controller的方法就簡單多了,用一個數組來接受數據,前面要有@RequestBoyd注解(需要有jackson-core-asl.jar和jackson-mapper-asl.jar)
@RequestMapping("dealFormData") public String dealFormDate(@RequestBody Score[] scores) { scoreService.insertScores(scores); return "score/pingfen.jsp"; }