Javascript 从表单运行的PHP脚本的进度条

我已经在stackoverflow上做了大量的谷歌搜索，但我还是不太明白这一点

我有一个PHP脚本，它通过一个表单按钮运行，以在实验室环境中保留对计算机的访问权。PHP脚本运行一些特定于供应商的命令，以生成具有特定权限的用户名和密码。此过程大约需要20秒，完成后将重定向到另一页。在这个过程中，页面只是停留在那里，没有通知用户正在发生什么

我想实现一个进度条。这一部分很简单，记录的地方太多，无法计数，但我希望它的工作方式可能是不可能的。我希望在与表单按钮相同的页面上创建进度条，并且能够在进度条和脚本本身之间交换信息（例如，在脚本中的4个命令中的第二个命令运行后，将进度条从25%更改为50%），这可能吗？如果没有，我愿意接受建议

我曾经尝试过通过onclick动态生成iframe，它运行脚本（并将进度条构建到PHP脚本中），但是如何通过iframe与脚本交换表单数据并更改父页面的URL似乎让我不知所措。欢迎提供任何帮助或建议

编辑： 我已经在这个过程中运行了一个加载动画，它一直持续到重定向，但我的目标是用有问题的进度条来替换它，因为如果出现问题，我可以指定一个%或甚至一条消息来说明它在过程中的位置。

更新：对许多实用程序函数使用

最基本的方法是在用户提交表单后加载动画。比如：

$('#your-form').submit( function() {
    $('body').append('<div class="loading"></div>');

    // perform validation here
    return true; // return false in validation to *not* submit form
});

.loading {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin-left: -25px;
    margin-top: -25px;
    z-index: 99999;
}

$（“#您的表单”）.submit（函数（）{
$（'body'）。追加（''）；
//在此处执行验证
return true；//在对*not*提交表单进行验证时返回false
});
.装货{
位置：绝对位置；
最高：50%；
左：50%；
宽度：50px；
高度：50px；
左边距：-25px；
利润上限：-25px；
z指数：99999；
}

下一步是使用AJAX轮询您的服务器，查看它正在执行的任务是否完成

$('#your-form').submit( function(event) {
    $('body').append('<div class="loading"></div>');

    // perform validation here

    $.post('/url-to-post-to', $(this).serialize(), function(data) {
        var form_status = setInterval( function() {
            $.get('/url-to-poll-status', { id: data.some_id_to_track_form_submission }, function(data) {
                if (data.complete) {
                    clearInterval(form_status);
                    // Do whatever you want, e.g. redirect to another page
                }
            }
        }, 500); // poll every 500ms
    });


    return false; // Always return false because we want to submit via ajax
});

$（“#您的表单”）.submit（函数（事件）{
$（'body'）。追加（''）；
//在此处执行验证
$.post（'/url to post to'，$（this）.serialize（），函数（数据）{
var form_status=setInterval（函数（）{
$.get（'/url to poll status'，{id:data.some_id_to_track_form_submission}，函数（数据）{
如果（数据完整）{
clearInterval（form_状态）；
//做任何你想做的事情，例如重定向到另一个页面
}
}
}，500）；//每500毫秒轮询一次
});
return false；//始终返回false，因为我们希望通过ajax提交
});

还有一个：web套接字…这并不是所有浏览器都完全支持的，但它已经实现了

AJAX与普通表单提交相比的优势在于服务器处理长请求所需的时间（您提到的长约20秒）。此过程会阻塞服务器连接，如果传入连接数超过服务器的连接限制，则可能导致拥塞

AJAX解决方案不仅仅是对标准表单提交的一个简单替代，您还必须进行后端更改：

• 在收到有效的表单提交后，生成一个处理20秒数据的进程
• 您需要跟踪所有这些流程，即完成或未完成
• 您还需要一个额外的脚本/处理程序，以允许用户查询流程是否已完成

---

这个答案并不意味着是一个完整的解决方案，而仅仅是一个洞察你需要做什么的方法。

你需要使用。希望这个答案有帮助。@Aravind，其中一个给出了关于如何做屏幕指示器的信息，只告诉它的加载情况，但实际上我现在已经在使用它了。我想用一个进度条来代替它，让它更简单如果脚本中出现问题，则确定挂起发生在何处。可能是重复的，谢谢。我实际上已经开始加载动画（可能以前应该提到）我想用一个带有预定义%值的进度条来代替它，该进度条将指示所讨论脚本的不同部分。我决定研究这个想法，让用户了解它在流程中的作用，并向管理员提供流程挂起的位置（如果有任何问题）。我将编辑我的问题，以使其更好r反映这一点。