使用jQuery / Ajax和PHP显示当前进度

简短而甜蜜:寻找一种方法来调用PHP文件并使用jQuery和/或Ajax显示进度。 调用PHP文件upgrade.php?step = 1,然后将返回的输出附加到#upgradestatus。 完成后,调用upgrade.php?step = 2并附加该输出,直到完成指定的步骤数。

说明:我正在尝试为在PHP中运行的软件创建一个插件。 这个插件将通过PHP文件调用每个步骤来升级每个文件等。我希望能够在不重新加载页面的情况下显示页面上的进度,以向用户显示已完成的操作以及进程的位置。

使用我的PHP思维过程,我想创建类似于此的东西:

for (var s=0; s<2; s++){ $('#upgraderesult').load('upgrade.php', 'step=' + s, function() { $('#upgradestatus').append('Upgrade Step ' + s + ' Completed'); }); } 

我也尝试使用.ajax(),并且使用这两种方法我很快就了解到Async这将是一个更难理解的问题。

我在这背后的想法是创建一个FOR循环,它将循环执行大量的步骤。 然后,for循环将生成必要的jQuery / Ajax代码,该代码将附加到状态消息的现有div #upgradestatus。 我希望它附加在#upgraderesult中加载的结果,但为了保持简单,我只添加了“升级步骤X完成”。

所以现在我陷入困境并且认为我可能只需要使用PHP来生成正确的jQuery / Ajax代码,但我想检查并查看是否有其他人对如何以不同方式完成此操作有任何意见或建议,或者即使我正在考虑这个完全错误。

我想要的是能够根据流程中的步骤调用PHP文件,然后在浏览器中向用户显示进度…这比我想象的要困难得多。

感谢您的任何意见或建议,我非常感谢!

每个人都感谢你的投入,在Freenode #jQuery的一些人的帮助下,我们能够想出这个完美的作品:

 var numSteps = 2; function loadStepAjax(s) { $.ajax('upgrade.php', { type: 'GET', dataType: 'html', data: { step: s }, success: function(data) { $('#upgradestatus').append(data); if (s < numSteps) loadStepAjax(s+1); } }); } 

然后调用该函数:

 loadStepAjax(1); 

我们创建了一个函数loadStepAjax,然后在回调上使用IF语句来确定是否再次调用该函数,而不是使用FOR循环。

这总是很简单,不是吗! 感谢大家的意见,非常感谢。

您可以设置回调以在使用ajax()时运行,(post()将是更好的选择)。 你试过吗? 当你尝试ajax()时,你还有代码吗?

它应该是这样的。

 $.post('upgrade.php?step=1', function() { $('#upgradestatus').append('Upgrade Step 1 Completed'); $.post('upgrade.php?step=2', function() { $('#upgradestatus').append('Upgrade Step 2 Completed'); $.post('upgrade.php?step=2', function() { $('#upgradestatus').append('All done!'); } } }); 

当然你也可以返回JSON然后说是的,一切正常或其他什么,但关键是你使用回调等到它完成后调用下一步。

还有另一种解决这个问题的方法。

我写了一个全面的例子来回答这个问题:

在没有浏览器超时的情况下在PHP中处理大量数据

PS:我的例子可以扩展到也传递每个进展的信息 – 事实上,它非常灵活; 您可以根据服务器上发生的任何事情,将您想要的UI部分设置为日期,从而避免客户端进行不必要的处理。