使用AJAX从数据库中删除记录

Question

使用AJAX从数据库中删除记录

3

我有一个PHP文件，它可以显示来自数据库的数据。我使用while()循环来显示每条记录。

我的PHP文件：

<?php

    $flightTicketsSQL = "SELECT * FROM `flightbookings` WHERE username='$user' AND cancelled='no'";
    $flightTicketsQuery = $conn->query($flightTicketsSQL);

    while($flightTicketsRow = $flightTicketsQuery->fetch_assoc()) { ?>

    <tr>
        <td class="tableElementTags text-center"><?php echo $flightTicketsRow["bookingID"]; ?></td>
        <td class="tableElementTags text-center"><?php echo $flightTicketsRow["origin"]; ?></td>
        <td class="tableElementTags text-center"><?php echo $flightTicketsRow["destination"]; ?></td>
        <td class="tableElementTags text-center"><?php echo $flightTicketsRow["date"]; ?></td>
        <td class="tableElementTags text-center"><?php echo $flightTicketsRow["mode"]; ?></td>
        <td class="text-center"><span class="fa fa-remove tableElementTags pullSpan" id="deleteAccount"></span></td>
    </tr>

<?php } ?>

如果用户点击最后一个带有 Font Awesome 图标的 <td>，我想要将具有特定 bookingID 的记录从数据库中删除。为了做到这一点，我需要使用 jQuery 的 .val() 方法来识别该值。

我的 JS 文件：

var id = $("**WHAT DO I PUT HERE ?**").val();

    $('#deleteAccount').click(function() {
        $.ajax({
            type: "POST",
            url: 'cancelTicket.php',
            data: { bookingID : id },
            success : function() {
                alert("Cancelled");
            }
        });
    });

我的cancel.php文件：

<?php

    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "database";

    $conn = new mysqli($servername, $username, $password, $dbname);

    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }

    $user = $_SESSION["username"];
    $id = $_POST["bookingID"];


    $cancelFlightBookingsSQL = "UPDATE `flightbookings` SET cancelled='yes' WHERE bookingID='$id'";
    $cancelFlightBookingsQuery = $conn->query($cancelFlightBookingsSQL);

我的问题是如何让jQuery识别用户想要取消哪个预订？我的意思是如何给分配一个id，以便我可以在JS中检索其值。

我知道我没有恰当地表达这个问题。对此感到抱歉。

谢谢

- sequel

您没有#deleteAccount元素。
确保您在每一行上不重复使用该id。
使用this引用获取单击的元素中的按钮的id。

- Rory McCrossan

或者更好的方法是，创建一个在单击时激活并可以将 id 作为函数 param 传递的函数。例如：onclick="cancelFlight(<?=$flightTicketsRow['id'];?>);" - Sam

@Samuel 你能否请稍微解释一下吗？谢谢。 - sequel

生成页面时，请将您的bookingIds作为HTML ID插入页面，然后使用这些ID。 - Fueled By Coffee

1

@Samuel 不要这样做。on* 属性是一种应该避免的反模式。请使用不显眼的事件处理程序。 - Rory McCrossan

显示剩余6条评论

2个回答

2

从点击的元素开始：

$('#deleteAccount').click(function() {

您可以通过遍历DOM来找到您想要的元素。首先，向目标元素添加一个类：

<td class="tableElementTags text-center bookingID"><?php echo $flightTicketsRow["bookingID"]; ?></td>

接下来，将预订ID的值放入数据属性中，以便轻松地进行编程访问（个人偏好，因为文本内容很容易更改）：

<td class="tableElementTags text-center bookingID" data-booking="<?php echo $flightTicketsRow["bookingID"]; ?>"><?php echo $flightTicketsRow["bookingID"]; ?></td>

现在你可以从点击事件处理程序中向上遍历DOM，到达最近的共同父元素，然后再通过所需数据向下找到目标元素。类似于这样：

$('#deleteAccount').click(function() {
    var id = $(this).closest('tr').find('.bookingID').data('booking');
    // the rest of your click handler
});

- David

谢谢。我会尝试并告诉你。 - sequel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rory McCrossan · Accepted Answer

这里存在一些问题。首先，您需要为 span 使用一个 class，而不是 id，否则它将被 PHP 循环复制到 DOM 中，这会导致无效的 HMTL，从而破坏您的单击事件处理程序。

完成上述步骤后，您需要在单击处理程序中设置 id 变量值，以便找到与所单击元素相关的 td。您可以像这样做：

<!-- repeated throughout your while loop -->
<td class="text-center">
  <span class="fa fa-remove tableElementTags pullSpan deleteAccount"></span>
</td>

$('.deleteAccount').click(function() {
  var id = $(this).closest('tr').find('td:first').text().trim();

  $.ajax({
    type: "POST",
    url: 'cancelTicket.php',
    data: {
      bookingID: id
    },
    success: function() {
      alert("Cancelled");
    }
  });
});