Как остановить и запустить ajax форму отправки снова при использовании onkeyup javascript?

Question

Я пытаюсь остановить предыдущий запрос AJAX при возникновении нового события keyup.Паттен выглядит так:

1. Пользователь вводит A, мой код отправит форму, используя AJAX с test_value из A.
2. Когда пользователь введет B Я хочу остановить запрос AJAX с первого шага и сделать новый запрос с test_value из AB.

<input type="text" id="xxx" onkeyup="test_fn(this.value)" autocomplete="off">
<div id="loading" style="display: none;">please wait.....</div>
<span id="myplace_test"></span>
<form id="test_fid" method="POST" action="" style="display: none;">
  <input type="text" name="test_value" id="test_value">
</form>

  function test_fn(val) {
    document.getElementById("loading").style.display = "block";
    document.getElementById("test_value").value = val;
    $.ajax({
      url: "test.php",
      type: "POST",
      data: $('#test_fid').serialize(),
      cache: false,
      success: function(data) {
        $('#myplace_test').html(data);
        document.getElementById("loading").style.display = "none";
      }
    });
  }

Answer 1

Чтобы достичь того, что вам нужно, вы можете сохранить ссылку на предыдущий запрос AJAX в переменной, а затем вызвать abort() для этого при возникновении нового события keyup.

Также обратите внимание, что вы не должны 'использовать on* атрибуты события.Поскольку вы включили jQuery на страницу, вы можете использовать его для прикрепления ненавязчивых обработчиков событий.Вы также можете использовать jQuery, чтобы выбрать свои элементы и работать с ними более кратко.Попробуйте это:

<input type="text" id="xxx" autocomplete="off">
<div id="loading">please wait.....</div>
<span id="myplace_test"></span>
<form id="test_fid" method="POST" action="">
  <input type="text" name="test_value" id="test_value">
</form>

var activeRequest;

$('#xxx').on('keyup', function(e) {
  $("l#oading").show()
  $("#test_value").val(this.value);
  activeRequest && activeRequest.abort();

  activeRequest = $.ajax({
    url: "test.php",
    type: "POST",
    data: $('#test_fid').serialize(),
    cache: false,
    success: function(data) {
      $('#myplace_test').html(data);
      $("#loading").hide();
    }
  });
});

#loading,
#test_fid { 
  display: none; 
}

Также обратите внимание на использование CSS для хранения правил стиля вместо размещения их в HTML-коде.