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

Question

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

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

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

Answer 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);
    }
});

Answer 2

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

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

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

Answer 3

使用 JavaScript 获取 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>

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

How to temporarily disable a button within an Ajax call?

javascript

ajax

disabled-control

prop