如何使用 AJAX 从 MySQL 数据库中删除 HTML 行并删除条目？

Question

我目前正在使用 HTML、PHP、Javascript 和 AJAX 的组合来创建 HTML，从 MySQL 数据库中的表中填充它，然后在表中添加一个内部以删除行，并从 MySQL 数据库中删除该条目。这是我目前拥有的：

<?php

echo '<table id="tag_table" border=1>
      <tr>
      <th>Tags</th>
      <th>Delete Tag</th>
      </tr>';

$iter = 0;

$rows = $statement->fetchAll(PDO::FETCH_ASSOC);

foreach($rows as $row) {
    echo "<tr id=" . $iter . "\">";
    echo "<td>" . $row['name'] . "</td>";

    echo "<td>";
    echo "<button id=\"delete\">Delete</button>";

    echo "</td> </tr>";    
}

?>

现在我想做的是向删除按钮添加 .click() 功能，但我被卡住了，因为我想使用以下 Javascript 删除该行：

function deleteTag(btn) {  
  var row = btn.parentNode.parentNode;
  row.parentNode.removeChild(row);
}

但我还需要删除 MySQL 数据库中的相应条目，需要 PHP（我不能在 javascript 文件中使用它）。如果有人对如何完成这些事情有可能的解决方案或想法，我将不胜感激。

感谢您的帮助。

编辑 1. 我的 PHP 代码：

<?php
  $db = new PDO('my info here bla bla bla');

  $query = "DELETE FROM Tags WHERE name=" . $_POST['name'];

  $db->exec($query);

  $db = null;
?>

Answer 1

您可以将按钮标签中的onclick=? 属性与您的JS 函数结合使用：onclick=removeTag(this)。

<?php

echo "
  <table class="tag_table" border=1>
    <tr>
      <th>Tags</th>
      <th>Delete Tag</th>
    </tr>";

$iter = 0;

$rows = $statement->fetchAll(PDO::FETCH_ASSOC);

foreach($rows as $row)
{
  echo "<tr class=" . $iter . ">";
  echo "<td>" . $row['name'] . "</td>";

  echo "<td>";
  echo "<button onclick=\"deleteTag(this)\" class=\"delete\">Delete</button>";

  echo "</td></tr>";
}

?>

JS：

function deleteTag(btn) {
  // select the row that's concerned
  var row = btn.parentNode.parentNode;

  // select the name of this row
  var name = row.children[0].textContent;

  // remove the row on client side
  row.parentNode.removeChild(row);

  // AJAX call to remove the row server side
  $.ajax({
    url: 'removeRow.php', // this is the target PHP file
    type: "GET",
    data: ({
      name: name
    }),
    success: function(data) {
      // the following will be executed when the request has been completed
      alert('Entry has been deleted successfully!');
    }
  });

}

PHP：诀窍是您需要使用 $_REQUEST['...'] 检索 AJAX 发送的变量 而不是使用 $_GET['...'] 或 $_POST['...']

<?php

if($_REQUEST['name']) {

// if the variable has been successfully received
  $name = $_REQUEST['name'];

  $db = new PDO('my info here bla bla bla');

  $query = $db->prepare("DELETE FROM Tags WHERE name = :name");

  $query->execute(array('name' => $name));

  unset($db, $query)

}