1 、引入依賴指令碼

<script type="text/javascript" src="/js/jquery/jquery.form.js"></script>   //ajaxForm 依賴指令碼

2、使用方法

//1、回撥函式使用方法
$('#form1').ajaxForm(function() {     
   $('#output1').html("提交成功！").show();      
});           
$('#form1').ajaxSubmit(function() {     
   $('#output2').html("提交成功！").show();      
});  

//2、option物件使用方法
var ajax_option={
   target: '#output',          //把伺服器返回的內容放入id為output的元素中      
   beforeSubmit: showRequest,  //提交前的回撥函式  
   success: showResponse,      //提交後的回撥函式  
   url: url,                 //預設是form的action， 如果申明，則會覆蓋  
   type: type,               //預設是form的method（get or post），如果申明，則會覆蓋  
   dataType: null,           //html(預設), xml, script, json...接受服務端返回的型別  
   clearForm: true,          //成功提交後，清除所有表單元素的值  
   resetForm: true,          //成功提交後，重置所有表單元素的值  
   timeout: 3000               //限制請求的時間，當請求大於3秒後，跳出請求 
};
//formData: 陣列物件，提交表單時，Form外掛會以Ajax方式自動提交這些資料，格式如：[{name:user,value:val },{name:pwd,value:pwd}]  
//jqForm:   jQuery物件，封裝了表單的元素     
//options:  options物件  
function showRequest(formData, jqForm, options){  
   var queryString = $.param(formData);   //name=1&address=2  
   var formElement = jqForm[0];              //將jqForm轉換為DOM物件  
   var address = formElement.address.value;  //訪問jqForm的DOM元素  
   return true;  //只要不返回false，表單都會提交,在這裡可以對錶單元素進行驗證  
};  
function showResponse(responseText, statusText){  
   //dataType=xml  
   var name = $('name', responseXML).text();  
   var address = $('address', responseXML).text();  
   $("#xmlout").html(name + "  " + address);  
   //dataType=json  
   $("#jsonout").html(data.name + "  " + data.address);  
};  
$('#form1').ajaxSubmit(ajax_option);
 

3、實戰

html 部分

<!-- 表單中若無檔案上傳，可不寫enctype="multipart/form-data" -->
<form id="from1" name="from1" action="#" method="post" class="form-horizontal" enctype="multipart/form-data">
	 <button type="button" id="save" class="btn blue">儲存</button>
     <button type="button" id="cancel" class="btn">取消</button>
</form>
 

var ajax_option={
	url:"gfan_yyq!images_edit_save.action",
	success:function(data){
		var result = $.parseJSON(data);
			if (result.success) {
				var index = parent.layer.getFrameIndex();
				var parentWin = parent;
				parent.layer.msg(result.message, 1, 1, function(){
					parentWin.layer.close(index);
					parentWin.window.location.href=parentWin.window.location.href;
				});
			} else {
				parent.layer.msg(result.message, 1, 3);
			}
		}
};
$('#save').click(function(){
	alert(123);
	$('#from1').ajaxSubmit(ajax_option);
});
$('#cancel').click(function(){
	var index = parent.layer.getFrameIndex();
	parent.layer.close(index);
});
 

ajaxForm不能提交表單。在document的ready函式中，使用ajaxForm來為AJAX提交表單進行準備。提交動作必須由submit開始 

ajaxSubmit 馬上由AJAX來提交表單。你可以在任何情況下進行該項提交。