jQuery —— ajaxForm和ajaxSubmit的用法与区别

ajaxSubmit 这个可以理解为ajaxForm了升级版。那么，为什么ajaxSubmit会自动提交表单呢？

ajaxForm 不能主动提交form 就是为提交表单前做准备；
ajaxSubmit 会自动提交 form表单只要调用ajaxSubmit这个方法就是提交表单。
两者配置相同不加action 属性，那么就会执行配置中得url ；
没有配置url，就会走action属性，两者选其一即可。

ajaxForm和ajaxSubmit都可以接收0或1个参数，该参数可以是一个变量、一个对象或回调函数，这个对象主要有以下参数：

javascript 复制代码

var option= {
             url:url,　　　　　　//form提交数据的地址
　　　　　　  type:type,　　　  //form提交的方式(method:post/get)
　　　　　　  target:target,　　//服务器返回的响应数据显示的元素(Id)号
             beforeSerialize:function(){} //序列化提交数据之前的回调函数
　　　　　　  beforeSubmit:function(){},　　//提交前执行的回调函数
　　　　　　  success:function(){},　　　　   //提交成功后执行的回调函数
             error:function(){},             //提交失败执行的函数
　　　　　　  dataType:null,　　　　　　　//服务器返回数据类型
　　　　　　  clearForm:true,　　　　　　 //提交成功后是否清空表单中的字段值
　　　　　　  restForm:true,　　　　　　  //提交成功后是否重置表单中的字段值，即恢复到页面加载时的状态
　　　　　　  timeout:6000 　　　　　   //设置请求时间，超过该时间后，自动退出请求，单位(毫秒)。　　

            }

html代码：

html 复制代码

<form action="" class="myForm" method="post">
<div>姓名：<input name="text1" type="text" class="inputbox"></div>
<div>年龄：<input name="text2" type="text" class="inputbox"></div>
<div>爱好：<input name="text3" type="text" class="inputbox"></div>
<div><input class="submitbtn" type="submit" value="提交"></div>
</form>

JS代码：

ajaxForm 方式

javascript 复制代码

$(function(){
    $form.ajaxForm(option)；
})

ajaxSubmit方式

javascript 复制代码

$(function(){
    $('.submitbtn').click(function(){
     $(form).ajaxSubmit(option)；
    })           
})

参数也可以为一个回调函数

javascript 复制代码

$(function(){
    $('.submitbtn').click(function(){
        $(form).ajaxSubmit(function(data){
            alert(data);
        })
    })
})

二、再说这两种方法的区别

这两种方法主要的却别是ajaxForm不能主动提交form，函数只是为提交表单做准备需要以submit来触发提交。而ajaxSubmit会主动提交表单，同时可以在点击其他按钮时也可以触发提交，不一定是submit按钮。

javascript 复制代码

 $(form).ajaxForm({  
   
  });

👆👇两个方式等价

javascript 复制代码

$(".submitbtn").submit(function(){
    $(form).ajaxSubmit();
    return false          //想要阻止自动提交，必须return false；
})

总结

ajaxSubmit和ajaxForm的区别主要有：

提交方式：ajaxSubmit能够立即通过AJAX提交表单，适用于各种情况下的提交，且不需要提供submit按钮。而ajaxForm不会直接提交表单，需要加入特定的监听事件才能阻止表单的直接提交，并使用AJAX进行提交。
灵活性：ajaxSubmit更为灵活，依赖于事件机制，只要有事件存在就能使用该方法。只需要指定该form的action属性即可。而ajaxForm在document的ready函数中，使用ajaxForm来为AJAX提交表单进行准备。
阻止表单提交：如果想阻止表单自动提交，ajaxSubmit需要return false。而ajaxForm的扩展方式更为直接。

简单来说，ajaxSubmit更适合在各种情况下进行表单的提交，且更为灵活。而ajaxForm需要加入特定的监听事件才能阻止表单的直接提交，并使用AJAX进行提交。在使用时需要根据具体需求进行选择。