Question

我目前有一个简单的AJAX页面，我通过AJAX提交数据，然后通过显示在屏幕上的AJAX接收响应。当服务器正在处理响应时，我想创建一个进度条。我的想法是，我可以将多个ajax更新发送回客户端，其中包含客户端可以转换为进度条（即通过引导程序）的进度，直到最终响应被发送。

是否可以从单个AJAX请求发送多个AJAX响应，或者执行此操作的最佳方法是什么。

谢谢，

Answer 1

如果您希望进度条能够显示剩余工作的百分比，那么在考虑如何在客户端上实现此功能之前，首先应该决定如何编写服务器端代码以便它支持通知。 / p>

然后客户端有两种可能的技术：

PUSH
PULL

使用PUSH通知，您可以使用HTML5 WebSockets，以便服务器直接将进度推送到客户端。

使用PULL，客户端必须定期向服务器发送AJAX请求，这将返回操作的进度。

如果您不想报告百分比，那么您可以在发送AJAX请求之前显示一些微调器动画，当AJAX请求完成时您将隐藏它。

Answer 2

在后台有一个隐藏的加载图像，当触发AJAX调用时，使用.show()方法使其可见。在success函数中，使用.hide()方法隐藏图像。

示例HTML将是：

<div class="ajax-content">
    <img src="loading.gif" alt="Loading" class="loading-gif" />
    <div class="ajax-response">
    </div>
</div>

相同的脚本如下：

$(element).click(function(){
    $(".loading-gif").show();
    $.ajax({
        ...
        success: function(){
            $(".loading-gif").hide();
        }
    });
});

Jquery / AJAX进度条

2 个答案: