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

个人笔记使用
- 一、问题描述：当提交一次时一切看似正常，但是当提交第二次时，表单会进行两次提交，三次时会提交三次，以此类推。
- 二、解决后的效果如下图：
- 三、准备工作：需要先引入jQuery.js 和 jQuery插件jQuery.form.js
- - 1、ajaxSubmit 封装代码如下：
  - 2、使用并提交表单代码如下：

个人笔记使用

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

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

三、准备工作：需要先引入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

jQuery ajaxSubmit 自动重复提交表单问题解决相关推荐

【重复提交表单】表单重复提交的三种情况，解决办法
引入看一个重复提交表单的例子 F12可以看到,请求体中的参数在刷新页面之后仍然保留,因此每一次刷新页面,都会把现有的请求体中的表单数据提交一次到服务器,而接收的页面还是insert.jsp,于是造成 ...
jquery 上传图片 java_jquery 异步提交表单上传图片小例子
这次做ecshop项目用到了一些小东西,这里我就把在项目中用到的一个异步上传多个产品图片的小东西,不是多好,但是是我自己查资料搞出来的.放这里,给自己和大家一个参考,欢迎丢砖!(jquery+spri ...
JavaWeb -- Struts1 使用示例：表单校验防表单重复提交表单数据封装到实体
1. struts 工作流程图超链接 2. 入门案例 struts入门案例:1.写一个注册页面,把请求交给 struts处理<form action="${pageContext.r ...
一款基于jquery ui的动画提交表单
今天要给大家分享一款基于jquery ui的动画提交表单.这款提交表单的的效果是以动画的形式依次列表所需填写的信息.效果非常不错,效果图如下: 在线预览源码下载实现的代码. html代码: & ...
php js 防止重复提交表单,php如何防止form重复提交
php如何防止form重复提交引入cookie机制来解决(推荐学习:PHP编程从入门到精通) 用户提交表单到后端,在 Cookie 中做标记,指定时间内重复提交无效.但是用户禁用 Cookie 这个 ...
php ajax 重复提交,ThinkPHP防止重复提交表单的方法实例分析
本文实例总结分析了ThinkPHP防止重复提交表单的方法.分享给大家供大家参考,具体如下: 为什么会有表单重复的坑在开发中,如果一个新增或修改的表单,在后台完成数据库操作后我们设定的不是跳转到其他页 ...
php防止订单重复计算,php防止用户重复提交表单
我们提交表单的时候,不能忽视的一个限制是防止用户重复提交表单,因为有可能用户连续点击了提交按钮或者是攻击者恶意提交数据,那么我们在提交数据后的处理如修改或添加数据到数据库时就会惹上麻烦. 效果图: 那 ...
java mvc中重复提交表单,spring mvc 防止重复提交表单的两种方法，推荐第二种
第一种方法:判断session中保存的token 比较麻烦,每次在提交表单时都必须传入上次的token.而且当一个页面使用ajax时,多个表单提交就会有问题. 注解Token代码: package c ...
jquery 通过submit()方法提交表单示例
jquery 通过submit()方法提交表单示例: 本示例:以用户注册作为例子.使用jquery中的submit()方法实现表单提交. 注:本示例仅提供了对表单的验证,本例只用选用了三个字段作为测 ...
如何防止用户重复提交表单
我们提交表单的时候,不能忽视的一个限制是防止用户重复提交表单,因为有可能用户连续点击了提交按钮或者是攻击者恶意提交数据,那么我们在提交数据后的处理如修改或添加数据到数据库时就会惹上麻烦. 那么如何规避 ...

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

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

个人笔记使用

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

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

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

1、ajaxSubmit 封装代码如下：

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

jQuery ajaxSubmit 自动重复提交表单问题解决相关推荐

最新文章

热门文章

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

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

个人笔记使用

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

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

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

1、ajaxSubmit 封装代码如下：

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

jQuery ajaxSubmit 自动重复提交表单问题解决相关推荐

最新文章

热门文章

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