显示页面加载微调的Ajax调用在jQuery Mobile

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

这里是ajax调用里面的pagecreate函数：

$('#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');
            }
        });
    });

$('#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) {
                //...
            }
        });
    });