Bagaimana untuk mencipta dialog padam dalam PHP

Apabila membangunkan aplikasi web, dalam banyak kes kita perlu melakukan beberapa operasi, seperti memadamkan elemen. Operasi ini mudah dilaksanakan jika hanya terdapat butang padam. Walau bagaimanapun, jika terdapat banyak butang padam dan kami mahu pengguna mengesahkan, kotak dialog padam sangat berguna.

Dalam artikel ini, kami akan memperkenalkan cara mencipta kotak dialog padam dalam PHP.

Langkah 1: Buat butang padam

Mula-mula, mari buat butang padam untuk mencetuskan kotak dialog padam. Kami mencipta butang menggunakan kod HTML seperti berikut:

<button onclick="showDeleteDialog()">删除</button>

Acara onclick butang ini akan memanggil fungsi JavaScript showDeleteDialog(). Kami akan melaksanakan fungsi ini dalam JavaScript kemudian.

Langkah 2: Laksanakan kotak dialog padam

Kami menggunakan kod JavaScript dan HTML untuk mencipta kotak dialog padam, seperti yang ditunjukkan di bawah:

<div id="deleteDialog" style="display:none">
  <p>你确定要删除吗？</p>
  <button onclick="deleteElement()">确定</button>
  <button onclick="hideDeleteDialog()">取消</button>
</div>

Kotak dialog padam ini terdiri daripada a Ia terdiri daripada satu perenggan dan dua butang. Satu butang digunakan untuk mengesahkan pemadaman dan butang lain digunakan untuk membatalkan pemadaman. ID kotak dialog ialah "deleteDialog", dan keadaan awal disembunyikan.

Langkah 3: Laksanakan fungsi JavaScript

Sekarang, kita perlu melaksanakan fungsi JavaScript untuk memaparkan kotak dialog padam apabila pengguna mengklik butang padam. Kami menulis fungsi showDeleteDialog() dalam kod JavaScript seperti berikut:

function showDeleteDialog(){
  document.getElementById("deleteDialog").style.display = "block";
}

Fungsi ini mendapat elemen "deleteDialog" melalui kaedah getElementById() dan menetapkan atribut paparannya kepada "block", supaya dialog kotak akan Menunjukkannya.

Langkah 4: Laksanakan fungsi deleteElement()

Selepas pengguna mengesahkan pemadaman, kami perlu melaksanakan operasi pemadaman sebenar. Kami melaksanakan fungsi deleteElement() melalui kod JavaScript dan PHP seperti berikut:

function deleteElement(){
  // 获取要删除的元素ID
  var elementID = "elementID";

  // 发送HTTP请求
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "delete.php", true);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
      // 删除成功，隐藏对话框
      hideDeleteDialog();
    }
  };
  xhr.send("id=" + elementID);
}

Fungsi ini menghantar ID elemen untuk dipadamkan ke skrip PHP pada pelayan melalui kaedah HTTP POST. Apabila skrip PHP berjaya memadamkan elemen, fungsi akan memanggil fungsi hideDeleteDialog() untuk menyembunyikan kotak dialog padam.

Langkah 5: Laksanakan fungsi hideDeleteDialog()

Akhir sekali, kita perlu melaksanakan fungsi untuk menyembunyikan kotak dialog padam. Kami menulis fungsi hideDeleteDialog() dalam kod JavaScript seperti berikut:

function hideDeleteDialog(){
  document.getElementById("deleteDialog").style.display = "none";
}

Fungsi ini mendapat elemen "deleteDialog" melalui kaedah getElementById() dan menetapkan atribut paparannya kepada "tiada", supaya dialog kotak akan Tersembunyi.

Pada ketika ini, kami telah menyelesaikan semua langkah untuk mencipta kotak dialog padam dalam PHP. Kami menggunakan kod HTML untuk mencipta butang padam yang mencetuskan kotak dialog padam. Laksanakan fungsi showDeleteDialog() melalui kod JavaScript untuk memaparkan kotak dialog padam. Selepas pengguna mengklik untuk mengesahkan pemadaman, kami melakukan operasi pemadaman sebenar melalui fungsi deleteElement() dan memanggil fungsi hideDeleteDialog() untuk menyembunyikan kotak dialog pemadaman.

Atas ialah kandungan terperinci Bagaimana untuk mencipta dialog padam dalam PHP. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!