Bincangkan cara menggunakan jQuery untuk melaksanakan fungsi padam AJAX

Dengan perkembangan Internet, kerja jurutera hadapan menjadi lebih kecil dan lebih kecil, menggunakan pelbagai teknologi untuk menjadikan interaksi tapak web lebih lancar. Antaranya, perpustakaan jQuery adalah pembantu yang baik untuk jurutera bahagian hadapan Ia menyediakan fungsi yang kaya, seperti operasi halaman, paparan kesan dinamik, dll. Dalam artikel ini, kami akan meneroka cara melaksanakan fungsi pemadaman AJAX menggunakan jQuery.

Konsep AJAX

AJAX (Asynchronous JavaScript and XML) ialah teknologi yang berkomunikasi dengan pelayan untuk mengemas kini halaman web tanpa memuatkan semula halaman. Dalam istilah orang awam, ia membenarkan halaman mengemas kini data tanpa memuatkan semula keseluruhan halaman, dan data juga boleh berinteraksi dengan dalam format JSON. Oleh itu, kemunculan teknologi AJAX boleh menjadikan pengalaman laman web lebih lancar dan membolehkan pengguna berinteraksi dengan lebih baik dengan laman web tersebut.

Gunakan jquery untuk melaksanakan pemadaman AJAX

Di bawah, kami menggunakan contoh mudah untuk menerangkan cara menggunakan jQuery untuk melaksanakan pemadaman AJAX.

Struktur HTML:

<ul id="list">
  <li id="1">List item 1</li>
  <li id="2">List item 2</li>
  <li id="3">List item 3</li>
  <li id="4">List item 4</li>
</ul>

Dalam senarai ul, kami menetapkan 4 elemen li, setiap elemen ditetapkan dengan atribut id unik. Kami akan menggunakan ini sebagai asas untuk menunjukkan cara melaksanakan pemadaman AJAX menggunakan jQuery.

Pertama, kita perlu mendengar peristiwa klik butang padam dan mendapatkan maklumat data yang perlu kita padam melalui id.

$(document).on('click', '.delete-button', function(){
  var id = $(this).parent().attr('id');
});

Dalam kod di atas, kami menggunakan kaedah on untuk menambah acara klik pada butang padam Kami boleh menggunakan ini untuk mendapatkan maklumat butang yang sedang diklik dan menggunakan kaedah induk untuk mendapatkan elemen li di mana butang terletak, dan kemudian dapatkan maklumat atribut id bagi elemen tersebut.

Seterusnya, kami menggunakan teknologi AJAX untuk menghantar maklumat data yang diperoleh ke bahagian belakang untuk operasi pemadaman.

$(document).on('click', '.delete-button', function(){
  var id = $(this).parent().attr('id');
  $.ajax({
    url: 'delete.php',
    type: 'POST',
    data: {id: id},
    success: function(response){
      console.log(response);
    }
  });
});

Dalam kod di atas, kami menggunakan kaedah ajax untuk menghantar permintaan POST ke halaman delete.php dan menghantar nilai id yang diperoleh sebagai data.

Akhir sekali, kita perlu menulis kod untuk operasi pemadaman di bahagian belakang Kod berikut ialah contoh mudah.

$id = $_POST['id'];
mysql_query("DELETE FROM table_name WHERE id='$id'");
echo "success";

Dalam kod di atas, kami mula-mula mendapatkan nilai id yang dihantar oleh AJAX, dan menggunakan kaedah mysql_query untuk memadam maklumat data yang sepadan dengan id, dan akhirnya mengembalikan rentetan kejayaan untuk menunjukkan bahawa operasi berjaya.

Ringkasan

Melalui kod di atas, kita dapat melihat bahawa tidak sukar untuk menggunakan jQuery untuk melaksanakan fungsi pemadaman AJAX Ia hanya memerlukan pengalaman pembangunan bahagian depan dan belakang tertentu. ditambah masa yang mencukupi dan Dengan kesabaran, kami boleh membuat fungsi pemadaman AJAX yang lancar. Sebagai contoh, kita boleh melaksanakan fungsi pemadaman dinding mesej dengan menggunakan kaedah di atas.

Atas ialah kandungan terperinci Bincangkan cara menggunakan jQuery untuk melaksanakan fungsi padam AJAX. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!