如果函数

Question

我正在尝试使用一个选择的onchange事件来更新另一个选择中的联系人列表。我原来的代码是

function companyUpdated(sel){
    "use strict";
    var id = sel.value;
    $.post("index.php?r=clients/get-client-info&id="+id, function(data) {
        $("#ClientInfo").html(data);
    });
};

然后我只想在开头显示一个加载div，并在结束时将其隐藏

function companyUpdated(sel){
    "use strict";
    var id = sel.value;
    $("#loading").show();
    $.post("index.php?r=clients/get-client-info&id="+id, function(data) {
        $("#ClientInfo").html(data);
    });
    $("#loading").hide();
};

现在，代码正确地更新了选择，但是我再也看不到Loading div。

我做了各种各样的事情，可以证明Loading div实际上在那里并且可以显示出来（就像在其他函数中一样……），但是在这种情况下不可以。

现在，当我旋转函数以使用$ .ajax时，div会正确显示。所以这就是我最终成功的原因。

function companyUpdated(sel){
    "use strict";
    var id = sel.value;
    $("#loading").show();
    $.ajax({
        async: false,
        method: "POST",
        url: "index.php?r=clients/get-client-info&id="+id,
        timeout: 3000,
    })
    .done(
        function(result){
            $("#ClientInfo").html(result);
        }
    );
    $("#loading").hide();
};

我的问题是为什么$ .ajax（）为什么显示Loading div而不显示$ .post？这是预期的行为吗？我有一个解决方案，但想真正理解。

感谢您抽出宝贵的时间来帮助您！

Answer 1

您需要将$("#loading").hide();放在ajax / post的回调函数中，以在请求完成后调用它。

另外，从您的请求中删除async: false。

function companyUpdated(sel){
    var id = sel.value;
    $("#loading").show();
    $.ajax({
        method: "POST",
        url: "index.php?r=clients/get-client-info&id="+id,
        timeout: 3000,
    })
    .done(
        function(result){
            $("#ClientInfo").html(result);
            $("#loading").hide();
        }
    );
};

使用帖子：

function companyUpdated(sel){
    var id = sel.value;
    $("#loading").show();
    $.post("index.php?r=clients/get-client-info&id="+id, function(data) {
        $("#ClientInfo").html(data);
        $("#loading").hide();
    });
};

使用Get（以防万一）：

function companyUpdated(sel){
    var id = sel.value;
    $("#loading").show();
    $.get("index.php?r=clients/get-client-info&id="+id, function(data) {
        $("#ClientInfo").html(data);
        $("#loading").hide();
    });
};

使用本机JavaScript（以防万一）-对于显示/隐藏动画，请使用CSS：

function companyUpdated(sel){
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == XMLHttpRequest.DONE) {
           if (xmlhttp.status == 200) {
               document.getElementById("ClientInfo").innerHTML = xmlhttp.responseText;
               document.getElementById("loading").style.display = "none";
           }
        }
    };

    document.getElementById("loading").style.display = "block";
    var id = sel.value;
    xmlhttp.open("GET", "index.php?r=clients/get-client-info&id="+id, true);
    xmlhttp.send();
}