Bagaimana untuk Memaparkan Bar Kemajuan Semasa Pemuatan Ajax?

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!