Cara menggunakan jQuery untuk memadam data dan menyegarkan halaman

Dalam pembangunan web, pemadaman data adalah keperluan yang kerap berlaku. Apabila membangun dengan jQuery, kita boleh menggunakan kaedah yang disediakan oleh perpustakaan untuk mencapai fungsi ini. Semasa memadam data, jika halaman boleh dimuat semula dalam masa, kesan pemadaman data boleh ditunjukkan dengan lebih baik. Berikut akan memperkenalkan cara menggunakan jQuery untuk memadam data dan menyegarkan halaman.

jQuery Padam Data

Mula-mula, kita perlu menambah butang "Padam" pada halaman hujung hadapan. Butang ini perlu terikat pada acara Apabila pengguna mengklik butang, tindakan memadam data akan dicetuskan. Di sini, kami menganggap bahawa kami mempunyai halaman senarai yang mengandungi berbilang rekod data. Terdapat butang "Padam" di sebelah kanan setiap rekod.

Berikut ialah contoh kod:

<table>
  <tr>
    <td>数据1</td>
    <td><button class="delete" data-id="1">删除</button></td>
  </tr>
  <tr>
    <td>数据2</td>
    <td><button class="delete" data-id="2">删除</button></td>
  </tr>
  <tr>
    <td>数据3</td>
    <td><button class="delete" data-id="3">删除</button></td>
  </tr>
</table>

<script>
  $(".delete").on("click", function() {
    var id = $(this).data("id"); // 获取数据id
    $.ajax({
      url: "delete_data.php", // 指定删除数据的后端接口
      type: "POST",
      data: { id: id }, // 提交数据id
      success: function(result) {
        alert("数据已删除。");
      },
      error: function() {
        alert("删除数据失败，请稍后再试。");
      }
    });
  });
</script>

Dalam kod di atas, kami menggunakan mekanisme pengikatan peristiwa jQuery untuk mengikat acara klik butang "Padam". Apabila pengguna mengklik butang, permintaan POST tak segerak akan dicetuskan, yang akan menghantar id data ke antara muka bahagian belakang (delete_data.php) untuk memberitahu bahagian belakang bahagian data yang hendak dipadamkan. Selepas permintaan berjaya, kami menggunakan kotak gesaan amaran mudah untuk menggesa pengguna bahawa data telah dipadamkan.

jQuery menyegarkan halaman

Permintaan tak segerak dalam kod di atas hanya akan memadamkan data dalam pangkalan data bahagian belakang dan data pada halaman hujung hadapan tidak akan dipadamkan serta-merta. Untuk mencapai tujuan pemadaman data dan muat semula halaman tepat pada masanya, kami perlu memuat semula halaman secara manual selepas berjaya memadamkan data. Operasi khusus adalah seperti berikut:

<script>
  $(".delete").on("click", function() {
    var id = $(this).data("id"); // 获取数据id
    $.ajax({
      url: "delete_data.php", // 指定删除数据的后端接口
      type: "POST",
      data: { id: id }, // 提交数据id
      success: function(result) {
        alert("数据已删除。");
        location.reload(); // 刷新页面
      },
      error: function() {
        alert("删除数据失败，请稍后再试。");
      }
    });
  });
</script>

Dalam kod di atas, kami menggunakan kaedah location.reload() untuk memuat semula halaman selepas berjaya memadamkan data. Kaedah ini menyebabkan penyemak imbas memuat semula halaman semasa. Dengan cara ini, apabila pengguna kembali ke halaman senarai, data yang dipadamkan tidak akan muncul dalam senarai lagi.

Ringkasan

Artikel ini menerangkan cara menggunakan jQuery untuk memadam data dan memuat semula halaman. Setakat ini, kami telah menguasai cara menggunakan jQuery untuk melengkapkan keperluan biasa ini. Sudah tentu, dalam pembangunan sebenar, keadaan akan berbeza-beza bergantung pada logik perniagaan tertentu. Walau bagaimanapun, idea dan kaedah asas yang diperkenalkan dalam artikel ini boleh memberikan rujukan tertentu yang penting untuk kita menyelesaikan masalah yang sama dalam pembangunan sebenar.

Atas ialah kandungan terperinci Cara menggunakan jQuery untuk memadam data dan menyegarkan halaman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!