Question

我正在阅读jQuery docs中的Ajax事件。

我的jQuery代码包含一些HTML：

<p style="display:none">Loading...</p>
<div></div>

$(document).ready(function() {

    $("p")
    .ajaxStart(function(){
        $(this).show();
    })
    .ajaxStop(function(){
        $(this).hide();
    });


    $.ajax({

        url :    'http://localhost/xampp/web_development/new_study_2014/my_files/test.php',
        data :   {id : 123},
        type :    "GET",
        dataType : "html",
        success: function(response) {
            $("div").hide().html(response).fadeIn(1500);
        },
        error: function(xhr, status, errorThrown) {
            console.log( xhr + status + errorThrown );
        },
        complete: function() {
            console.log(  );
        }
    });

});

PHP：

<?php
sleep(1);
echo "<p> his name is jack</p>";
?>

我希望在ajax请求启动时显示Loading...的段落，并在完成时隐藏它。如jQuery文档中所述。然而它没有这两个，并从PHP页面显示“他的名字是杰克”。我做错了什么？

Answer 1

ajaxStart事件的目标是文档，而不是特定元素，因此在处理程序中使用$(this)将不起作用。更改它以选择特定元素。

jQuery的：

$(document).ajaxStart(function() {
    $("#loading").show();
});
$(document).ajaxStop(function() {
    $("#loading").hide();
});

HTML：

<p id="loading" style="display: none;">Loading...</p>

jQuery ajaxStart与php代码

1 个答案: