jQuery ajaxSubmit 自动重复提交表单问题解决

个人笔记使用

一、问题描述：当提交一次时一切看似正常，但是当提交第二次时，表单会进行两次提交，三次时会提交三次，以此类推。

二、 解决后的效果如下图：

三、准备工作：需要先引入jQuery.js 和 jQuery插件jQuery.form.js

1、ajaxSubmit 封装代码如下：

// triggerId 触发提交 ； event 鼠标事件中的那种触发方式  ； submitId 表单； url 请求地址； type 请求方式（get/post）；data 参数； success 请求成功 ；error 请求失败
function formSubmit(triggerId,event,submitId,url,type,data,Boo,success,error) {
    $(triggerId).on(event,function () {
        $(submitId).ajaxSubmit({
            url:url,
            type:type,
            data:data,
            async:Boo,
            dataType:'text',
            success:success,
            error:error
        });
        return false;
    })
}``

// 

2、使用并提交表单代码如下：

        formSubmit('#modifyAll',"click","#modifyData",'http://127.0.0.1:80/NursingHomes/php_api/patientsinformationchange.php','GET',{id:iptVal},false,
        function (res) {
            alert("修改成功")
            // 重置表单内容
            $('#modifyData')[0].reset();
            $('#searchId')[0].reset();
            // 删除指定元素的所有事件处理程序
            $("#modifyAll").unbind();
        },function (err) {
            console.log("增加信息err:"+err);
            
        })

• {id:iptVal} 这是我需要向后台传递的参数，如不需要传参数可以不填写，直接传一个空对象即可（ {} ）；
• 防止表单重复提交，使用jQuery事件中的unbind()方法，在每一次提交表单成功时都使用unbind()方法，将提交表单的事件处理程序给删除，实现阻止重复提交的效果
• unbind()方法详见：W3C：https://www.w3school.com.cn/jquery/event_unbind.asp