防止用户重复提交和快速点击按钮

最新推荐文章于 2024-03-22 20:05:19 发布

lao_pei

最新推荐文章于 2024-03-22 20:05:19 发布

阅读量1.2k

点赞数 2

分类专栏： java

本文链接：https://blog.csdn.net/lao_pei/article/details/102581641

版权

java 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

一）现象

在web开发过程中，用户快速连续点击按钮后，会向后台发送大量的请求。

如果使用ajax异步提交，浏览器就会报错"错误的文件头"，用户体验不好。

二）解决思路

在用户点击按钮或者按下回车后，给增加一个遮罩DIV，防止用户再次点击，遮罩DIV会在若干毫秒后自动remove，

从而达到了防止用户在前台重复提交。

三）代码

<!DOCTYPE html>
<html>
<head>
<script>
function mask(btnId){
   var maskdiv = '<div id="my_only_one_mask_div" hidefocus="true" tabindex = "0" class="only_one_mask_div" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background: #000; opacity: 0.5; filter: alpha(opacity=0);z-index:5001;outline=0;"></div>';
   $("body").append(maskdiv);
   //如果是回车进入的,将focus移动到遮罩div上,之后如果按钮有id，去掉遮罩后按钮重新获得focus
   if (btnId){
   $("#my_only_one_mask_div").focus();
   }
   //5000毫秒后去掉遮罩div
   setTimeout(function(){
       $(".only_one_mask_div").remove();
       if (btnId){
       $("#"+btnId).focus();
       }
   }
   ,2000);
}
function test0(){
   alert('000');
}
function test1(){
   alert('1111');
}
function load(){
$('.btn-primary').bind('keypress',function(event){
if(event.keyCode == 13)
{
alert('回车了');

               mask($(this).attr("id"));
}
});
       $('.btn-primary').bind('click',function(event){
alert('点击了');
               mask();
});
   };
window.onload = function(){
load();
}
</script>

lao_pei

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
防止用户重复提交和快速点击按钮

一）现象在web开发过程中，用户快速连续点击按钮后，会向后台发送大量的请求。如果使用ajax异步提交，浏览器就会报错"错误的文件头"，用户体验不好。二）解决思路在用户点击按钮或者按下回车后，给增加一个遮罩DIV，防止用户再次点击，遮罩DIV会在若干毫秒后自动remove，从而达到了防止用户在前台重复提交。...
复制链接

扫一扫