Question

所以我正在开发一个项目，该项目将使用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在#statusreturn中生成的页面中提取“状态消息”，如果该步骤失败或成功，则将其附加到当前页面。在上面的示例中，我保持简单，然后继续并附加步骤1完成但我会在其中添加某种类型的标准JS来检查第一步是否已完成。

我对JS和jQuery很新，我觉得应该有一种更简单或更正确的方法。也许根据步骤数使用if语句运行一些标准的JS？

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

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

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

Answer 1

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

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

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

1 个答案: