Bagaimana untuk Memaparkan Bar Kemajuan Semasa Pemuatan Data AJAX dengan jQuery?

Memaparkan Bar Kemajuan Semasa Memuatkan Data dengan AJAX

Apabila melakukan pertanyaan AJAX yang mendapatkan semula data daripada pangkalan data, ia boleh mengambil sedikit masa untuk keputusan dikembalikan. Untuk memberikan maklum balas kepada pengguna semasa proses pemuatan ini, bar kemajuan boleh dipaparkan.

Mencipta Bar Kemajuan dengan jQuery

Perpustakaan jQuery menawarkan kaedah terbina dalam yang memudahkan penciptaan dan manipulasi bar kemajuan. Untuk menambah bar kemajuan pada panggilan AJAX anda, anda boleh melampirkan pendengar acara pada objek xhr:

<code class="javascript">$.ajax({
    xhr: function() {
        var xhr = new window.XMLHttpRequest();

        // Upload progress
        xhr.upload.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                // Update the progress bar here
            }
        }, false);

        // Download progress
        xhr.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                // Update the progress bar here
            }
        }, false);

        return xhr;
    },
    type: 'POST',
    url: "/",
    data: {},
    success: function(data) {
        // Hide the progress bar and display the results
    }
});</code>

Dalam kod ini:

• Pendengar acara kemajuan untuk muat naik property menjejaki kemajuan penghantaran data ke pelayan.
• Pendengar peristiwa kemajuan untuk objek xhr menjejaki kemajuan menerima data daripada pelayan.
• Anda boleh menggunakan pembolehubah percentComplete untuk menentukan peratusan penyiapan dan kemas kini bar kemajuan dengan sewajarnya.
• Selepas data berjaya diambil dan diproses, bar kemajuan boleh disembunyikan dan hasilnya boleh dipaparkan.

Dengan melaksanakan ini pendekatan, anda boleh meningkatkan panggilan balik AJAX anda dengan bar kemajuan yang mesra pengguna, memberikan maklum balas visual semasa operasi pemuatan data.

Atas ialah kandungan terperinci Bagaimana untuk Memaparkan Bar Kemajuan Semasa Pemuatan Data AJAX dengan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!