Question

短而甜蜜： 寻找一种方法来调用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文件，然后在浏览器中向用户显示进度...这比我想象的要困难得多。

感谢您提出任何意见或建议，我非常感谢！

Answer 1

每个人都感谢您的投入，在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而不是使用FOR循环，然后在回调上使用IF语句来确定是否再次调用该函数。

它总是很简单，不是它！感谢大家的意见，非常感谢。

Answer 2

您可以将回调设置为在使用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然后说是的，一切正常或其他什么，但关键是你正在使用回调等到它完成后调用下一步。

Answer 3

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

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

Processing large amounts of data in PHP without a browser timeout

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

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

3 个答案: