Question

我正在使用phonegap（JQ + Html）开发移动应用。在我的应用中，使用REST调用消费AJAX网络服务。当服务调用时，我正在显示进度条动画GIF图像。问题是，浏览器在调用AJAX时会冻结。所以进度条没有显示。

在'beforeSend'我正在显示进度条图像，并在'complete'后隐藏进度条图像。

我也在尝试async: true。但它以异步方式执行服务。在我的应用程序中，异步执行不合适。因为异步执行不会等待ajax执行。我的应用程序应该等到ajax执行完成。在那个过程中，我想要显示进度条。

这是我的代码。

$.ajax({
    type: "POST",
    dataType: "json",
    contentType: "application/json",
    accepts: "application/json",
    beforeSend: function() {
        StartPBar():
    },
    data: JSON.stringify(RQ),
    async: false,
    url: URL,
    complete: function() {
        stopPBar();
    },
    success: function(res, status, xhr) {
        try {
            RS = res;
        } catch (e) {
            alert(e);
        }
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert("Excpetion " + errorThrown + XMLHttpRequest);
    }
});

在完成整个过程之前，是否有任何显示进度条保留在屏幕上的建议？任何帮助，将不胜感激。感谢

Answer 1

尝试设置async: true，async: false将冻结浏览器，直到请求完成。同时在async: true方法之前移动beforeSend。

async: true，当浏览器支持时，基本上意味着：浏览器将异步发送数据，不会阻止或等待执行其他操作。这是我认为显示进度条指示器的唯一方法。因为（来自documentation）：

请注意，同步请求可能会暂时锁定浏览器 在请求处于活动状态时禁用任何操作。

Answer 2

如果你想等到ajax请求完成，你也可以使用async:true之类的;

StartPBar():
$.when(runAjax()).done(function(result) {
    // result conatins responseText, status, and jqXHR
    stopPBar();
});

function runAjax() {
    return $.ajax({
        type: "POST",
        dataType: "json",
        contentType: "application/json",
        accepts: "application/json",
        data: JSON.stringify(RQ),
        async: true,
        url: URL,
        success: function (res, status, xhr) {
            try {

                RS = res;

            }
            catch (e) {
                alert(e);
            }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert("Excpetion " + errorThrown + XMLHttpRequest);
        }

    });
}

在此示例中，当ajax请求完成时，将调用progressbar stop函数。

Answer 3

请务必验证您的javascript代码。

删除此代码。

beforeSend: function() {
        StartPBar():
    },

将此jquery移动设备替换为此jQuery Mobile 1.4.0-rc.1

http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.js

用这个替换你的代码。

$.mobile.loading('show');
$.ajax({
    type: "POST",
    dataType: "json",
    contentType: "application/json",
    accepts: "application/json",
    data: JSON.stringify(RQ),
    async: false,
    url: URL,
    complete: function() {
        $.mobile.loading('hide');
    },
    success: function(res, status, xhr) {
        try {
            $.mobile.loading('hide');
            RS = res;
        } catch (e) {
            alert(e);
        }
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        $.mobile.loading('hide');
        alert("Excpetion " + errorThrown + XMLHttpRequest);
    }
});

如何在调用AJAX时显示进度条？

3 个答案: