jquery - 在 jQuery Mobile 中的 Ajax 调用上显示页面加载微调器

Question

我正在使用 $.ajax() 填充我的移动网络应用程序中的列表。我想做的是让 jQuery 移动加载微调器在执行此调用时出现，并在列表填充后消失。当前版本的 JQM 使用 $.mobile.showPageLoadingMsg() 和 $.mobile.hidePageLoadingMsg() 分别显示和隐藏加载微调器。我不知道到底应该在哪里放置这些语句才能得到正确的结果。这看起来应该是一件相当容易完成的事情，我只是还没有找到关于这个确切场景的任何信息。

这是 pagecreate 函数内的 ajax 调用:

$('#main').live('pagecreate', function(event) {
        $.ajax({
            url: //url
            dataType: 'json',
            headers: //headers
            success: function(data) {
                for(i = 0; i < data.length; i++) {
                    $('#courses').append('<li>' + data[i].name + '<ul id="course' + data[i].id + '"></ul>' + '<span class="ui-li-count">' + data[i].evaluatedUserIds.length + '</span></li>');
                    $('#course' + data[i].id).listview();
                    for(j = 0; j < data[i].evaluatedUserIds.length; j++) {
                        $('#course' + data[i].id).append('<li><a href="">' + data[i].evaluatedUserIds[j] + '</a></li>');
                    }
                    $('#course' + data[i].id).listview('refresh');
                }
                $('#courses').listview('refresh');
            }
        });
    });

Answer 1

您可以使用$.ajax的beforeSend和complete事件来调用$.mobile.showPageLoadingMsg和$.mobile.hidePageLoadingMsg。看起来像这样:

$('#main').live('pagecreate', function(event) {
        $.ajax({
            beforeSend: function() { $.mobile.showPageLoadingMsg(); }, //Show spinner
            complete: function() { $.mobile.hidePageLoadingMsg() }, //Hide spinner
            url: //url
            dataType: 'json',
            headers: //headers
            success: function(data) {
                //...
            }
        });
    });