應(yīng)用背景
使用springboot架構(gòu)在如下圖所示的界面布局中皂冰，實現(xiàn)數(shù)據(jù)的保存或者更新歇竟，務(wù)必需要提交到后臺萎羔，如何進行成功或失敗的提示呢按厘？如果使用傳統(tǒng)的springmvc的模式医吊，勢必要傳一個頁面給前端，這個頁面僅僅是提示操作是否成功了逮京！提示之后還得更新一下數(shù)據(jù)卿堂，就好比我們?yōu)g覽某些網(wǎng)站的時候給出的一些提示操作成功，5秒后返回懒棉。
比較傻草描，客戶體驗也比較差勁。
改造歷程
使用ajax能否解決上述的問題呢策严？
答案是肯定的穗慕，點擊保存之后，一個ajax請求到后臺妻导，使用ResponseBody標(biāo)簽逛绵，限制返回的僅僅是數(shù)據(jù)。然后根據(jù)返回的數(shù)據(jù)給出相應(yīng)的提示信息就可以了倔韭。
傳統(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提交呢鲤孵？當(dāng)然壶栋。
jquery的ajaxform插件是一個比較不錯的選擇。
實現(xiàn)過程
- 第一步普监。當(dāng)然是引入我們強大的插件了贵试。
<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', // 用服務(wù)器返回的數(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' (接受服務(wù)端返回的類型.)
//clearForm: true // 成功提交后运准，清除所有的表單元素的值.
resetForm: false // 成功提交后，重置所有的表單元素的值.
//由于某種原因,提交陷入無限等待之中,timeout參數(shù)就是用來限制請求的時間,
//當(dāng)請求大于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ù)研究
關(guān)于提示框
使用alert胰丁？我費盡心思用上了bootstrap，你這里搞一個alert出來喂分，簡直就是往一盤美味里面吐唾沫隘马。有沒有美觀一點的提示框？當(dāng)然妻顶，答案是肯定的！
使用notifications插件來完成提示框的美化
先上個效果圖：
實現(xiàn)步驟
- 導(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="stylesheet">
- 調(diào)用接口即可
$.Notification.notify('success','top center', '溫馨提示', '保存成功蜒车！');
完畢讳嘱！實現(xiàn)了jquery+ajaxform的表單提交過程。
