Как временно отключить кнопку в вызове Ajax? - PullRequest
Новая
       45

Как временно отключить кнопку в вызове Ajax?

0 голосов
/ 02 июля 2019

В своем коде Javascript я написал Ajax-вызов, в котором пара for loop циклов вызывает два файла JSON; некоторые функции вызываются при возникновении некоторых событий и нажатии кнопки Search: отображаются таблицы, содержащие данные из запросов API.

Я хочу временно отключить кнопку Search, когда эти данные ищутся в вызовах Ajax, а затем снова включить ее после выполнения операции, аналогично тому, что происходит в методе setTimeout(), но без необходимости установки количества миллисекунд (я не могу указать его ранее, поскольку количество миллисекунд зависит от медленности интернет-соединения и других факторов ...).

Как временно установить .prop("disabled", false); в функции обратного вызова? Другими словами, как временно отключить кнопку в вызове Ajax?

Ответы [ 3 ]

2 голосов
/ 02 июля 2019

Для этого вы можете использовать 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);
    }
});
0 голосов
/ 02 июля 2019

с использованием 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>
0 голосов
/ 02 июля 2019

вставляет экземпляр объекта в обработчики событий.

Извлекайте возможные обработчики событий здесь: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress

вместо Console.log вызовите наш object.prop("disabled",false") там

...