【js】Ajax提交form表单（ajaxSubmit使用讲解 ）

1 、引入依赖脚本

<script type="text/javascript" src="/js/jquery/jquery.form.js"></script>   //ajaxForm 依赖脚本

脚本下载地址  http://download.csdn.net/detail/yjqyyjw/9488464

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>

js  部分

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);
});

4、总结ajaxSubmit 和ajaxForm区别

ajaxForm不能提交表单。在document的ready函数中，使用ajaxForm来为AJAX提交表单进行准备。提交动作必须由submit开始 

ajaxSubmit 马上由AJAX来提交表单。你可以在任何情况下进行该项提交。