jquery+ajaxform+springboot控件怎么實現數據更新功能

這篇文章將為大家詳細講解有關jquery+ajaxform+springboot控件怎么實現數據更新功能，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

應用背景

使用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', '溫馨提示', '保存成功！');

關于“jquery+ajaxform+springboot控件怎么實現數據更新功能”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。