Utilisation de jQuery/Ajax avec PHP pour afficher la progression en cours

Question

En bref et en douceur : Je cherche un moyen d'appeler un fichier PHP et d'afficher la progression en utilisant jQuery et/ou Ajax. Le fichier PHP upgrade.php?step=1 est appelé et la sortie renvoyée est ajoutée à #upgradestatus. Après cela, upgrade.php?step=2 est appelé et le résultat est ajouté jusqu'à ce que le nombre d'étapes spécifié soit atteint.

Explication : J'essaie de créer un plugin pour un logiciel qui fonctionne en PHP. Ce plugin appellera chaque étape du fichier PHP pour mettre à jour chaque fichier, etc. Je souhaite pouvoir afficher la progression sur la page sans la recharger pour montrer à l'utilisateur ce qui a été fait et où en est le processus.

En utilisant mon processus de pensée PHP, j'ai voulu créer quelque chose de similaire :

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

J'ai également essayé d'utiliser .ajax() et avec ces deux méthodes, j'ai rapidement appris qu'étant Async, cela allait être un peu plus délicat à comprendre.

Mon idée était de créer une boucle FOR qui indiquerait le nombre d'étapes à franchir. Cette boucle for générerait ensuite le code jQuery/Ajax nécessaire pour ajouter le message d'état à la div #upgradestatus existante. Je voulais qu'il ajoute le résultat chargé dans #upgraderesult mais pour rester simple, j'ai juste ajouté "Upgrade Step X Complete".

Je suis donc bloqué et je pense qu'il me suffit d'utiliser PHP pour générer le code jQuery/Ajax correct, mais je voulais vérifier si quelqu'un d'autre avait des opinions ou des suggestions sur la façon dont cela pourrait être fait d'une manière différente ou même si je pense complètement à côté de la plaque.

Tout ce que je veux, c'est pouvoir appeler le fichier PHP en fonction de l'étape du processus et ensuite afficher la progression à l'utilisateur dans le navigateur... ce qui s'est avéré beaucoup plus difficile que je ne le pensais.

Merci pour toute contribution ou recommandation/suggestion, j'apprécie grandement !

Answer 1

Merci à tous pour vos commentaires, avec l'aide de certains membres du Freenode #jQuery nous avons pu trouver ce qui fonctionne parfaitement :

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

Vous appelez ensuite la fonction :

loadStepAjax(1);

Au lieu d'utiliser une boucle FOR, nous avons créé une fonction loadStepAjax, puis nous avons utilisé une instruction IF sur le rappel pour déterminer si la fonction doit être appelée à nouveau.

C'est toujours quelque chose de simple, n'est-ce pas ? Merci pour les commentaires de chacun, ils sont très appréciés.

Answer 2

Vous pouvez définir un callback à exécuter lorsque vous utilisez ajax(), (post() serait la meilleure alternative). Avez-vous essayé ? Avez-vous encore le code pour ajax() ?

Il devrait se présenter comme suit.

$.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!'); }
    }
});

Bien sûr, vous pourriez aussi renvoyer du JSON et dire Oui, tout a fonctionné ou autre, mais l'essentiel est que vous utilisiez le callback pour attendre qu'il soit terminé pour appeler l'étape suivante.

Answer 3

Il existe une autre approche de ce problème.

J'ai rédigé un exemple complet pour répondre à cette question :

Traiter de grandes quantités de données en PHP sans délai d'attente du navigateur

PS : mon exemple peut être étendu pour transmettre un message à chaque progression - en fait, il est très flexible ; vous pouvez le faire mettre à jour uniquement les parties de l'interface utilisateur que vous souhaitez en fonction de ce qui se passe sur le serveur, en épargnant au client les traitements inutiles.