Bagaimana jQuery mengelakkan muat semula halaman untuk permintaan AJAX

Dalam beberapa tahun kebelakangan ini, dengan kemunculan era Web 2.0, teknologi bahagian hadapan telah menjadi semakin berkembang, sebagai perpustakaan JavaScript yang popular, cekap dan diperkemas, memberikan kami banyak kemudahan dalam membangunkan aplikasi Web . Antaranya, teknologi AJAX jQuery menyediakan kami kaedah untuk melaksanakan permintaan tak segerak, yang meningkatkan pengalaman pengguna dan mengelakkan masalah penyegaran halaman.

Walau bagaimanapun, AJAX juga mempunyai beberapa masalah. Ramai pembangun telah menghadapi masalah sedemikian apabila menggunakan AJAX: setiap kali permintaan AJAX dihantar, halaman semasa akan dimuat semula, memberikan pengguna pengalaman buruk. Jadi, bagaimana untuk mengelakkan penyegaran halaman kerana permintaan AJAX? Berikut ialah beberapa cara untuk melumpuhkan muat semula dalam jQuery AJAX.

1. Gunakan kaedah event.preventDefault()

Dalam soalan di atas, kami menyebut bahawa setiap kali permintaan AJAX dihantar, halaman semasa akan dimuat semula adalah kerana penyemak imbas lalai disebabkan oleh tingkah laku. Oleh itu, kita boleh menggunakan kaedah event.preventDefault() untuk menghalang tingkah laku lalai penyemak imbas. Kaedah ini menerima objek acara, yang menghalang kelakuan lalai penyemak imbas untuk acara tertentu.

Berikut ialah kod sampel menggunakan kaedah event.preventDefault():

$('#submit-button').click(function(event) {
  event.preventDefault();
  $.ajax({
    url: 'example.com',
    type: 'POST',
    data: {'name': 'John', 'age': 30},
    success: function(response) {
      alert(response);
    }
  });
});

Di sini, kami menghantar objek acara sebagai parameter kepada fungsi panggil balik acara klik, Dan gunakan kaedah event.preventDefault() dalam fungsi untuk menghalang kelakuan penyerahan borang lalai penyemak imbas. Ini akan mengelakkan masalah muat semula halaman.

2. Gunakan pernyataan palsu pulangan

Selain menggunakan kaedah event.preventDefault(), kami juga boleh menggunakan pernyataan palsu pulangan. Kenyataan ini menghalang tindakan lalai penyemak imbas pada acara tertentu dan menghalang pernyataan lain dalam kod daripada dilaksanakan.

Lihat contoh kod di bawah:

$('#submit-button').click(function() {
  $.ajax({
    url: 'example.com',
    type: 'POST',
    data: {'name': 'John', 'age': 30},
    success: function(response) {
      alert(response);
    }
  });
  return false;
});

Di sini, kami menggunakan pernyataan palsu pulangan untuk menghalang kelakuan penyerahan borang lalai penyemak imbas dan mengelakkan pelaksanaan pernyataan lain dalam kod. Ini juga boleh menghalang isu muat semula halaman.

Perlu diambil perhatian bahawa jika anda menggunakan pernyataan palsu pulangan dalam fungsi panggil balik untuk menghalang operasi lalai penyemak imbas, anda perlu menambah event.stopPropagation() selepas pernyataan, jika tidak masalah yang tidak perlu mungkin berlaku.

3. Gunakan objek janji

Menggunakan objek janji boleh menjadikan kod lebih ringkas dan mudah difahami serta mengelakkan masalah yang disebabkan oleh fungsi panggil balik bersarang.

Berikut ialah kod sampel menggunakan objek janji:

$('#submit-button').click(function() {
  var request = $.ajax({
    url: 'example.com',
    type: 'POST',
    data: {'name': 'John', 'age': 30}
  });
  request.then(function(response) {
    alert(response);
  });
  return false;
});

Di sini, kami menetapkan permintaan kepada permintaan berubah dan menetapkan fungsi panggil balik kejayaan dalam objek janji. Ini boleh mengelakkan masalah muat semula halaman dengan berkesan.

Walaupun AJAX boleh meningkatkan pengalaman pengguna tapak web dengan berkesan, ia juga mempunyai beberapa masalah, seperti penyegaran halaman. Apabila menggunakan jQuery AJAX untuk melumpuhkan muat semula, kita perlu memberi perhatian kepada perkara berikut:

1. Anda perlu menggunakan kaedah event.preventDefault() atau pernyataan palsu kembali untuk menghalang operasi lalai penyemak imbas.
2. Penggunaan objek janji boleh menjadikan kod lebih ringkas dan mudah difahami, serta mengelakkan masalah yang disebabkan oleh fungsi panggil balik bersarang.
3. Jika anda menggunakan pernyataan palsu pulangan untuk menghalang operasi lalai penyemak imbas, anda perlu menambah event.stopPropagation() selepas pernyataan, jika tidak masalah yang tidak perlu mungkin berlaku.

Secara amnya, apabila menggunakan jQuery AJAX, adalah sangat penting untuk mengelakkan penyegaran halaman, yang boleh meningkatkan pengalaman pengguna dengan berkesan, dan kaedah di atas juga boleh menyelesaikan masalah ini dengan baik. Kita hanya perlu memilih kaedah yang sesuai dengan kita berdasarkan keperluan perniagaan tertentu.

Atas ialah kandungan terperinci Bagaimana jQuery mengelakkan muat semula halaman untuk permintaan AJAX. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!