我們在提交表單的時候，如果沒有使用ajax提交，頁面都會自己刷新一下，顯得非常的不友好，所以我們需要把我們的表單提交修改為ajax的模式，可以讓用戶清楚地知道他們在提交表單的時候處在哪一個階段：正在提交？提交成功？

網(wǎng)上有很多的方法實現(xiàn)這個功能，但是都比較復(fù)雜，這里小編推薦一款應(yīng)該說是最簡單易用的ajax表單提交插件，這款插件是Jquery插件，而非wordpress插件，這點請注意。

下載地址： http://malsup.github.com/jquery.form.js

表單插件API

首先你需要了解這款插件的主要方法：

ajaxForm
ajaxSubmit
formToArray
formSerialize

fieldSerialize
fieldValue
clearForm
clearFields
resetForm

這里我放出一段經(jīng)過修改的示例：

注意這些類：

tishi2（覆蓋整個表單的白色透明膜）默認(rèn)隱藏? 父級

tishi（一個現(xiàn)實成功提交的綠色小框）默認(rèn)隱藏? 子集

tishi3（一個藍(lán)色的框，提示正在提交）默認(rèn)不隱藏，繼承父級的隱藏屬性?? 子集

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript">

$(document).ready(function() {

$('#submit').click(function() { //When trigger is clicked...

$('.tishi2').fadeIn('500');
});? //設(shè)置按鈕下，立即現(xiàn)實tishi2，顯示白色的膜和tishi3正在提交中
//設(shè)置
var options = {

success: function() {
$(this).ajaxSubmit();
$('.tishi').fadeIn('500');
setTimeout("$('.tishi2').fadeOut('slow')",3000);
setTimeout("$('.tishi').fadeOut('slow')",3000);

},??? //這里我設(shè)置成功之后的條件，顯示tishi（提交成功）遮住tishi3，三秒之后，整個大的tishi消失
error: function() {
$('.tishi2').fadeOut('slow');
alert("填寫錯誤，重新填寫！"); return false;

} 如果填寫錯誤，輸出錯誤提示框?? tishi2消失。
};

$('#commentform').ajaxForm(options);

//這里的一句話就是讓你的表單進(jìn)行ajax提交，是不是很簡單呢？? #commentform?? 就是你的表ID?? 設(shè)置對了就OK啦

});
</script>

下面看看具體的效果：

如何，這樣的效果很酷把~任何網(wǎng)頁的任何表單都能用這個來實現(xiàn)哦~

下面介紹一下具體的參數(shù)：

ajaxForm（）

增加所有需要的事件監(jiān)聽器，為AJAX提交表單做好準(zhǔn)備。ajaxForm不能提交表單。在document的ready函數(shù)中，使用 ajaxForm來為AJAX提交表單進(jìn)行準(zhǔn)備。ajaxForm接受0個或1個參數(shù)。這個單個的參數(shù)既可以是一個回調(diào)函數(shù)，也可以是一個Options 對象。
可鏈接（Chainable）：可以。

實例：

$('#myFormId').ajaxForm();

ajaxSubmit（）

馬上由AJAX來提交表單。大多數(shù)情況下，都是調(diào)用ajaxSubmit來對用戶提交表單進(jìn)行響應(yīng)。ajaxSubmit接受0個或1個參數(shù)。這個單個的參數(shù)既可以是一個回調(diào)函數(shù)，也可以是一個Options對象。
可鏈接（Chainable）：可以。

Options對象

ajaxForm和ajaxSubmit都支持眾多的選項參數(shù)，這些選項參數(shù)可以使用一個Options對象來提供。Options只是一個JavaScript對象，它包含了如下一些屬性與值的集合：

target

指明頁面中由服務(wù)器響應(yīng)進(jìn)行更新的元素。元素的值可能被指定為一個jQuery選擇器字符串，一個jQuery對象，或者一個DOM元素。
默認(rèn)值：null。

url

指定提交表單數(shù)據(jù)的URL。
默認(rèn)值：表單的action屬性值

type

指定提交表單數(shù)據(jù)的方法（method）：“GET”或“POST”。
默認(rèn)值：表單的method屬性值（如果沒有找到默認(rèn)為“GET”）。

beforeSubmit

表單提交前被調(diào)用的回調(diào)函數(shù)?！癰eforeSubmit”回調(diào)函數(shù)作為一個鉤子（hook），被提供來運行預(yù)提交邏輯或者校驗表單數(shù)據(jù)。如果 “beforeSubmit”回調(diào)函數(shù)返回false，那么表單將不被提交?！癰eforeSubmit”回調(diào)函數(shù)帶三個調(diào)用參數(shù)：數(shù)組形式的表單數(shù) 據(jù)，jQuery表單對象，以及傳入ajaxForm/ajaxSubmit中的Options對象。表單數(shù)組接受以下方式的數(shù)據(jù)：

[?{?name:?'username',?value:?'jresig'?},?{?name:?'password',?value:?'secret'?}?]

默認(rèn)值：null

success

表單成功提交后調(diào)用的回調(diào)函數(shù)。如果提供“success”回調(diào)函數(shù)，當(dāng)從服務(wù)器返回響應(yīng)后它被調(diào)用。然后由dataType選項值決定傳回responseText還是responseXML的值。
默認(rèn)值：null

dataType

期望返回的數(shù)據(jù)類型。null、“xml”、“script”或者“json”其中之一。dataType提供一種方法，它規(guī)定了怎樣處理服務(wù)器的響應(yīng)。這個被直接地反映到j(luò)Query.httpData方法中去。下面的值被支持：

'xml'：如果dataType == 'xml'，將把服務(wù)器響應(yīng)作為XML來對待。同時，如果“success”回調(diào)方法被指定， 將傳回responseXML值。

'json'：如果dataType == 'json'， 服務(wù)器響應(yīng)將被求值，并傳遞到“success”回調(diào)方法，如果它被指定的話。

'script'：如果dataType == 'script'， 服務(wù)器響應(yīng)將求值成純文本。

默認(rèn)值：null（服務(wù)器返回responseText值）

semantic

Boolean flag indicating whether data must be submitted in strict semantic order (slower). Note that the normal form serialization is done in semantic order with the exception of input elements of type="image". You should only set the semantic option to true if your server has strict semantic requirements and your form contains an input element of type="image".
布爾標(biāo)志，表示數(shù)據(jù)是否必須嚴(yán)格按照語義順序（slower？）來進(jìn)行提交。注意：一般來說，表單已經(jīng)按照語義順序來進(jìn)行了串行化（或序列化），除了 type="image"的input元素。如果你的服務(wù)器有嚴(yán)格的語義要求，以及表單中包含有一個type="image"的input元素，就應(yīng)該將 semantic設(shè)置為true。（譯注：這一段由于無法理解，翻譯出來可能語不達(dá)意，但請達(dá)人指正。）
默認(rèn)值：false

resetForm

布爾標(biāo)志，表示如果表單提交成功是否進(jìn)行重置。
Default value: null

clearForm

布爾標(biāo)志，表示如果表單提交成功是否清除表單數(shù)據(jù)。
默認(rèn)值：null

趕快試一下把~ 希望本文對你有所幫助！