jquery 解决多次提交

web应用中常见的问题就是多次提交，由于表单提交的延迟，有时几秒或者更长，让用户有机会多次点击提交按钮，从而导致服务器端代码的种种麻烦。

为了解决这个问题，我们可以绑定处理程序到表单的提交事件上，在提交按钮第一次点击之后禁止提交按钮。

 

$("form").submit(function(){
$(":submit",this).attr("disabled","disabled");
});

 

在事件处理程序体内，用：submit选择器来获取表单内所有的提交按钮，并将disable特性值改为disabled（w3c官方推荐的特性设置）。请注意，建立匹配集的时候我们提供this的上下文值，this指针总是引用已绑定事件的页面元素。

以这种方式禁止提交按钮，不会免除服务器代码的责任-----预防双重提交或者其它类型的验证问题。添加这种代码到客户端能够提高终端用户的界面友好程度，但是它防止不了攻击或者其他黑客企图，所以我们的服务器端代码应该始终保持警惕

评论

13 楼 zhxsup 2010-09-17  

onClick事件可以用此避奂吗？

12 楼 xieshaohu 2010-09-09  

防止F5刷新的话，提交成功了之后redirect

11 楼 fly_sail 2010-09-06  

code_k 写道

我也很想知道，如果用户f5刷新造成重复提交，有什么好的解决办法没有

刷新问题，也只能服务器端了吧。

我们的笨方法，在中间加了一个空页面，就负责redirect。

10 楼 binlaniua 2009-12-28  

那个this就是一个scope

而前面那个':submit'就是在这个scope下找到type="submit"的元素

9 楼 waiting 2009-12-27  

illu 写道

=.=
$(":submit",this). 第一次看到这种用法。。
我火星了

那个this代表上下文，实际效果是让jquery只在this（例子中就是当前表单）范围内选择 :submit 。

8 楼 wgl7385 2009-12-24  

对jquery不熟悉,放上一个列子呗

7 楼 zdyujia 2009-12-23  

头像上这小女孩谁啊？这么可爱~~

6 楼 andrewYe 2009-12-23  

<p>我认为的确是这样的，页面只是辅助的，最终还是要靠后台代码来防止</p>

5 楼 kuchaguangjie 2009-12-23  

防止刷新，redirect

4 楼 firewood 2009-12-23  

要靠谱的话，还是要走了服务器端吧。

3 楼 code_k 2009-12-23  

我也很想知道，如果用户f5刷新造成重复提交，有什么好的解决办法没有

2 楼 monlyu 2009-12-23  

不点提交，强制刷新页面咋个办呐？

1 楼 illu 2009-12-23  

=.=
$(":submit",this). 第一次看到这种用法。。
我火星了