停止之前不显眼的 ajax 通话

Question

我有这样的表格：

@using (Ajax.BeginForm("List", null, new AjaxOptions() { UpdateTargetId = "results" }, new { id = "myform" }))
{
     <input id="search" type="text" value="" />
}

我声明 javascript 当用户在我的搜索框中按下某个键时发送提交：

<script type="text/javascript">
    $("#search").on("keyup", function ()
    {
        $("#myform").submit();
    });
</script>

但是当用户快速搜索时，浏览器会启动多个ajax请求，并等待每个调用结束。如何在不删除 ajax unobtrusive 的情况下发送另一个之前停止前一个 ajax 调用？

Answer 1

我建议不要直接调用 $("#myform").submit(); 将其分解为一个 $.ajax() 请求并在创建另一个请求之前中止

$("#search").on("keyup", function (){
    var xhr;

  if (xhr){ 
           xhr.abort();  //stop previous ajax          
    }

     xhr = $.ajax({
               type: "GET",
                url: "@Url.Action(list)",
              data : {formdata : $("#myform").serialize() },
            success: function(response){
                  // do some stuffs with $("#results")
             }
      });                  

});

停止之前不显眼的 ajax 通话

Stop previous unobtrusive ajax call

c#

asp.net-mvc

jquery

ajax.beginform

unobtrusive-ajax