如何在 Ajax 调用中临时禁用按钮？答案

【问题标题】：How to temporarily disable a button within an Ajax call?如何在 Ajax 调用中临时禁用按钮？
【发布时间】：2019-11-13 00:31:39
【问题描述】：

在我的 Javascript 代码中，我编写了一个 Ajax 调用，其中几个 for loop 循环调用两个 JSON 文件；当某些事件发生并单击Search 按钮时会调用某些函数：显示包含来自 API 请求的数据的表格。

我想在 Ajax 调用中查找这些数据时暂时禁用 Search 按钮，然后在执行操作后再次启用它，其方式类似于 setTimeout() 方法中发生的情况，但不必设置毫秒数（我之前无法指定毫秒数，具体取决于互联网连接的速度和其他因素......）。

如何在回调函数中临时设置.prop("disabled", false);？换句话说，如何在 Ajax 调用中临时禁用按钮？

【问题讨论】：

在进行 AJAX 调用之前禁用它，然后在成功回调中再次启用它……

标签： javascript ajax disabled-control prop

【解决方案1】：

您可以为此使用beforeSend 和complete，

$.ajax({
    type: 'POST',
    url: url,
    data: data,
    beforeSend: function() {
        // disable your button here
        .prop("disabled", true);
    },
    success: function(data) {
        //success
    },
    error: function(xhr) { // if error occured
    },
    complete: function() {
        // enable your button here
        .prop("disabled", false);
    }
});

【讨论】：

谢谢，它有效。我可以省略 'beforeSend' 和 'complete' 函数，只写 '$('#IDofTheButton).prop("disabled", true)' 和 '$('#IDofTheButton).prop("disabled", false)' ?
是的，您可以省略。在这种情况下，您需要在 ajax 调用之前禁用该按钮，并且可以在成功功能中启用该按钮。
感谢 @ravibagul91 我添加了 '.prop("disabled", true);'在成功回调函数和 '.prop("disabled", false);'在ajax调用之外，是否正确？ drive.google.com/file/d/12CZQ2fL1cGHnJISfmq3vcCPKvy6iQPju/…

【解决方案2】：

将对象实例注入事件处理程序。

在此处查看可能的事件处理程序：https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress

那里不是Console.log，而是我们的object.prop("disabled",false")

【讨论】：

【解决方案3】：

使用 JavaScript Fetch API

<!DOCTYPE html>
<html>

<body>

  <div>
    <button type="button" id="btn1" onclick="loadData()">Change Content</button>
    <div id="response">
    </div>
  </div>

  <script>
    function loadData() {

      document.getElementById("btn1").disabled = true;

      fetch("https://jsonplaceholder.typicode.com/todos/1")
        .then((resp) => resp.text()) // Transform the response into text
        .then((data) => {
          document.getElementById("response").innerHTML =
            data;
          document.getElementById("btn1").disabled = false;
        });

    }
  </script>

</body>

</html>

使用普通的旧 javascript

<!DOCTYPE html>
<html>

<body>

  <div>
    <button type="button" id="btn1" onclick="loadData()">Change Content</button>
    <div id="response">
    </div>
  </div>

  <script>
    function loadData() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.status == 200) {
          document.getElementById("response").innerHTML =
            this.responseText;
        }
        document.getElementById("btn1").disabled = false;
      };

      xhttp.open("GET", "https://jsonplaceholder.typicode.com/todos/1", true);
      xhttp.send();
      document.getElementById("btn1").disabled = true;
      document.getElementById("response").innerHTML = '';
    }
  </script>

</body>

</html>

【讨论】：