Bagaimanakah Saya Boleh Memaparkan Penunjuk Pemuatan Semasa Permintaan AJAX Asynchronous?

Memaparkan Penunjuk Pemuatan semasa Permintaan AJAX Asynchronous

Dalam bidang pengaturcaraan, adalah perkara biasa untuk menghadapi permintaan tak segerak, seperti yang dilakukan oleh $.ajax. Permintaan ini mendapatkan semula data di latar belakang, membenarkan pengguna untuk terus berinteraksi dengan aplikasi semasa permintaan sedang diproses. Walau bagaimanapun, dalam senario tertentu, adalah wajar untuk memberikan maklum balas visual kepada pengguna, yang menunjukkan bahawa permintaan tak segerak sedang dijalankan.

Untuk mencapainya, imej boleh dipaparkan untuk menandakan keadaan aktif permintaan itu. Coretan kod berikut memberikan contoh cara untuk melaksanakan permintaan async:

$.ajax({
  url: uri,
  cache: false,
  success: function(html){
    $('.info').append(html);
  }
});

Untuk memaparkan imej yang dimuatkan semasa permintaan, ia boleh ditunjukkan sebelum permintaan dibuat dan disembunyikan selepas ia selesai:

$('#loading-image').show();
$.ajax({
      url: uri,
      cache: false,
      success: function(html){
        $('.info').append(html);
      },
      complete: function(){
        $('#loading-image').hide();
      }
    });

Sebagai alternatif, penyelesaian yang lebih umum untuk mengikat imej pemuatan ke acara ajaxStart dan ajaxStop global boleh digunakan. Pendekatan ini memastikan bahawa imej pemuatan dipaparkan untuk semua acara AJAX:

$('#loading-image').bind('ajaxStart', function(){
    $(this).show();
}).bind('ajaxStop', function(){
    $(this).hide();
});

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memaparkan Penunjuk Pemuatan Semasa Permintaan AJAX Asynchronous?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!