0

所以我正在开发一个项目，该项目将使用 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 非常陌生，我觉得应该有一种更简单或更正确的方法来做到这一点。也许使用基于步数的 if 语句运行一些标准 JS？

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

感谢您的任何意见，并提前感谢您的帮助。

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

4

1 回答 1

1

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

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
  });
});

只有在执行成功函数（）时，您才能确定请求已完成。

于 2012-12-28T14:42:14.437 回答