AJAX避免用户重复提交请求实现方案

前端技术 2023/09/05 AJAX
在使用AJAX(jQuery)异步请求数据时，为了避免因某些原因用户同时多次点击按钮，提交重复的请求，我们需要禁用请求提交按钮。

重点：jQuery的 attr 和 removeAttr 两个函数，主要是元素button的disabled属性。
Demo：
复制代码 代码如下:

<body>
<a class=\"disabled\">Button disabeld</a>    <a class=\"abled\">Button abled</a><br/><br/>
<input type=\"button\" id=\"submit\" name=\"submit\" value=\"submit\">
</body>
<script type=\"text/javascript\" src=\"../jquery-1.2.6.js\"></script>
<script type=\"text/javascript\">
$(function(){
//使其失效
$(\".disabled\").click(function(){
$(\"#submit\").attr(\"disabled\",\"disabled\");
$(\"#submit\").val(\'disabled...\');
});
//激活
$(\".abled\").click(function(){
$(\"#submit\").removeAttr(\"disabled\");
$(\"#submit\").val(\'submit\');
});
//操作请求
$(\"#submit\").click(function() {
$(\"#submit\").attr(\"disabled\", \"disabled\");
alert(\"hi\");//send ajax request
$(\"#submit\").removeAttr(\"disabled\");
});
});
</script>

说明：当点击\"Button disabeld\"后，使用 $( \"#submit\" ).attr(\"disabled\",\"disabled\") 语句禁用测试按钮，实质是给测试按钮增加一个disabled属性，然后点击\"Button abled\"或执行发送ajax()请求，当请求完全后，使用 $(\"#submit\").removeAttr(\"disabled\"); 语句去除禁用按钮属性，从而实现了禁用按钮，避免重复发送请求。

本文地址：https://www.stayed.cn/item/12757

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案