Jquery Ajax表單提交外掛程式jquery form用法

HTML

首先我們載入jquery庫和jquery.form.js外掛程式。jquery.form.js外掛程式的官網地址：http://www.malsup.com/jquery/form/

代碼如下	複製代碼
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.form.min.js"></script>

然後，我們在頁面的body中加入一個簡單的表單代碼：

代碼如下

複製代碼

<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處理，通常情況下，點擊“提交”按鈕後，頁面會轉到submit.php處理表單資料，而我們使用jquery.form外掛程式後，頁面並不會跳轉，直接完成了一個ajax互動。
jQuery

我們很方便的調用jquery.form外掛程式，利用ajaxSubmit()使得整個表單的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); }

以上程式碼完成了表單提交前的驗證以及提交後的處理。表單資料提交到submit.php後，我們可以根據實際情況通過submit.php檢測資料、將資料寫入資料庫，返回操作結果等等操作，本文不再列出代碼。
ajaxSubmit()選項設定

ajaxSubmit()提供了豐富的選項設定，我們根據使用的可能性大小進行列表，以供參考。

屬性	描述
url	Ajax請求將要提交到該url，預設是表單的action屬性值
type	指定提交表單資料的方法（method）：“GET”或“POST”。預設值：表單的method屬性值（如果沒有找到預設為“GET”）。
dataType	期望返回的資料類型。null、“xml”、“script”或者“json”其中之一。dataType提供一種方法，它規定了怎樣處理伺服器的響應。這個被直接地反映到jQuery.httpData方法中去。下面的值被支援： 'xml'：如果dataType == 'xml'，將把伺服器響應作為XML來對待。同時，如果“success”回調方法被指定， 將傳回responseXML值。 'json'：如果dataType == 'json'， 伺服器響應將被求值，並傳遞到“success”回調方法，如果它被指定的話。。 'script'：如果dataType == 'script'， 伺服器響應將求值成純文字。。 預設值：null（伺服器返回responseText值）
target	指明頁面中由伺服器響應進行更新的元素。元素的值可能被指定為一個jQuery選取器字串，一個jQuery對象，或者一個DOM元素。 預設值：null。
beforeSubmit	表單提交前被調用的回呼函數。“beforeSubmit”回呼函數作為一個鉤子（hook），被提供來運行預提交邏輯或者校正表單資料。如果“beforeSubmit”回呼函數返回false，那麼表單將不被提交。“beforeSubmit”回呼函數帶三個調用參數：數組形式的表單資料，jQuery表單對象，以及傳入ajaxForm/ajaxSubmit中的Options對象。 預設值：null
success	表單成功提交後調用的回呼函數。如果提供“success”回呼函數，當從伺服器返迴響應後它被調用。然後由dataType選項值決定傳回responseText還是responseXML的值。 預設值：null
clearForm	表示如果表單提交成功是否清除表單資料。預設值：null
resetForm	表示如果表單提交成功是否進行重設。預設值: null

jquery.form外掛程式還提供了formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()、clearFields() 和 resetForm()等方法