Comment imprimer la valeur à l'écran en attendant le résultat ajax ?

Question

J'utilise jQuery ajax pour envoyer une requête ajax vers un fichier php.

$.ajax({
            url: VIP_AJAX_URL + '/add',
            data: 'slug=' + slug,
            method: 'POST',
            beforeSend: function () {
                Swal.fire({
                    title: '请稍候..',
                    html: '我们正在检查。 <br/>这个过程可能需要一些时间。',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading()
                    }
                })
            },
            success: function (res) {
                if (res !== 'success') {
                    Swal.fire({
                        icon: 'error',
                        title: 'Oops...',
                        html: res,
                    })
                    return;
                }

                console.log(res);
            }
        })

Pendant que cette requête est en cours, j'imprime à l'écran à intervalles réguliers dans un fichier php.

echo 'abc';
sleep(5);
echo 'def';
sleep(5);
echo 'ghi';

Mais une fois tous les processus terminés, le processus ajax est tué. Je souhaite que la valeur soit imprimée à l'écran pendant que le processus est en cours.

Par exemple, je souhaite obtenir la valeur de « abc » lorsque la requête est faite, « def » après 5 secondes et « ghi » après 10 secondes. Comment puis-je faire ceci? Je veux y parvenir sans utiliser de sessions, de cookies ou de bases de données.

Answer 1

Non, tu ne peux pas faire ça

Vous ne pouvez le faire que sur le frontend

Vous pouvez obtenir la réponse périodiquement et l'ajouter à la vue HTML en utilisant append() pour qu'elle continue de croître

function getLog() {                
fetch("https://gist.githubusercontent.com/prabansal/115387/raw/0e5911c791c03f2ffb9708d98cac70dd2c1bf0ba/HelloWorld.txt").then(async e=>{
        let t = await e.text()
        document.getElementById("log").innerHTML += t+"<br/>"
    })
}
setInterval(getLog, 1000)

<div id="log"></div>

Je l'utilise souvent pour afficher les progrès en JavaScript, comme lors de la migration artisanale de PHP sur Laravel