AjaxSubmit 和AjaxForm区别
AjaxForm
ajaxForm()不能提交表单。在document的ready函数中,使用ajaxForm来为AJAX提交表单进行准备。提交动作必须由submit开始 ,
ajaxForm()适用于以表单提交方式处理ajax技术(需要提供表单的action、id、 method,最好在表单中提供submit按钮) 如:
和submit按钮:
ajaxSubmit
ajaxSubmit()马上由AJAX来提交表单。你可以在任何情况下进行该项提交。
ajaxSubmit()适用于以事件的机制以ajax提交form表单(超链接、图片的click事件),该方法作用与ajaxForm()类似,但它更为灵活,因为他依赖于事件机制,只要有事件存在就能使用该方法。你只需指定该form的action属性即可,不需要提供submit按钮。
<!--HTML-->
<form id="form1" name="form1">
<input id="userName" name="userName" value="姓名" />
<input id="age" name="age" value="30" />
<input type="submit" value="submit" />
</form>
<input id="myButton" type="button" value="提交" />
<!--javascript-->
<script type="text/javascript">
var myData = {
"CnName": "周佳良",
"EnName":"zhoujl"
};
$(function () {
var ajaxFormOption = {
type: "post", //提交方式
dataType: "json", //数据类型
data: myData,//自定义数据参数,视情况添加
url: "TestHandler.ashx?type=ajaxForm", //请求url
success: function (data) { //提交成功的回调函数
document.write("success");
}
};
//form中有submit按钮——方式1
$("#form1").ajaxForm(ajaxFormOption);
//form中有submit按钮——方式2
$("#form1").submit(function () {
$(this).ajaxSubmit(ajaxFormOption);
return false;
});
//不需要submit按钮,可以是任何元素的click事件
$("#myButton").click(function () {
$("#form1").ajaxSubmit(ajaxFormOption);
return false;
});
});
</script>
另外其他属性/方法:
target 返回的结果将放到这个target下 url 如果定义了,将覆盖原form的action type get和post两种方式 dataType 返回的数据类型,可选:json、xml、script clearForm true,表示成功提交后清除所有表单字段值 resetForm true,表示成功提交后重置所有字段 iframe 如果设置,表示将使用iframe方式提交表单 beforeSerialize 数据序列化前:function($form,options){} beforeSubmit 提交前:function(arr,$from,options){} success 提交成功后:function(data,statusText){} error 错误:function(data){alert(data.message);}