jquery異步提交表單

參考：http://www.vaikan.com/docs/jquery.form.plugin/jquery.form.plugin.html

 引入js

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>

異步提交表單要引入 jquery.form.js。jquery.form.js用到了jquery，須要在引入前引入jquery.js。

建立一個簡單的表單

<form action="test" method="post" id="myForm">
	<input type="text" name="name"/>
	<input type="text" name="password"/>
	<input type="submit" value="ajaxForm提交" />
	<input type="button" value="ajaxSubmit提交" onclick="sub()"/>
</form>

使用ajaxForm()異步提交表單

$(document).ready(function() {
    $('#myForm').ajaxForm(function() {
        alert("提交myForm");
   });
});

 表單在提交的時候會調用ajaxForm()。ajaxForm 須要零個或一個參數。這惟一的一個參數能夠是一個回調函數或者是一個可選參數對象。關於可選參數對象將在下面說明。

使用ajaxSubmit()異步提交表單

function sub(){
	$('#myForm').ajaxSubmit();
}

 ajaxSubmit會提交這個表單，而ajaxForm則不會，ajaxForm會在表單提交時調用。

可選參數項對象

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

error

當表單提交失敗後執行的函數，如服務器端執行報錯，將會執行。

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

例子:

$(document).ready(function() {
	
    $('#myForm').ajaxForm({
    	dataType:'json',
    	beforeSubmit:function(data){     //表單提交前執行
    		for(var i=0;i<data.length;i++){
    			if(!(data[i].value)){
    				alert("不能爲空");
    				return false;    //返回false不提交
    			}
    		}
    		return true;
    	},
	    success:function(data) {
	        alert(data.msg);
	    },
	    error:function(){
	    	alert("錯誤");
	    }
	});
});