javascript - 使用onkeyup javascript时如何再次停止和启动ajax提交表单？

Question

我试图在新keyup事件触发时停止先前的 AJAX 请求。模式是这样的：

1. 用户输入，我的A代码将使用 AJAX 提交表单test_value。A
2. 当用户进入时B，我想从第一步停止 AJAX 请求并使用test_valueof发出新请求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";
      }
    });
  }

标签： javascriptjqueryhtmlajax

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 中。