最近在學習jQuery，發(fā)現(xiàn)表單提交的提示效果可以通過jQuery實現(xiàn)，十分方便實用。下面我將分享一下如何利用jQuery實現(xiàn)表單提交提示效果。

$('form').on('submit', function(event){
event.preventDefault();
var form = $(this);
var submitButton = form.find('button[type="submit"]');
// 添加正在提交效果
submitButton.html('<i class="fa fa-spinner fa-spin"></i> 正在提交...');
// 發(fā)送表單數(shù)據(jù)到后臺
$.ajax({
url: form.attr('action'),
method: form.attr('method'),
data: form.serialize(),
success: function(response){
// 添加成功提示
submitButton.html('<i class="fa fa-check-circle"></i> 提交成功');
// 清空表單
form.trigger('reset');
// 重置提交按鈕文字
setTimeout(function(){
submitButton.html('提交');
}, 3000);
},
error: function(){
// 添加失敗提示
submitButton.html('<i class="fa fa-times-circle"></i> 提交失敗');
// 重置提交按鈕文字
setTimeout(function(){
submitButton.html('提交');
}, 3000);
}
});
});

以上代碼通過監(jiān)聽表單的submit事件，在表單提交時阻止默認行為，并獲取表單及提交按鈕的jQuery對象。在發(fā)送請求前，通過jQuery的ajax方法將表單數(shù)據(jù)發(fā)送到后臺，并在請求成功和失敗時添加對應的提示效果，最后重置提交按鈕文字。這樣，我們就可以通過jQuery實現(xiàn)簡單的表單提交提示效果。