web应用中常见的问题就是多次提交,由于表单提交的延迟,有时几秒或者更长,让用户有机会多次点击提交按钮,从而导致服务器端代码的种种麻烦。
为了解决这个问题,我们可以绑定处理程序到表单的提交事件上,在提交按钮第一次点击之后禁止提交按钮。
?
$("form").submit(function(){
$(":submit",this).attr("disabled","disabled");
});
?
在事件处理程序体内,用:submit选择器来获取表单内所有的提交按钮,并将disable特性值改为disabled(w3c官方推荐的特性设置)。请注意,建立匹配集的时候我们提供this的上下文值,this指针总是引用已绑定事件的页面元素。
以这种方式禁止提交按钮,不会免除服务器代码的责任-----预防双重提交或者其它类型的验证问题。添加这种代码到客户端能够提高终端用户的界面友好程度,但是它防止不了攻击或者其他黑客企图,所以我们的服务器端代码应该始终保持警惕
1 楼
illu
2009-12-23
=.=
$(":submit",this). 第一次看到这种用法。。
我火星了
$(":submit",this). 第一次看到这种用法。。
我火星了
2 楼
monlyu
2009-12-23
不点提交,强制刷新页面咋个办呐?
3 楼
code_k
2009-12-23
我也很想知道,如果用户f5刷新造成重复提交,有什么好的解决办法没有
4 楼
firewood
2009-12-23
要靠谱的话,还是要走了服务器端吧。
5 楼
kuchaguangjie
2009-12-23
防止刷新,redirect
6 楼
andrewYe
2009-12-23
<p>我认为的确是这样的,页面只是辅助的,最终还是要靠后台代码来防止</p>
7 楼
zdyujia
2009-12-23
头像上这小女孩谁啊?这么可爱~~
8 楼
wgl7385
2009-12-24
对jquery不熟悉,放上一个列子呗
9 楼
waiting
2009-12-27
illu 写道
=.=
$(":submit",this). 第一次看到这种用法。。
我火星了
$(":submit",this). 第一次看到这种用法。。
我火星了
那个this代表上下文,实际效果是让jquery只在this(例子中就是当前表单)范围内选择 :submit 。
10 楼
binlaniua
2009-12-28
那个this就是一个scope
而前面那个':submit'就是在这个scope下找到type="submit"的元素
而前面那个':submit'就是在这个scope下找到type="submit"的元素
11 楼
fly_sail
2010-09-06
code_k 写道
我也很想知道,如果用户f5刷新造成重复提交,有什么好的解决办法没有
刷新问题,也只能服务器端了吧。
我们的笨方法,在中间加了一个空页面,就负责redirect。
12 楼
xieshaohu
2010-09-09
防止F5刷新的话,提交成功了之后redirect
13 楼
zhxsup
2010-09-17
onClick事件可以用此避奂吗?