Question

我正在开发一个具有模板，函数，api结构的PHP应用程序，我面临以下问题：

在tpl中，我有一个html表单，用户可以通过该表单上传一堆数据。我将数据发送到函数文件以处理它们，然后将结果显示给用户。我想要实现的是一个进度条，它通过引导模式和进度条向用户显示已处理数据的百分比。

当我通过html方式提交表单时，页面立即开始加载因此我无法更新模态数据（尝试使用函数文件中的查询调用）。

当我这样做时，查询后期处理是因为处理是异步的，不仅模态没有被更新，而且当下一页加载会话时也不会更新。

还有另外一种方法吗？我创建进度条的唯一方法是通过xhr方式，但这是在tpl层完成的，并不代表实际处理的数据。

提前谢谢。

Answer 1

将此功能绑定到您的按钮而不是使用submit方法，然后您可以使用响应中包含的信息动态重建进度条。

function build_progress_bar() {

        var SendInfo= {     "info":stuff };

        $.ajax({
                type: 'POST',
                url: 'https://yoursite.com/your_php_script.php',
                data: SendInfo,
                contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                traditional: true,
                success: function (data) {
                    data = JSON.parse(data);
                    var html = buildProgressBar(data);
                    function buildProgressBar(info) {
                        // Build your Progress bar HTML here
                        return progressBar;
                    }
                    document.getElementById("YOUR_PROGRESS_BAR_CONTAINER").innerHTML = html;

                }
        });

}

注意：您需要使用jQuery来使用aJax。

进度条显示已处理的数据百分比

1 个答案: