Rumah >pembangunan bahagian belakang >tutorial php >Bagaimana untuk Memaparkan Bar Kemajuan Semasa Pemuatan Ajax?

Bagaimana untuk Memaparkan Bar Kemajuan Semasa Pemuatan Ajax?

DDD
DDDasal
2024-10-24 07:30:29673semak imbas

How to Display Progress Bar During Ajax Loading?

Memaparkan Bar Kemajuan Semasa Pemuatan Ajax

Apabila melakukan pengambilan data menggunakan Ajax, anda mungkin mengalami kelewatan sementara menunggu respons pelayan. Untuk meningkatkan pengalaman pengguna, anda boleh memaparkan bar kemajuan untuk menunjukkan status pemuatan. Artikel ini akan membimbing anda untuk menunjukkan bar kemajuan menggunakan Ajax.

Kod Ajax:

Kod Ajax yang disediakan menggunakan jQuery untuk mengendalikan pengambilan data pihak pelanggan dan hasil paparan .

$(function() {
    $("#client").on("change", function() {
      var clientid=$("#client").val();

        $.ajax({
            type:"post",
            url:"clientnetworkpricelist/yourfile.php",
            data:"title="+clientid,
            success:function(data){
             $("#result").html(data);
            }
        });

    });
});

Menambah Pendengar Acara Kemajuan:

Untuk menambah pendengar acara kemajuan pada permintaan Ajax, gunakan pilihan xhr seperti berikut:

$.ajax({
    xhr: function() {
        var xhr = new window.XMLHttpRequest();

        // Upload progress event listener
        xhr.upload.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                // Calculate upload progress percentage
                var percentComplete = evt.loaded / evt.total;
                // Update progress bar (example: display the percentage)
                console.log(percentComplete);
            }
        });

        // Download progress event listener
        xhr.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                // Calculate download progress percentage
                var percentComplete = evt.loaded / evt.total;
                // Update progress bar (example: display the percentage)
                console.log(percentComplete);
            }
        });

        return xhr;
    },
    // Rest of the Ajax options remain the same
});

Kod ini mendaftarkan pendengar acara untuk acara kemajuan muat naik dan muat turun, membolehkan anda menjejak kemajuan dan mengemas kini bar kemajuan dengan sewajarnya.

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

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn