Bagaimana untuk mendapatkan nilai dicetak pada skrin sambil menunggu hasil ajax?

Question

Saya menggunakan jQuery ajax untuk menghantar permintaan ajax ke fail 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);
            }
        })

Semasa permintaan ini dijalankan, saya sedang mencetak ke skrin pada selang waktu dalam fail php.

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

Tetapi selepas semua proses selesai, proses ajax dimatikan. Saya ingin mendapatkan nilai yang dicetak pada skrin semasa proses sedang berjalan.

Sebagai contoh, saya ingin mendapatkan nilai 'abc' apabila permintaan dibuat, 'def' selepas 5 saat dan 'ghi' selepas 10 saat. Bagaimana saya boleh melakukan ini? Saya mahu mencapai ini tanpa menggunakan sesi, kuki atau pangkalan data.

Answer 1

Tidak, anda tidak boleh melakukan ini

Anda hanya boleh melakukan ini di bahagian hadapan

Anda boleh mendapatkan respons secara berkala dan menambahnya pada paparan html menggunakan append() supaya ia terus berkembang

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>

Saya sering menggunakan ini apabila menunjukkan kemajuan dalam JavaScript, seperti semasa php artisan migrate di Laravel