JQuery中阻止按钮连续提交ajax请求

如果我没不加代码限制,一个按钮被连续点按,可以一直触发心的ajax请求,显然这不是我们想要的效果。我们希望的是,这一次点击按钮出发一次ajax后,等这次ajax的回调函数执行完成后,才允许用户进行二次点击并触发ajax请求。

针对上述的请求,我们有下面的几种方式:

  1. 在触发ajax请求后,回调函数执行完成前,我们禁用这个点击按钮,那用户在这段时间内就没办法使用这颗按钮,在回调函数执行后,恢复该按钮。

  2. 在触发ajax请求后,回调函数执行完成前,我们将js函数中的flag置为0,这样子让用户再次点击按钮时,无法触发$.ajax,等到回调函数执行成功,我们将flag重新置为1,这样子$.ajax 就又可以执行了。
    代码如下所示:

<script type="text/javascript">
  $(function(){ 
    var flag=1; 
    function ajaxTest(){ 
      if(flag){ 
        $.ajax({ 
          url: "test.php", 
          type: "POST", 
          data: 456, 
          dataType: 'json', 
          beforeSend: function(){ 
              flag=0 }, 
          success: function (result) { 
            if(result) { 
              console.log(result); 
            } 
            flag = 1; 
          } 
        }); 
      } 
    } 

    $('#btn').bind('click', function() { 
      ajaxTest(); 
    });
  });
</script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,854评论 2 17
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,202评论 0 1
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,379评论 0 2
  • 第1章 jQuery实现Ajax应用 1-1 使用load()方法异步请求数据 使用load()方法通过Ajax请...
    mo默22阅读 1,742评论 1 9
  • 每日箴言: 每个人都有选择的权利,你不选择我,说明你选择了比我更重要的东西。[http://requirejs.o...
    全栈弄潮儿阅读 2,980评论 2 85