javascript - 如何用JS有效防止用户重复点击提交按钮?
PHPz
PHPz 2017-04-10 17:44:26
0
10
404

因为服务器响应比较慢,用户提交表单后会等待一段时间,可能会造成用户以为没反应重复的点击提交按钮。onclick="this.disabled=true" 这个不能用,因为当表单有些字段不符合要求的话会弹出提示,表单没提交,但这时按钮已经变成不可用了。
请问有其它办法吗?

PHPz
PHPz

学习是最好的投资!

全部回覆(10)
左手右手慢动作

我是用ajax提交,当用户提交表单的时候把按钮设为disabled,请求http成功后,服务器给客户端响应信息时,再去掉disabled属性。由于你的服务器响应比较慢,最好在请求http的时候,加一个动态效果(比如:加载中...,等等),同样请求成功后隐藏动态效果,个人认为这样给用户的体验感比较好。当然用验证码也可以有效防止表单重复提交。但是看场咯。

刘奇

用过一个比较蠢得办法 js中添加一个变量 当点击的时候判断变量的值 点击后这个值变为false 然后直到返回结果或者提示出错 将这个值变成true 下次就可以继续点击了

巴扎黑
button.disabled = true;
$.ajax({...}).done(function () {
    buton.disabled = false;
});
伊谢尔伦

form上遮个p或者提交按钮disabled,验证失败或提交成功后重置状态

刘奇

在外部写一个 loading 层的方法,在点击的时候 触发这个方法的 evnet_getLoading 给按钮添加一个loading p,ajax后 在 commple 里面 触发一个 event_cancelLoading 的方法 把 loading p 移除。

迷茫
  1. 前端控制尝试所有验证通过才允许用户做提交处理,第一次提交后设为disable

  2. 后端做拦截处理,同一表单较短时间内提交的数据不予处理等等

PHPzhong

通过计算两次点击的间隔时间防止用户频繁点击

大家讲道理

AJAX获取表单令牌,重复提交的表单令牌会失效,剩下的就后台处理吧,没有表单令牌,或者令牌不对,直接pass

PHPzhong

用 cookie 保存上次的提交时间,把间隔时间内的提交过滤掉。

大家讲道理

看你是什么机制了,如果只让用户点击一次的话,在用户第一次点击之后对按钮进行一下处理就好了

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板