如何通过禁用按钮避免jQuery.ajax重复请求

使用jQuery.ajax请求数据时,为了避免用户重复请求,需要禁用请求提交按钮,一般来说比较简单,只需要在按钮中添加disabled属性即可,下面写了一个测试实例,谈谈具体实现禁用按钮方法。
实例代码如下:
一,包含文件部分,引用jQuery文件

  1. <script src=”http://code.jquery.com/jquery.js” type=”text/javascript”></script>

二,HTML部分

    <button id=”test”>测试</button>

     <div id=”result”></div>

定义一个测试按钮和一个结果显示DIV层

三,Javascript部分

 

<script type=”text/javascript”>
jQuery(document).ready(function(){
jQuery(“#test”).click(function(){
jQuery(this).attr({“disabled”:”disabled”});
biuuu._ajax();
});
});
var biuuu = {};
biuuu._ajax = function(){
jQuery.ajax({
url: “biuuu.html”,
success: function(html){
jQuery(“#result”).append(html);
}
});
jQuery(“#test”).removeAttr(“disabled”);
}
</script>

当点击测试按钮后,使用jQuery(this).attr({“disabled”:”disabled”})语句禁用测试按钮,实质是给测试按钮增加一个disabled属性,然后执行biuuu._ajax()请求,当请求完全后,使用jQuery(“#test”).removeAttr(“disabled”)语句去除禁用按钮属性,实现禁用按钮非常简单。

主要了解jQuery的attrremoveAttr两个函数,其实是元素disabled属性。

原文地址:https://www.cnblogs.com/guanjie20/p/2098393.html