如何在Ajax请求执行过程中触发alert等指定代码？

你遇到的问题核心是代码执行时机的错误：那段if(clicked)的判断是在页面加载完成（$(document).ready）后立刻执行的，这时候按钮还没被点击，clicked自然是false。等你点击按钮把clicked设为true时，这个判断早就跑完了，所以alert永远不会触发。

要在Ajax请求处理过程中触发alert，其实很简单，只要把alert代码放到正确的执行时机里就行，下面给你两种常见的实现方式：

方式一：点击按钮后立刻触发（Ajax请求启动时） #

直接把alert放到按钮点击事件的回调函数里，放在Ajax调用的前后都可以——因为Ajax是异步的，这行代码会在请求发送的同时执行，正好符合你“请求处理过程中”的需求：

<html> 
<body> 
<button type="button" id="submit-catalog" class="btn btn-primary">Activate</button> 
</body> 
</html> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 
  $(document).on('click', '#submit-catalog', function() {
    // 点击后立刻触发alert，此时Ajax请求开始处理
    alert("button clicked");
    // 执行耗时的Ajax调用
    $.ajax({
      url: '你的请求地址',
      // 其他Ajax配置项（比如method、data等）
    });
  });
}); 
</script>

方式二：在Ajax请求的特定阶段触发 #

如果你想在Ajax请求的某个具体阶段（比如请求即将发送、正在处理中）触发alert，可以利用jQuery Ajax的回调钩子：

<html> 
<body> 
<button type="button" id="submit-catalog" class="btn btn-primary">Activate</button> 
</body> 
</html> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 
  $(document).on('click', '#submit-catalog', function() {
    $.ajax({
      url: '你的请求地址',
      beforeSend: function() {
        // 请求即将发送时触发alert，属于请求处理过程中
        alert("button clicked - 请求即将发送");
      },
      complete: function() {
        // 请求完成（成功或失败）时触发（可选，按需调整）
        alert("请求处理结束");
      }
      // 还可以添加success、error等回调处理不同场景
    });
  });
}); 
</script>

再聊下原代码的问题 #

$(document).ready里的代码是页面初始化阶段执行的，那个if(clicked)只会在页面刚加载好的时候判断一次，之后哪怕clicked的值因为用户点击变成了true，也不会再重新执行这个判断逻辑。而按钮点击事件是后续用户交互才触发的，这时候初始化阶段的代码早就执行完了，自然不会触发alert。

内容的提问来源于stack exchange，提问作者nirmesh