Question

我使用以下代码来获取相关搜索结果：

<form>
<input id="message" type="text" name="search" value=""/>  
</form>

<div id="searchresults" class="contentbox"></div> 
<div id="noresult" class="contentbox" style="display:none">no results found.</div>


function getticketsuggestions() { 
    currentcheckcontent = $("#message").val();
    if (currentcheckcontent) {
        $.post("submitticket.php", { action: "getkbarticles", text: currentcheckcontent },
        function(data){                                      
            if (data) {               
                $("#searchresults").html(data);                
                $('#noresult').hide();
                $("#searchresults").fadeIn('slow');
            }
            else {
            $('#noresult').fadeIn(3000); 
            $("#searchresults").hide();
            }
        });
        lastcheckcontent = currentcheckcontent;
    } 
        setTimeout('getticketsuggestions();', 3000);                
}
getticketsuggestions();

此代码非常完美。我在<div id="searchresults">

中获得了所有搜索结果

我想在从submitticket.php获取结果时添加 Preloader“loading ...”

我怎样才能做到这一点？

感谢

Answer 1

您可以使用.ajaxStart() + .ajaxStop()个处理程序，这些处理程序将针对您要发送的所有ajax请求全局触发。因此，您可以在此显示和隐藏一些DIV或其他内容。

您的第二个选项是使用底层.ajax()来电代替$.post()。在这里可以覆盖beforeSend和complete处理程序来做同样的事情，显示＆amp;隐藏一些信息。

示例：

$.ajax({
   url:   "submitticket.php",
   data: {
      action: "getkbarticles",
      text: currentcheckcontent
   },
   type: 'POST',
   dataType: 'html',
   beforeSend: function(xhr){
       $('#info').show();  // #info must be defined somehwere
   },
   success: function(data){
       if (data) {               
            $("#searchresults").html(data);                
            $('#noresult').hide();
            $("#searchresults").fadeIn('slow');
        }
   },
   complete: function(xhr, textStatus){
        $('#info').hide();  // #info must be defined somehwere
   }
});

参考：.ajaxStart，.ajaxStop，.ajax

Answer 2

如果您因某些原因不想使用.ajax（），可以使用您的代码执行此操作：

$('#someDiv').html('loading...');    
$.post("submitticket.php", { action: "getkbarticles", text: currentcheckcontent },
    function(data){                                      
        if (data) {               
            $("#searchresults").html(data);                
            $('#noresult').hide();
            $("#searchresults").fadeIn('slow');

        }
        else {
        $('#noresult').fadeIn(3000); 
        $("#searchresults").hide();
        }
    $('#someDiv').html('');
    });

将预加载器添加到此JQuery.post（）脚本中

2 个答案: