jquery+ajaxform+springboot控件實現(xiàn)數(shù)據(jù)更新功能
應用背景
使用springboot架構在如下圖所示的界面布局中，實現(xiàn)數(shù)據(jù)的保存或者更新，務必需要提交到后臺，如何進行成功或失敗的提示呢？如果使用傳統(tǒng)的springmvc的模式，勢必要傳一個頁面給前端，這個頁面僅僅是提示操作是否成功了！提示之后還得更新一下數(shù)據(jù)，就好比我們?yōu)g覽某些網(wǎng)站的時候給出的一些提示 操作成功，5秒后返回 。
比較傻，客戶體驗也比較差勁。
改造歷程
使用ajax能否解決上述的問題呢？
答案是肯定的，點擊保存之后，一個ajax請求到后臺，使用ResponseBody標簽，限制返回的僅僅是數(shù)據(jù)。然后根據(jù)返回的數(shù)據(jù)給出相應的提示信息就可以了。
傳統(tǒng)的ajax請求數(shù)據(jù)，需要將form里面的數(shù)據(jù)重組，全部放到我們的請求體里面。如下代碼所示：
$.ajax({
type: 'POST',
url: url,
data: data,
success: success,
dataType: dataType
});
如果，我提交的form數(shù)據(jù)比較多的話，那么data就相對比較龐大了。代碼比較臃腫。同時，form表單也喪失了其存在的意義了。
有沒有一種比較優(yōu)雅的方式實現(xiàn)form表單的ajax提交呢？當然。
jquery的ajaxform插件是一個比較不錯的選擇。
實現(xiàn)過程
第一步。當然是引入我們強大的插件了。
<script src="static/assets/js/jquery.form.min.js"></script>
該js下載，我提供一下github的地址吧： https://github.com/jquery-form/form 。
第二步。在我們想要發(fā)送請求的地方進行ajax+form請求的發(fā)送。
function insert() {
var options = {
// target: '#output1', // 用服務器返回的數(shù)據(jù) 更新 id為output1的內(nèi)容.
// 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參數(shù)就是用來限制請求的時間,
//當請求大于3秒后，跳出請求.
//timeout: 3000
};
//'ajaxForm' 方式的表單 .
$('#baseForm').ajaxSubmit(options);
}
處理一下提交后返回的方法
// 提交后
function showResponse(responseText, statusText) {
alert('狀態(tài): ' + statusText + '\n 返回的內(nèi)容是: \n' + responseText);
}
后臺實現(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+"";
}
邏輯自行定義
注意
- 提交的時候一定要使用ajaxSubmit方法
- 提交的action，請求方式（post還是get）、dataType（json、xml）等默認都采用的form里面的數(shù)據(jù)，如果在參數(shù)里面進行了修改，那么就會覆蓋掉。
后續(xù)研究
關于提示框
使用alert？我費盡心思用上了bootstrap，你這里搞一個alert出來，簡直就是往一盤美味里面吐唾沫。有沒有美觀一點的提示框？當然，答案是肯定的！
使用notifications插件來完成提示框的美化
先上個效果圖：
實現(xiàn)步驟
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.調(diào)用接口即可
$.Notification.notify('success','top center', '溫馨提示', '保存成功！');
總結
以上所述是小編給大家介紹的jquery+ajaxform+springboot控件實現(xiàn)數(shù)據(jù)更新功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
本文給大家分享了一個jQuery操作session的插件jQuerysession，并做了簡單介紹，及基本語法，非常不錯的一個插件，推薦給小伙伴們。2015-01-01
pushStack()方法在jQuery的DOM操作中被頻繁的使用, 如在parent(), find(), filter()中, 當然還有其他許多類似的方法, 它們往往需要返回一個jQuery封裝過的DOM結果集2012-02-02
jQuery實現(xiàn)網(wǎng)頁抖動的菜單抖動效果
這篇文章主要介紹了jQuery實現(xiàn)網(wǎng)頁抖動的菜單抖動效果,鼠標滑過菜單項可見到菜單項的抖動效果,涉及jquery鼠標事件及頁面元素樣式動態(tài)操作的技巧,需要的朋友可以參考下2015-08-08
用戶輸入一個表單，輸入準考證和驗證碼，驗證用戶是否輸入表單，點擊查詢提交，然后從服務器得到返回的數(shù)據(jù)并顯示出來2012-10-10
jQuery實現(xiàn)回車鍵（Enter）切換文本框焦點的代碼實例
這篇文章主要介紹了jQuery實現(xiàn)回車鍵（Enter）切換文本框焦點的代碼實例,需要的朋友可以參考下2014-05-05
這篇文章主要為大家詳細介紹了jquery插件實現(xiàn)掃雷游戲第二篇，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
jquery實現(xiàn)的動態(tài)回到頂部特效代碼
這篇文章主要介紹了jquery實現(xiàn)的動態(tài)回到頂部特效代碼,涉及jQuery基于時間函數(shù)的定時遞歸調(diào)用實現(xiàn)帶緩沖效果的移動功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了jQuery實用函數(shù)用法總結,匯總了jQuery常用的函數(shù)及相關技巧,需要的朋友可以參考下2014-08-08
jquery輪換效果網(wǎng)上已經(jīng)很多了，不過這個效果挺有特色的。需要的朋友可以看下。2011-07-07
本文給大家介紹bootstrap無限級分類jq拓展之前的無限級分類的封裝版的知識，非常不錯具有參考借鑒價值，感興趣的朋友一起看下吧2016-08-08