PHP AJAX 动态删除数据

Question

我正在尝试使用 AJAX 通过前端站点从数据库中动态删除一条记录，我有代码但是当我单击删除按钮时没有任何反应，有连接到数据库我只是找不到错误代码，所有代码文件都相互链接。

我要从中删除记录的表称为食谱。

HTML

<div id="recipecards2" class="row">
<div class="col-sm-3">
<div id="recipecards" class="card">    
<div class="card-body">
<p>
<button type="button" id="deletebutton" class="btn btn-outline-danger" input type="submit" name="recipe_delete" data-id="<?php echo $recipe['recipe_id']; ?>">
<i style=color:black; class="fa fa-trash-o"></i> Delete Recipe </button> </a>
</p>
</div>
</div>
<br>
</div>

Ajax PHP 代码

<?php
require_once('../includes/db.php');

if($_POST['itemid']){
    $query = "DELETE FROM recipes WHERE itemid= $recipe_data['recipe_id'];";
    $result = $DBH->prepare($query);
    $result->bindParam(':itemid', $_POST['itemid']);
    $result->execute();

    echo $_POST['itemid'];
}
?>

Javascript

    $('#recipecards2').on('click', '#deletebutton', function() {
    // var that = this;
    var itemid = $('#recipecards').attr('data-id');

    var request = $.ajax({
        url: "ajax/removeItemsFromList.php",
        type: "post",
        data: { itemid : itemid}
    });

    // If we're successfull!
    request.done(function (response, textStatus, jqXHR){
        $('#recipecards2 > #recipecards[data-id="'+response+'"] ').remove();
    });
});

Answer 1

首先，您的问题是您错误地使用了named parameters，您正在prepare查询您的查询，但同时您正在将一个值直接传递给它。

改变，

$query = "DELETE FROM recipes WHERE itemid= $recipe_data['recipe_id'];";

到，

$query = "DELETE FROM recipes WHERE itemid = :itemid;";

其次，如果您使用的是data-* 属性，请考虑也使用相应的.data() 函数。

第三，当您执行 AJAX 请求但它不正确时，请打开您的浏览器控制台并检查该请求的响应。这通常应该为您指明正确的方向。

第四，你的按钮的HTML格式错误，看看你的按钮代码，

<button type="button" id="deletebutton" class="btn btn-outline-danger" input type="submit" name="recipe_delete" data-id="<?php echo $recipe['recipe_id']; ?>">

注意您是如何拥有button/input 组合的？选择一个，你不需要同时拥有。