使用jquery+ajaxform+springboot如何實現資料更新

這篇文章主要介紹了jquery ajaxform springboot控制項實現資料更新操作,使用jquery的ajaxform外掛程式是比較不錯的選擇。具體實現工程大家參考下本文

應用背景

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

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

有關ejsExcel模板使用方法

#React Native中NavigatorIOS元件（詳細教學說明）

在React中有關元件間抽象詳細說明

Vue中datepicker外掛程式無法監聽datepicker輸入框的值問題

#在Vue中有關datepicker的範例程式碼

如何解決網站不登入就無法複製內容的問題

以上是使用jquery+ajaxform+springboot如何實現資料更新的詳細內容。更多資訊請關注PHP中文網其他相關文章！