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进行提交。在使用时需要根据具体需求进行选择。

相关推荐
一斤代码5 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子5 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年5 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_7 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说7 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409197 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding7 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js