AJAX加载消息

Question

I want to display a loading message while retrieving results via AJAX, but I can't. Can anybody help please?

<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

I would change the message before firing the AJAX request. So, on click or on submit:

<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>