使用jQuery/Ajax/JS加载PHP文件和显示状态的正确或最佳过程


Correct or best process for loading PHP files and displaying the status using jQuery/Ajax/JS

所以我正在做一个项目,将使用PHP下载文件与CURL和更新他们在服务器上。我已经得到了这部分的照顾,现在我正在工作的前端gui,将显示进度给用户。

所以我最初的想法是这样使用代码:

$('#startupgrade').click(function() {
    $('#upgradeprogress').css({"width": "0%"});
    $('#upgradestatus').append('<p>Starting Upgrade...</p>');
    $('#upgradeprogress').css({"width": "10%"});
    $('#currentstep').load('upgrade.php #statusreturn', 'step=1');
    $('#upgradestatus').append('<p>Step 1 Complete...</p>');
    $('#upgradeprogress').css({"width": "20%"});
})

这背后的想法是加载PHP页面并从PHP在ID #statusreturn中生成的页面中提取"状态消息",如果该步骤失败或成功,则将该消息添加到当前页面。在上面的例子中,我保持简单,只是继续并附加步骤1完成,但我会在那里添加一些类型的标准JS来检查第一步是否完成。

我对JS和jQuery非常陌生,我觉得应该有一个更容易或更正确的方法来做到这一点。也许运行一些标准的JS使用基于步骤数的if语句?

有没有人对如何用更少的代码或更简单的方式完成这一点有任何建议或建议?我想确保我最终使用和学习的方法是正确的,希望我不会犯新手错误,使用比必要更多的代码。

感谢您的建议和帮助。

#upgradeprogress使用Twitter Bootstrap进度条,它由宽度控制。#upgradestatus是一个Bootstrap井,它将显示与终端几乎相似的输出。

load函数是一个异步函数。这意味着它将直接继续,而不是等待加载。为了等待加载,将进度条的更新放入成功回调处理程序中:

http://api.jquery.com/load/

$('#result').load('steps/step1.php', function() {
  $('#upgradeprogress').css({"width": "10%"}); //update your status bar here
  $('#currentstep').load('upgrade.php #statusreturn', function() {
    $('#upgradeprogress').css({"width": "20%"});
    //add more steps here if required
  });
});

只有当成功函数()被执行时,你才能确定请求已经完成。