jquery - Jquery / AJAX 进度条

Question

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

是否可以从单个 AJAX 请求发送多个 AJAX 响应，或者这样做的最佳方法是什么。

谢谢，

Answer 1

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

那么客户端上有两种可能的技术：

1. 推
2. 拉

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

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

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

Answer 2

.show()在后台有一个隐藏的加载图像，当 AJAX 调用被触发时，使用该方法使其可见。在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();
        }
    });
});