Question

我有以下JQuery：

    $(document).ready(function() {

        $(document).ajaxStart(function(){
            $("#spinner").css("display", "block");
        });
        $(document).ajaxComplete(function(){
            $("#spinner").css("display", "none");
        });

        $("#go").click(function() {
            $("#messager").html('<img src="spinner.gif" id="spinner">');
            $.post("send.php", {
                first:  first,
                second:  second
            }, function(result) {
                $("#messager").html(result);                
            });
        });

    });

这是HTML：

<div id="messager"><img src="spinner.gif" id="spinner"></div>

这是我的send.php做出的回应：

echo "something";

如果用户第一次点击#go，一切正常。首先显示微调器，然后显示“内容”。

但是，如果用户第二次单击#go，则不会显示微调器。

如果用户在没有重新加载网站的情况下单击#go，该如何更改每次显示微调器的代码！

Answer 1

$("#messager").html(result);

您要用结果替换消息程序的全部内容。微调框是消息程序的子级。因此，它不再存在。

Answer 2

您可以使用以下内容：

<div id="messager"></div>
<script>


$(function() {

$("#go").click(function(){
    hideSpinner();
    $.ajax({
       url : "send.php", 
       data: { first:  first,second:  second},
       beforeSend: function() {
           showSpinner();
       },
       success: function(result){
            $("#messager").html(result);             
       },
       error: function(err) {
           console.log(err);
           hideSpinner();
       }
    });
});

});

function hideSpinner() {
if($(document).find('#spinner').length > 0) {
    $(document).find('#spinner').remove();
}
}
function showSpinner() {
    $('#messager').append('<img src="spinner.gif" id="spinner">');
}

</script>

Answer 3

在调用ajax请求时必须启用Spinner，并在收到响应后立即将其禁用。试试这个

$(document).ready(function(){
    $("#go").click(function(){
        $("#spinner").css("display", "block");
        $.post("send.php", {
            first:  first,
            second:  second
        }, function(result) {
             $("#spinner").css("display", "none");
            $("#messager").html(result);                
        });
    });

jQuery Ajax仅在第一次请求时加载微调器

3 个答案: