AJAX加載消息

Question

我想通過AJAX檢索結果時顯示加載消息，但我不能。任何人都可以幫忙嗎？

<script type="text/javascript"> 

$(function() { 

    $(".search_button").click(function() { 
     // getting the value that user typed 
     var searchString = $("#search_box").val(); 
     // forming the queryString 
     var data   = 'search='+ searchString; 

     // if searchString is not empty 
     if(searchString) { 
      // ajax call 
      $.ajax({ 
       type: "POST", 
       url: "do_search.php", 
       data: data, 
       beforeSend: function(html) { // this happens before actual call 
        $("#results").html(''); 
        $("#search_result_box").show(); 
        $("#searchresults").show(); 
        $(".word").html(searchString); 
       }, 
       success: function(html){ // this happens after we get results 
        $("#results").show(); 
        $("#results").append(html); 
       } 
      }); 
     } 
     return false; 
    }); 
}); 
</script> 

Answer 1

我會在觸發AJAX請求之前更改消息。因此，在點擊或提交：爲什麼不使用beforeSend和成功的方法來顯示/

<script> 
$('form').on('submit', function(e) { 
    e.preventDefault(); 
    $('#response').html('<p>Loading&hellip;</p>'); 
    $.post($(this).attr('action'), $(this).serialize(), function(response) { 
     // do something here with the response 
     $('#response').html('<p>Request successful.</p>'); 
    }); 
}); 
</script> 

Answer 2

隱藏加載消息

beforeSend: function(html) { // this happens before actual call 

    // DO SOMEHTING HERE TO SHOW YOUR LOADING MESSAGE AS $('#loading').show(); 

    $("#results").html(''); 
    $("#search_result_box").show(); 
    $("#searchresults").show(); 
    $(".word").html(searchString); 
}, 
success: function(html){ // this happens after we get results 

    // DO SOMEHTING HERE TO HIDE YOUR LOADING MESSAGE AS $('#loading').hide(); 

    $("#results").show(); 
    $("#results").append(html); 
} 

RGDS