Bagaimana Menggunakan jQuery untuk Menambah Bar Kemajuan pada Kandungan Ajax-Loaded?

Tunjukkan Bar Kemajuan Semasa Kandungan Ajax-Loaded

Dalam pembangunan web, selalunya wajar untuk memaparkan bar kemajuan semasa data diambil dan dimuatkan ke dalam halaman melalui Ajax. Ini membantu memberikan maklum balas visual kepada pengguna, yang menunjukkan bahawa proses itu sedang berjalan.

Contoh Kod Ajax:

Mari kita pertimbangkan contoh di mana anda mempunyai kotak lungsur turun yang mencetuskan Pertanyaan Ajax semasa pemilihan, mendapatkan semula data daripada pangkalan data:

<code class="javascript">$("#client").on("change", function() {
  var clientid = $("#client").val();

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

Menambah Bar Kemajuan Menggunakan jQuery:

Untuk menambah bar kemajuan pada operasi Ajax ini, anda boleh menggunakan kaedah xhr() dalam konfigurasi $.ajax():

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

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

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

    return xhr;
  },
  type: 'POST',
  url: &quot;/&quot;,
  data: {},
  success: function(data){
        // Do something success-ish
  }
});</code>

Kod ini mencipta objek XMLHttpRequest dan menambah pendengar acara untuk kemajuan muat naik dan muat turun. Apabila data dipindahkan, pembolehubah peratusLengkap akan memberikan nilai yang boleh anda gunakan untuk mengemas kini bar kemajuan pada halaman web anda.

Atas ialah kandungan terperinci Bagaimana Menggunakan jQuery untuk Menambah Bar Kemajuan pada Kandungan Ajax-Loaded?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!