停止Ajax请求并调用新的Ajax

时间:2014-07-01 11:32:35

标签: javascript jquery ajax

在这段代码中,我从用户输入字符并在数据库中搜索它,但是当用户输入每个字符时,使用之前的ajax运行新的ajax请求,

我想要在呼叫搜索功能时,取消之前的ajax请求并运行新的ajax请求;

html代码:

<input type="text" onkeyup="search()">

js code:

    function search () {


    var request=$.ajax({
        type: "POST",
        url: "php/h.php",
        data: {k_word:k_word},
        dataType: "json",
        success: function (data) {    

          ghtml(data)       

      }
  })


 }

我也试过像这样的abrot():

var request;

 function search () {

    request.abort();


     request=$.ajax({
        type: "POST",
        url: "php/h.php",
        data: {k_word:k_word},
        dataType: "json",
        success: function (data) {    

          ghtml(data)       

      }
  })


 }

但没有工作

1 个答案:

答案 0 :(得分:3)

通常不是这样做的,而是使用限制来仅在用户停止输入给定时间时调用ajax函数

首先,摆脱内联javascript

 <input type="text" id="myInput" />

然后使用事件处理程序

$('#myInput').on('keyup', function() {

    clearTimeout( $(this).data('timer') );

    $(this).data('timer', 
        setTimeout(function() {
            $.ajax({
                type     : "POST",
                url      : "php/h.php",
                data     : {k_word:k_word},
                dataType : "json",
                success  : function (data) {    

                    ghtml(data)       

                }
            });
        }, 500)
    );
});

这会在ajax调用上设置超时,如果在半秒内按下新键,则会清除超时,因此仅当用户停止输入超过500毫秒时才会调用ajax