這次帶給大家jquery+ajax怎樣實現數據更新,jquery+ajax實現數據更新的注意事項有哪些,下面就是實戰案例,一起來看一下。
應用背景
使用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', '温馨提示', '保存成功!');
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
在jquery的請求ajax與在servlet中的回應ajax用jquery操作輸入框的文字內容實作輸入方塊與下拉方塊連動效果以上是jquery+ajax怎樣實現資料更新的詳細內容。更多資訊請關注PHP中文網其他相關文章!