快捷導(dǎo)航

jquery+ajaxform+springboot控件實(shí)現(xiàn)數(shù)據(jù)更新功能

更新時(shí)間：2018年01月22日 11:43:01 作者：OnyWang

這篇文章主要介紹了jquery+ajaxform+springboot控件實(shí)現(xiàn)數(shù)據(jù)更新操作,使用jquery的ajaxform插件是一個(gè)比較不錯(cuò)的選擇。具體實(shí)現(xiàn)工程大家參考下本文

應(yīng)用背景

使用springboot架構(gòu)在如下圖所示的界面布局中，實(shí)現(xiàn)數(shù)據(jù)的保存或者更新，務(wù)必需要提交到后臺(tái)，如何進(jìn)行成功或失敗的提示呢？如果使用傳統(tǒng)的springmvc的模式，勢(shì)必要傳一個(gè)頁(yè)面給前端，這個(gè)頁(yè)面僅僅是提示操作是否成功了！提示之后還得更新一下數(shù)據(jù)，就好比我們?yōu)g覽某些網(wǎng)站的時(shí)候給出的一些提示 操作成功，5秒后返回 。

比較傻，客戶體驗(yàn)也比較差勁。

改造歷程

使用ajax能否解決上述的問(wèn)題呢？

答案是肯定的，點(diǎn)擊保存之后，一個(gè)ajax請(qǐng)求到后臺(tái)，使用ResponseBody標(biāo)簽，限制返回的僅僅是數(shù)據(jù)。然后根據(jù)返回的數(shù)據(jù)給出相應(yīng)的提示信息就可以了。

傳統(tǒng)的ajax請(qǐng)求數(shù)據(jù)，需要將form里面的數(shù)據(jù)重組，全部放到我們的請(qǐng)求體里面。如下代碼所示：

$.ajax({
 type: 'POST',
 url: url,
 data: data,
 success: success,
 dataType: dataType
});

如果，我提交的form數(shù)據(jù)比較多的話，那么data就相對(duì)比較龐大了。代碼比較臃腫。同時(shí)，form表單也喪失了其存在的意義了。

有沒(méi)有一種比較優(yōu)雅的方式實(shí)現(xiàn)form表單的ajax提交呢？當(dāng)然。

jquery的ajaxform插件是一個(gè)比較不錯(cuò)的選擇。

實(shí)現(xiàn)過(guò)程

第一步。當(dāng)然是引入我們強(qiáng)大的插件了。

<script src="static/assets/js/jquery.form.min.js"></script>

該js下載，我提供一下github的地址吧： https://github.com/jquery-form/form 。

第二步。在我們想要發(fā)送請(qǐng)求的地方進(jìn)行ajax+form請(qǐng)求的發(fā)送。

function insert() {
    var options = {
     // target:  '#output1', // 用服務(wù)器返回的數(shù)據(jù) 更新 id為output1的內(nèi)容.
     // beforeSubmit: showRequest, // 提交前
     success:  showResponse, // 提交后
     //另外的一些屬性:
     //url:  url   // 默認(rèn)是form的action，如果寫的話，會(huì)覆蓋from的action.
     //type:  type  // 默認(rèn)是form的method，如果寫的話，會(huì)覆蓋from的method.('get' or 'post').
     //dataType: null  // 'xml', 'script', or 'json' (接受服務(wù)端返回的類型.)
     //clearForm: true  // 成功提交后，清除所有的表單元素的值.
     resetForm: false  // 成功提交后，重置所有的表單元素的值.
     //由于某種原因,提交陷入無(wú)限等待之中,timeout參數(shù)就是用來(lái)限制請(qǐng)求的時(shí)間,
     //當(dāng)請(qǐng)求大于3秒后，跳出請(qǐng)求.
     //timeout: 3000
    };
    //'ajaxForm' 方式的表單 .
    $('#baseForm').ajaxSubmit(options);
   }

處理一下提交后返回的方法

// 提交后
   function showResponse(responseText, statusText) {
    alert('狀態(tài): ' + statusText + '\n 返回的內(nèi)容是: \n' + responseText);
    
   }

后臺(tái)實(shí)現(xiàn)代碼

@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+"";
 }

邏輯自行定義

注意

提交的時(shí)候一定要使用ajaxSubmit方法
提交的action，請(qǐng)求方式（post還是get）、dataType（json、xml）等默認(rèn)都采用的form里面的數(shù)據(jù)，如果在參數(shù)里面進(jìn)行了修改，那么就會(huì)覆蓋掉。

后續(xù)研究

關(guān)于提示框

使用alert？我費(fèi)盡心思用上了bootstrap，你這里搞一個(gè)alert出來(lái)，簡(jiǎn)直就是往一盤美味里面吐唾沫。有沒(méi)有美觀一點(diǎn)的提示框？當(dāng)然，答案是肯定的！

使用notifications插件來(lái)完成提示框的美化

先上個(gè)效果圖：

實(shí)現(xiàn)步驟

1.導(dǎo)入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.調(diào)用接口即可

$.Notification.notify('success','top center', '溫馨提示', '保存成功！');

總結(jié)

以上所述是小編給大家介紹的jquery+ajaxform+springboot控件實(shí)現(xiàn)數(shù)據(jù)更新功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: