HTML
首先我們載入jquery庫和jquery.form.js插件。jquery.form.js插件的官網(wǎng)地址:http://www./jquery/form/
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.form.min.js"></script>
然后,我們在頁面的body中加入一個(gè)簡單的表單代碼:
<form id="my_form" action="submit.php" method="post"> <p>姓名:<input type="text" name="uname" id="uname" class="input"></p> <p>性別:<input type="radio" name="sex" value="1" checked> 男 <input type="radio" name="sex" value="2"> 女 </p> <p>年齡:<input type="text" name="age" id="age" class="input" style="width:50px"></p> <p style="margin-left:30px"><input type="submit" class="btn" value="提交"> <span id="msg"></span></p> </form> <div id="output"></div>
表單中,要求輸入姓名、性別和年齡,然后提交到submit.php處理,通常情況下,點(diǎn)擊“提交”按鈕后,頁面會(huì)轉(zhuǎn)到submit.php處理表單數(shù)據(jù),而我們使用jquery.form插件后,頁面并不會(huì)跳轉(zhuǎn),直接完成了一個(gè)ajax交互。
jQuery
我們很方便的調(diào)用jquery.form插件,利用ajaxSubmit()使得整個(gè)表單的ajax提交過程變得非常的簡單。
$(function(){ var options = { beforeSubmit: showRequest, //提交前處理 success: showResponse, //處理完成 resetForm: true, dataType: 'json' }; $('#my_form').submit(function() { $(this).ajaxSubmit(options); }); }); function showRequest(formData, jqForm, options) { var uname = $("#uname").val(); if(uname==""){ $("#msg").html("姓名不能為空!"); return false; } var age = $("#age").val(); if(age==""){ $("#msg").html("年齡不能為空!"); return false; } $("#msg").html("正在提交..."); return true; } function showResponse(responseText, statusText) { $("#msg").html('提交成功'); var sex = responseText.sex==1?"男":"女"; $("#output").html("姓名:"+responseText.uname+" 性別:"+sex+" 年齡:"+responseText.age); }
以上代碼完成了表單提交前的驗(yàn)證以及提交后的處理。表單數(shù)據(jù)提交到submit.php后,我們可以根據(jù)實(shí)際情況通過submit.php檢測數(shù)據(jù)、將數(shù)據(jù)寫入數(shù)據(jù)庫,返回操作結(jié)果等等操作,本文不再列出代碼。
ajaxSubmit()選項(xiàng)設(shè)置
ajaxSubmit()提供了豐富的選項(xiàng)設(shè)置,我們根據(jù)使用的可能性大小進(jìn)行列表,以供參考。
屬性 |
描述 |
url |
Ajax請求將要提交到該url,默認(rèn)是表單的action屬性值 |
type |
指定提交表單數(shù)據(jù)的方法(method):“GET”或“POST”。默認(rèn)值:表單的method屬性值(如果沒有找到默認(rèn)為“GET”)。 |
dataType |
期望返回的數(shù)據(jù)類型。null、“xml”、“script”或者“json”其中之一。dataType提供一種方法,它規(guī)定了怎樣處理服務(wù)器的響應(yīng)。這個(gè)被直接地反映到j(luò)Query.httpData方法中去。下面的值被支持:
'xml':如果dataType == 'xml',將把服務(wù)器響應(yīng)作為XML來對待。同時(shí),如果“success”回調(diào)方法被指定, 將傳回responseXML值。
'json':如果dataType == 'json', 服務(wù)器響應(yīng)將被求值,并傳遞到“success”回調(diào)方法,如果它被指定的話。。
'script':如果dataType == 'script', 服務(wù)器響應(yīng)將求值成純文本。。
默認(rèn)值:null(服務(wù)器返回responseText值) |
target |
指明頁面中由服務(wù)器響應(yīng)進(jìn)行更新的元素。元素的值可能被指定為一個(gè)jQuery選擇器字符串,一個(gè)jQuery對象,或者一個(gè)DOM元素。
默認(rèn)值:null。 |
beforeSubmit |
表單提交前被調(diào)用的回調(diào)函數(shù)?!癰eforeSubmit”回調(diào)函數(shù)作為一個(gè)鉤子(hook),被提供來運(yùn)行預(yù)提交邏輯或者校驗(yàn)表單數(shù)據(jù)。如果“beforeSubmit”回調(diào)函數(shù)返回false,那么表單將不被提交?!癰eforeSubmit”回調(diào)函數(shù)帶三個(gè)調(diào)用參數(shù):數(shù)組形式的表單數(shù)據(jù),jQuery表單對象,以及傳入ajaxForm/ajaxSubmit中的Options對象。
默認(rèn)值:null |
success |
表單成功提交后調(diào)用的回調(diào)函數(shù)。如果提供“success”回調(diào)函數(shù),當(dāng)從服務(wù)器返回響應(yīng)后它被調(diào)用。然后由dataType選項(xiàng)值決定傳回responseText還是responseXML的值。
默認(rèn)值:null |
clearForm |
表示如果表單提交成功是否清除表單數(shù)據(jù)。默認(rèn)值:null |
resetForm |
表示如果表單提交成功是否進(jìn)行重置。默認(rèn)值: null |
jquery.form插件還提供了formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()、clearFields() 和 resetForm()等方法。通常我們可以使用表單驗(yàn)證插件和jquery.form插件一起使用,效果更好。
|