JQuery Ajax Loading Menggunakan AjaxStart/AjaxSetup

jQuery ajax memuat dengan ajaxStart() dan ajaxStop()

Panduan ini menunjukkan menggunakan kaedah JQuery's ajaxStart() dan ajaxStop() untuk menguruskan petunjuk pemuatan semasa permintaan Ajax. Kami akan merangkumi beberapa pendekatan, termasuk menggunakan kaedah ini secara langsung, memasukkannya ke dalam panggilan Ajax, dan memanfaatkan ajaxSetup().

Kaedah 1: Penggunaan langsung dan ajaxStart() ajaxStop()

Kaedah ini memaparkan imej pemuatan dan melumpuhkan butang hantar borang sementara permintaan Ajax sedang berjalan. Setelah permintaan selesai, imej tersembunyi, dan butangnya dibolehkan semula.

var $form = $('#form');

$form.find('.loading')
  .hide()
  .ajaxStart(function() {
      $(this).show();
      $form.find('.submit').attr('disabled', 'disabled');
  })
  .ajaxStop(function() {
      $(this).hide();
      $form.find('.submit').removeAttr('disabled');
  });

Kaedah 2: Memuatkan penunjuk sebelum dan pengendali complete

Sebagai alternatif, anda boleh menunjukkan penunjuk pemuatan sebelum panggilan Ajax dan gunakan pengendali

untuk menyembunyikannya. complete

// Show loading image, disable submit button
$form.find('.msg').remove();
$form.find('.loading').show();
$form.find('.submit').attr('disabled', 'disabled');

// AJAX call
$.ajax({
    // ... your AJAX settings ...
    complete: function() {
        $form.find('.loading').hide();
        $form.find('.submit').removeAttr('disabled');
    }
});

Kaedah 3: Menggunakan untuk pengendalian global ajaxSetup()

Untuk penyelesaian global yang mempengaruhi semua permintaan AJAX, gunakan

. Ini menyembunyikan imej pemuatan dan membolehkan borang selepas ajaxSetup() semua permintaan Ajax lengkap.

$.ajaxSetup({
    complete: function() {
        $form.find('.loading').hide();
        $form.find('.submit').removeAttr('disabled');
    }
});

Soalan -soalan yang sering ditanya

Bahagian Q & A berikut menangani soalan umum mengenai penggunaan

, ajaxStart(), dan kaedah jQuery Ajax yang berkaitan. Perhatikan bahawa bahagian FAQ asal telah dipeluwap dan diulang semula untuk kejelasan dan kesimpulan. ajaxStop()

• Tujuan: ajaxStart() Melaksanakan fungsi apabila permintaan Ajax bermula dan tidak ada permintaan lain yang aktif. Ia sesuai untuk memaparkan petunjuk pemuatan. ajaxStart()

• Menunjukkan pemutar pemuatan: Buat elemen pemutar (mis., ). Gunakan untuk memaparkannya. <div id="spinner"> <code>$(document).ajaxStart(function(){ $("#spinner").show(); });

• menyembunyikan pemutar:

  Gunakan untuk menyembunyikan pemutar apabila semua permintaan Ajax selesai. $(document).ajaxStop(function(){ $("#spinner").hide(); });

• dengan permintaan tertentu: mengikat ajaxStart() ke elemen yang memulakan permintaan AJAX (mis., ). ajaxStart() $("#myButton").ajaxStart(...)

• vs : ajaxStart() ajaxSend() mencetuskan hanya apabila tiada permintaan Ajax yang lain berjalan; pencetus untuk setiap permintaan. ajaxStart() ajaxSend()

• Pengendalian ralat:

  Gunakan bersama untuk mengendalikan kesilapan. Contohnya: ajaxError() ajaxStart()

• Menggabungkan dengan kaedah Ajax lain: ajaxStart() Bekerja dengan kaedah jQuery Ajax lain (ajaxStop(), ajaxComplete(), ajaxError(), dan lain -lain).

• Menggunakan dengan kaedah singkat: ajaxStart() Fungsi dengan kaedah tersendiri seperti $.get() dan $.post().

Sambutan yang disemak ini memberikan penjelasan yang lebih ringkas dan teratur mengenai teknik pemuatan jQuery Ajax, menangani aspek utama dan soalan umum. Imej tetap berada di kedudukan asalnya.

Atas ialah kandungan terperinci JQuery Ajax Loading Menggunakan AjaxStart/AjaxSetup. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!