應用背景
使用springboot架構在如下圖所示的界面布局中，實現數據的保存或者更新，務必需要提交到后臺，如何進行成功或失敗的提示呢？如果使用傳統的springmvc的模式，勢必要傳一個頁面給前端，這個頁面僅僅是提示操作是否成功了！提示之后還得更新一下數據，就好比我們瀏覽某些網站的時候給出的一些提示 操作成功，5秒后返回 。
比較傻，客戶體驗也比較差勁。
改造歷程
使用ajax能否解決上述的問題呢？
答案是肯定的，點擊保存之后，一個ajax請求到后臺，使用ResponseBody標簽，限制返回的僅僅是數據。然后根據返回的數據給出相應的提示信息就可以了。
傳統的ajax請求數據，需要將form里面的數據重組，全部放到我們的請求體里面。如下代碼所示：
$.ajax({ type: 'POST', url: url, data: data, success: success, dataType: dataType});如果，我提交的form數據比較多的話，那么data就相對比較龐大了。代碼比較臃腫。同時，form表單也喪失了其存在的意義了。
有沒有一種比較優雅的方式實現form表單的ajax提交呢？當然。
jquery的ajaxform插件是一個比較不錯的選擇。
實現過程
第一步。當然是引入我們強大的插件了。
<script src="static/assets/js/jquery.form.min.js"></script>
該js下載，我提供一下github的地址吧： https://github.com/jquery-form/form 。
第二步。在我們想要發送請求的地方進行ajax+form請求的發送。
function insert() { var options = { // target: '#output1', // 用服務器返回的數據 更新 id為output1的內容. // beforeSubmit: showRequest, // 提交前 success: showResponse, // 提交后 //另外的一些屬性: //url: url // 默認是form的action，如果寫的話，會覆蓋from的action. //type: type // 默認是form的method，如果寫的話，會覆蓋from的method.('get' or 'post'). //dataType: null // 'xml', 'script', or 'json' (接受服務端返回的類型.) //clearForm: true // 成功提交后，清除所有的表單元素的值. resetForm: false // 成功提交后，重置所有的表單元素的值. //由于某種原因,提交陷入無限等待之中,timeout參數就是用來限制請求的時間, //當請求大于3秒后，跳出請求. //timeout: 3000 }; //'ajaxForm' 方式的表單 . $('#baseForm').ajaxSubmit(options); }處理一下提交后返回的方法
// 提交后 function showResponse(responseText, statusText) { alert('狀態: ' + statusText + '/n 返回的內容是: /n' + responseText); }后臺實現代碼
@RequestMapping("/basicSave") @ResponseBody public String BasicSave(PointInfo pi){ if(!pi.getSaddress().equals("")){ pi.setType("1"); }else{ pi.setType("0"); } int newId = pointInfoService.saveorupdate(pi); return newId+""; }邏輯自行定義
注意
后續研究
關于提示框
使用alert？我費盡心思用上了bootstrap，你這里搞一個alert出來，簡直就是往一盤美味里面吐唾沫。有沒有美觀一點的提示框？當然，答案是肯定的！
使用notifications插件來完成提示框的美化
先上個效果圖：
實現步驟
1.導入notifications所需js和css
<script src="static/assets/plugins/notifyjs/dist/notify.min.js"></script> <script src="static/assets/plugins/notifications/notify-metro.js"></script> <script src="static/assets/plugins/notifications/notifications.js"></script> <link href="static/assets/plugins/notifications/notification.css" rel="external nofollow" rel="stylesheet">
2.調用接口即可
$.Notification.notify('success','top center', '溫馨提示', '保存成功！');總結
以上所述是小編給大家介紹的jquery+ajaxform+springboot控件實現數據更新功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
