jquery.form.js（ajax表單提交）

標籤：comm   sam   res   this   eve   簡單的   fun   函數   submit   

Form外掛程式地址：

官方網站：http://malsup.com/jQuery/form/

翻譯地址：http://www.aqee.net/docs/jquery.form.plugin/jquery.form.plugin.html#getting-started

一.準備工作

寫一個表單：

<form id="reg" action="123.php" method="post">

<p>
<label for="user">帳號：</label>
<input type="text" name="user" class="text" id="user" title="" />
</p>
<p>
<label for="pass">密碼：</label>
<input type="password" name="pass" class="text" id="pass" />
</p>

<input type="submit" value="Submit Comment" />

</form>

引入jQuery和Form Plugin Javascript指令檔：

<script type="text/javascript" src="path/to/jquery.js"></script><script type="text/javascript" src="path/to/form.js"></script>

二.核心方法

form.js 外掛程式有兩個核心方法：ajaxForm()和 ajaxSubmit()，它們集合了從控製表單元素到決定如何管理提交進行的功能。

ajaxForm

預先處理將要使用AJAX方式提交的表單，將所有需要用到的事件監聽器添加到其中。它不是提交這個表單。 在頁面的ready函數裡使用ajaxForm來給你頁面上的表單做這些AJAX提交的準備工作。 ajaxForm 需要零個或一個參數。這唯一的一個參數可以是一個回呼函數或者是一個選擇性參數對象。

//ajaxForm 提交方式  $(‘#reg‘).ajaxForm(function () {  alert(‘提交成功！‘);  }); 

注意：使用 ajaxForm()方法，會直接實現 ajax 提交。自動阻止了預設行為，而它提交的預設頁面是 form 控制項的 action 屬性的值。提交的方式是 method 屬性的值。

ajaxSubmit

立即通過AJAX方式提交表單。最常見的用法是對使用者提交表單的動作進行響應時調用它。 ajaxForm 需要零個或一個參數。唯一的一個參數可以是一個回呼函數或者是一個選擇性參數對象。

//ajaxSubmit()提交方式  $(‘#reg‘).submit(function () {  $(this).ajaxSubmit(function () {  alert(‘提交成功！‘);  });  return false;  //ajaxSubmit不會自動阻止預設提交，需要自行阻止。這裡阻止預設直接提交行為});  

注意： ajaxForm()方法，是針對 form 直接提交的， 所以阻止了預設行為。而 ajaxSubmit()方法，由於是針對 submit()方法的，所以需要手動阻止預設行為。而使用了 validate.js 驗證外掛程式，那麼 ajaxSubmit()比較適合我們。

 

疑問：ajaxForm()與ajaxSubmit()的區別：

　　答案：$("#form1").ajaxForm();　　相當於以下兩行：

　　　　　$("#form1".submit)(function(){

　　　　 　　  $("#form1").ajaxSubmit();

　　　　　　　return false;

　　　　   })　　//也就是說ajaxFrom()會自動阻止表單提交。而ajaxSubmit()不會自動阻止表單提交，想阻止表單提交，要自己return false;

 

三.選擇性參數項對象

ajaxForm 和 ajaxSubmit 都支援大量的選擇性參數，它們通過選擇性參數項對象傳入。選擇性參數項對象只是一個簡單的 JavaScript對象，裡邊包含了一些屬性和一些值:

target

用server端返回的內容更換指定的頁面元素的內容。 這個值可以用jQuery 選取器來表示, 或者是一個jQuery 對象， 一個 DOM 元素。
預設值：  null

url

表單提交的地址。
預設值： 表單的 action的值

type

表單提交的方式，‘GET‘ 或 ‘POST‘.
預設值： 表單的  method 的值 (如果沒有指明則認為是 ‘GET‘)

beforeSubmit

表單提交前執行的方法。這個可以用在表單提交前的預先處理，或表單校正。如果‘beforeSubmit‘指定的函數返回false，則表單不會被提交。 ‘beforeSubmit‘函數調用時需要3個參數：數組形式的表單資料，jQuery 對象形式的表單對象，可選的用來傳遞給ajaxForm/ajaxSubmit 的對象。 數組形式的表單資料是下面這樣的格式：

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

預設值：  null

success

當表單提交後執行的函數。 如果‘success‘ 回呼函數被指定，當server端返回對錶單提交的響應後，這個方法就會被執行。 responseText 和 responseXML 的值會被傳進這個參數 (這個要依賴於dataType的類型).

預設值： null

dataType

指定伺服器響應返回的資料類型。其中之一: null, ‘xml‘, ‘script‘, 或者 ‘json‘. 這個  dataType 選項用來指示你如何去處理server端返回的資料。 這個和  jQuery.httpData 方法直接相對應。 下面就是可以用的選項：

‘xml‘: 如果 dataType == ‘xml‘ 則 server 端返回的資料被當作是 XML 來處理， 這種情況下‘success‘指定的回呼函數會被傳進去 responseXML 資料

‘json‘: 如果 dataType == ‘json‘ 則server端返回的資料將會被執行，並傳進‘success‘回呼函數

‘script‘: 如果 dataType == ‘script‘ 則server端返回的資料將會在內容相關的環境中被執行

預設值： null

semantic

一個布爾值，用來指示表單裡提交的資料的順序是否需要嚴格按照語義的順序。一般表單的資料都是按語義順序序列化的，除非表單裡有一個 type="image"元素. 所以只有當表單裡必須要求有嚴格順序 並且表單裡有 type="image"時才需要指定這個。
預設值：  false

resetForm

布爾值，指示表單提交成功後是否需要重設。
預設值：  null

clearForm

布爾值，指示表單提交成功後是否需要清空。
預設值：  null

iframe

布爾值，用來指示表單是否需要提交到一個iframe裡。 這個用在表單裡有file域要上傳檔案時。更多資訊請參考 程式碼範例 頁面裡的 File Uploads 文檔。 
預設值：  false

參考代碼：

$("#reg").submit(function() {        $(this).ajaxSubmit({            url : "123.php",  //設定提交的 url，可覆蓋 action 屬性            target : "#box",  //伺服器返回的內容存放在#box裡             type : "GET",             dateType : null, //xml,json,script，預設為 null            //clearForm : true, //成功提交後，清空表單             //resetForm : true,　//成功提交後，重設表單              data : { //增加額外的資料提交                  aaa : ‘bbb‘,                  ccc : ‘ddd‘            },            beforeSubmit : function(formData, jqForm, options){//提交資料之前執行，一般用於資料驗證                //如果資料驗證不合法，就返回false，不讓提交.預設為true                //alert(formData[0].name); //得到傳遞表單元素的 name                  // alert(formData[0].value); //得到傳遞表單元素的 value                  //alert(jqForm[0].user.value); //得到 form 的 jquery 對象                  //alert(options.url);  //得到目前 options 設定的屬性                  return true;            },            success : function(responseText,statusText) {   //成功時回調                alert(responseText + statusText);                // alert(‘Thanks for your comment!‘);               },            error : function(event, errorText, errorType){    //錯誤時回調                alert(errorText + errorType);            },        });        return false;    });

四．工具方法

form.js 除了提供兩個核心方法之外，還提供了一些常用的工具方法。這些方法主要是在提交前或後對資料或表單進行處理的。

//表單序列化alert($(‘#reg‘).formSerialize());//序列化某一個欄位alert($(‘#reg #user‘).fieldSerialize());//得到某個欄位的 value 值alert($(‘#reg #user‘).fieldValue());//重設表單$(‘#reg‘).resetForm()//清空某個欄位$(‘#reg #user‘).clearFields();

 

jquery.form.js（ajax表單提交）