在我的ajax完成后如何显示我的加载图标

Question

我有一个简单的javascript函数：

function showHint() {
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

            //extract data here

        }
    }

    xmlhttp.open("GET", "articles.php?q=" + cat + "&year1=" + start_year + "&year2=" + end_year, true);

    xmlhttp.send();

}

我希望能够在ajax完成后显示我的加载图标。我通过使用：

在我的js的开头显示我的加载图标

$.mobile.loading("show");

很好地显示了图标（使用jquery mobile）。但是，我需要在ajax完成后才隐藏图标。我试图在jQuery中使用.done（），但我不认为我正确使用它：

xmlhttp.onreadystatechange.done(function(){
    $.mobile.loading("hide");
});

Answer 1

您需要使用它onreadystatechange回调函数。

xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4) {
         $.mobile.loading("hide");
    }
}

因为您已经在使用jquery。你可以简单地使用jQuery.get()之类的

$.mobile.loading("show");
$.get("articles.php?q=" + cat + "&year1=" + start_year + "&year2=" + end_year, function(data) {
    //Do something
}).done(function() {
    $.mobile.loading("hide");
});