首頁 >web前端 >js教程 >jquery+ajax怎樣實現資料更新

jquery+ajax怎樣實現資料更新

php中世界最好的语言
php中世界最好的语言原創
2018-03-15 10:10:063503瀏覽

這次帶給大家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+"";
 }

邏輯自行定義

##注意

  • #提交的時候一定要使用ajaxSubmit方法

  • 提交的action,請求方式(post還是get)、dataType(json 、xml)等預設都採用的form裡面的數據,如果在參數裡面進行了修改,那麼就會覆寫掉。

後續研究

#關於提示方塊

使用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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn