Question

当用户按以下方式点击搜索按钮时，我发送了一个ajax请求：

$('#search').on('click',function(){
                    $('#searchResponse').hide();
                    $('#searchResponse').html('<img src="assets/img/loading.gif">');
                    $('#searchResponse').show();
                    $.ajax({type:'POST',url:'assets/php/handler.php',data:$('#form').serialize(),success:function(response){
                        $('#searchResponse').html(response);
                    }});
                    return false;
                });

一切正常，但我希望在上述情况发生后有类似自动更新的内容。这意味着我必须在请求完成后设置类似超时的内容，以便再次触发ajax。我尝试过以下但不幸的是没有成功：

$('#search').on('click',function(){
                    $('#searchResponse').hide();
                    $('#searchResponse').html('<img src="assets/img/loading.gif">');
                    $('#searchResponse').show();
                    $.ajax({type:'POST',url:'assets/php/handler.php',data:$('#form').serialize(),success:function(response){
                        $('#searchResponse').html(response);
                    },complete:function(){
                        setTimeout(this, 5000);
                    }});
                    return false;
                });

我猜选择器不对，但我应该使用哪种替代方案来满足我的需求？任何指导帮助都受到欢迎。

Answer 1

您没有为setTimeout电话提供合适的方法。 this是ajax上下文。由于您希望在5秒后再次呼叫相同的上传，请尝试这样：

$('#search').on('click', function () {
    $('#searchResponse').hide();
    $('#searchResponse').html('<img src="assets/img/loading.gif">');
    $('#searchResponse').show();
    var doAjax = function () {
        // return the ajax promise
        return $.ajax({
            type: 'POST',
            url: 'assets/php/handler.php',
            data: $('#form').serialize(),
            success: function (response) {
                $('#searchResponse').html(response);
            }
        });
    });
    // Call once then again on success
    doAjax().done(function(){setTimeout(doAjax, 5000);});
    return false;
});

注意：jQuery.Ajax会返回deferred promise，您可以将其用于将功能链接在一起。虽然承诺最初比回调更令人困惑，但它们更强大，值得学习。在您尝试编写代码后，将更改编写代码的方式：）

附带问题：

正如@Peter Herdenborg指出的那样，隐藏和显示响应的这三行并非都是必需的。原因是它们都发生在相同的渲染周期中，所以你不会看到视觉闪光。

e.g。这样：

    $('#searchResponse').html('<img src="assets/img/loading.gif">');

也会这样做：

    $('#searchResponse').hide();
    $('#searchResponse').html('<img src="assets/img/loading.gif">');
    $('#searchResponse').show();

Answer 2

您需要将ajax位提取到一个函数，该函数可以使用延迟调用自身，也可以使用setInterval（）简单调用。在更改内容之前，我也没有看到隐藏#searchResponse的重点，所以我已删除了相关内容.show()。

$('#search').on('click',function(){
  $('#searchResponse').html('<img src="assets/img/loading.gif">');
  loadResults();
  setInterval(loadResults, 5000);
  return false;
});

function loadResults(){
  $.ajax({
    type:'POST',
    url:'assets/php/handler.php', 
    data: $('#form').serialize(),
    success: function(response){
      $('#searchResponse').html(response);
    }
  });
}

在点击事件后以给定间隔发送ajax请求

2 个答案: