jquery防止重复提交表单

重复触发就是防止用户重复点击提交数据了，我们一般都是点击之后没反应会再次点击了，这个不但要从用户体验上来做好，还在要js或java程序脚本上做好，让用户知道点击是己提交服务器正在处理，下面我就整理从脚本上来处理此重复触发的问题。

很多时候事件会被快速重复触发，比如 click，这样就会执行两次代码，造成很多后果。比如说添加表单时，连续多次点击会出现一下添加多个数据的情况。现在有比较多的解决方法，但几乎都有局限性，比如一个 Ajax 表单，如果防止用户一次点好多下可以在第一次点击的时候冻结提交按钮，直到允许再次点击的时候再放开。很多人都这样干，但在其他的情况就不是很有效了。

下面推荐一个不错的方法，首先丢一个函数进去。

var _timer = {};
function delay_till_last(id, fn, wait) {if (_timer[id]) {window.clearTimeout(_timer[id]);delete _timer[id];}return _timer[id] = window.setTimeout(function() {fn();delete _timer[id];}, wait);
}

使用方法：

$dom.on('click', function() {delay_till_last('id', function() {//注意 id 是唯一的//响应事件}, 300);
});

上面的代码可以让点击之后等待 300 毫秒，如果在 300 毫秒内又发生了这个事件则废除上一次点击，重新计时，反复如此，直到完全等待了 300 毫秒再响应事件。

 var _timer = {};
function delay_till_last(id, fn, wait) {if (_timer[id]) {window.clearTimeout(_timer[id]);delete _timer[id];}return _timer[id] = window.setTimeout(function() {fn();delete _timer[id];}, wait);
}function submitfrm(){delay_till_last('id', function() {//注意 id 是唯一的//响应事件submitform();}, 300);}function submitform(){$('#editfm').form('submit',{method:'post',url:'<%=path%>/BaseCostFieldController/insertBaseCostField.do',success: function(val){var data = eval('('+val+')');$('#editdg').dialog('close');if(data.result){$.messager.alert('消息',data.message);$('#dg').datagrid('reload');}else{$.messager.alert('警告',data.message);}}});}

jquery防止重复提交表单相关推荐

jquery submit()不能提交表单的解决方法
jquery submit()不能提交表单的解决方法参考文章: (1)jquery submit()不能提交表单的解决方法 (2)https://www.cnblogs.com/war-hzl/p/ ...
【重复提交表单】表单重复提交的三种情况，解决办法
引入看一个重复提交表单的例子 F12可以看到,请求体中的参数在刷新页面之后仍然保留,因此每一次刷新页面,都会把现有的请求体中的表单数据提交一次到服务器,而接收的页面还是insert.jsp,于是造成 ...
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 ...
如何防止用户重复提交表单
我们提交表单的时候,不能忽视的一个限制是防止用户重复提交表单,因为有可能用户连续点击了提交按钮或者是攻击者恶意提交数据,那么我们在提交数据后的处理如修改或添加数据到数据库时就会惹上麻烦. 那么如何规避 ...
html ajax提交表单实例,jQuery使用$.ajax提交表单完整实例
本文实例讲述了jQuery使用$.ajax提交表单的方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: /p> "http://www.w3.org/TR/x ...
jQuery的ajax提交表单
jQuery的ajax提交表单 1.表单 <form id="ff" method="post"><div class="input ...

jquery防止重复提交表单

jquery防止重复提交表单相关推荐

最新文章

热门文章