使用Ajax单击按钮删除表行

Question

我有一个包含4列的HTML表：SKU组，Group_ID，“编辑”按钮和“删除”按钮。 我现在正在使用删除功能，因此希望每当我按下删除按钮时，都会弹出一个确认框，然后如果按下“确定”，它将删除该行并发送一个删除查询，该查询将从数据库中删除它。

我知道我要对删除查询使用Ajax和单独的PHP脚本，但是似乎无法弄清楚。 任何帮助表示赞赏！

删除按钮的HTML：

<td><input type="button" class="delete" name="delete" value="Delete" onclick="deleteRow(this)"></td>

JavaScript ...我知道这需要做一些工作，但是出于我的问题而将其发布：

function deleteRow(r) {

if (confirm('Are you sure you want to delete this entry?')) {
    var i = r.parentNode.parentNode.rowIndex;
    document.getElementById("skuTable").deleteRow(i);
  }



    request = $.ajax({
      type: "POST",
      url: "delete.php",
      data: i
    });


        request.done(function (response, textStatus, jqXHR){
          if(JSON.parse(response) == true){
            console.log("row deleted");
          } else {
            console.log("row failed to delete");
          }
        });

        // Callback handler that will be called on failure
        request.fail(function (jqXHR, textStatus, errorThrown){
            // Log the error to the console
            console.error(
                "The following error occurred: "+
                textStatus, errorThrown
            );
        });

        // Callback handler that will be called regardless
        // if the request failed or succeeded
        request.always(function () {

        });


}

delete.php：

<?php

  $SKU_Group = $_POST['SKU Group'];
  $Group_ID = $_POST['Group_ID'];

  $host="xxxxxx"; 
  $dbName="xxxxxx"; 
  $dbUser="xxxxxxxxxxxxxx"; 
  $dbPass="xxxxxxxxxxx";

  $pdo = new PDO("sqlsrv:server=".$host.";Database=".$dbName, $dbUser, $dbPass);

  $delete = "DELETE FROM SKU_Group_Dim WHERE Group_ID = '$Group_ID'";

  $stmt = $pdo->prepare($delete);
  $result = $stmt->execute();
  echo json_encode($result);
  if(!$result) {
      echo json_encode(sqlsrv_errors());
  }

?>

Answer 1

JavaScript的

首先，我注意到您正在使用jQuery，那么为什么不尝试充分利用它呢？

首先为.delete按钮创建一个onclick事件处理程序。

$('.delete').click(function () {
    // do something when delete button is clicked
});

你只想要删除行的用户已经确认，它已经从数据库中删除成功后。

if (confirm('Are you sure you want to delete this entry?')) {
    // shorter call for doing simple POST request
    $.post('delete.php', data, function (response) {
        // do something with response
    }, 'json');
    // ^ to indicate that the response will be of JSON format
}

但是应该将哪些data传递到$.post()以便我们知道要删除的记录？ 好吧，可能是我们要删除的记录的ID。

HTML

由于您没有发布太多的HTML，因此假设您按以下方式构建了表格：

<table class="skuTable">
    <tr>
        <td>123</td><!-- sku group -->
        <td>456</td><!-- group id -->
        <td><input type="button" class="edit" name="edit" value="Edit" ... ></td>
        <td><input type="button" class="delete" name="delete" value="Delete" onclick="deleteRow(this)"></td>
    </tr>
    <!-- more similar records -->
</table>

对其进行更改，以便您可以轻松地找到和访问该组的ID，例如通过向您的单元格中添加一个类。 （由于我们已经创建了onclick处理程序，因此您不再需要为.delete按钮使用onclick属性。）

<table class="skuTable">
    <tr>
        <td class="skuGroup">123</td>
        <td class="groupId">456</td>
        <td><input type="button" class="edit" name="edit" value="Edit" ... ></td>
        <td><input type="button" class="delete" value="Delete"></td>
    </tr>
    <!-- more similar records -->
</table>

JavaScript（再次）

您可以通过使用jQuery遍历轻松地找到关联的ID。 现在将所有内容放在一起：

$('.delete').click(function () {
    var button = $(this), 
        tr = button.closest('tr');
    // find the ID stored in the .groupId cell
    var id = tr.find('td.groupId').text();
    console.log('clicked button with id', id);

    // your PHP script expects GROUP_ID so we need to pass it one
    var data = { GROUP_ID: id };

    // ask confirmation
    if (confirm('Are you sure you want to delete this entry?')) {
        console.log('sending request');
        // delete record only once user has confirmed
        $.post('delete.php', data, function (res) {
            console.log('received response', res);
            // we want to delete the table row only we received a response back saying that it worked
            if (res.status) {
                console.log('deleting TR');
                tr.remove();
            }
        }, 'json');
    }
});

PHP

人们使用准备好的语句的原因之一是防止攻击。 您尝试使用它很好，但是您没有正确使用它（请阅读Jay的评论）。 您想将变量绑定到SQL中的参数。 您可以通过在PDOStatement :: execute（）函数中传递变量数组来实现。

删除记录时，可以通过使用PDOStatement :: rowCount（）检查受影响的记录数来检查它是否有效。

我从来没有任何理由来检查execute()是否有效。

<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);

//$SKU_Group = $_POST['SKU Group'];

$Group_ID = $_POST['Group_ID'];

$host="xxxxxx"; 
$dbName="xxxxxx"; 
$dbUser="xxxxxxxxxxxxxx"; 
$dbPass="xxxxxxxxxxx";

$pdo = new PDO("sqlsrv:server=".$host.";Database=".$dbName, $dbUser, $dbPass);

$stmt = $pdo->prepare("DELETE FROM SKU_Group_Dim WHERE Group_ID = ?");
$stmt->execute(array($Group_ID));

// send back the number of records it affected
$status = $stmt->rowCount() > 0;

// send back a JSON 
echo json_encode(array('status' => $status));

// nothing else can be outputted after this
?>

当然，这尚未经过测试，因此可能存在一些错误。 如果打开浏览器的控制台日志，则可以按照日志查看发生了什么。