Question

目前我的数据库中装满了收藏卡。我正在使用php从我的数据库中显示卡片，这很好用。输出包括删除该特定卡的按钮。单击时AJAX工作，但卡片未被删除。

我有index.php，它只是一个html页面：

<?php include 'showallcards.php';?>

Showallcards.php：

        <?php
require_once 'connectdb.php';

$serielijst = "SELECT naam, jaar FROM series ORDER BY jaar ASC";
$serieresult = $conn->query($serielijst);
while($row = $serieresult->fetch_assoc()) {

    echo '<div class="serie" id="' . $row["naam"] . '">';
    echo "<h2>" . $row["naam"]. " </h2> " . $row["jaar"]. "<br />";
    $sql = "SELECT * FROM cards WHERE serie = '". $row["naam"] . "' ORDER BY cardname ASC";
    $result = $conn->query($sql);

    if ($result->num_rows > 0) {
        // output data of each row
        echo '<ul id="cardsul">';
        while($row = $result->fetch_assoc()) {
            echo '<li class="card" id="' . $row["id"] . '"><a href="'. $row["img"] .'"><img src="'. $row["img"] .'"/></a>';
            echo 'Card<br/><h4>' .$row["cardname"] . '</h4>Type<h4>' . $row["cardtype"] . ' - ' . $row["cardsubtype"]. '</h4></br>Serie<h4>' . $row["serie"]. '</h4>Rarity<h4>' . $row["rarity"]. '</h4>Manacost<h4>' . $row["manacost"].  '</h4>Color<h4>' . $row["color"]. '</h4>Artist<h4>' . $row["artist"]. '</h4>Power / Toughness<h4>' . $row["power"] . ' / ' . $row["toughness"] . '<br/>';
            echo '<div class="status" id="wanted">' . $row["want"] . '</div>';
            echo '<div class="status" id="favorited">' . $row["favorite"] . '</div>';
            echo '<div class="status" id="collectioned">' . $row["incollection"] . '</div>';
            echo '<div class="status" id="del_wrapper"><button id="'.$row['id'].'">Delete</button></div>';
            echo '</li>';
        }
        echo '</ul><div class="clear"></div>';
    } else {
        echo "0 results";
    }
echo "</div>";
}
?>

在此脚本中，我获取所有卡片并显示它们。此外，还有一个按钮，用于在按下时删除特定卡。

用于删除的php文件是delete_card.php：

<?php
if (isset($_POST['del_id'])) {
    $del_id = $_POST['del_id'];
    $del_sql="DELETE FROM cards WHERE id='$del_id'";
    $del_result = $conn->query($del_sql);
}
?>

我已经通过回显一个简单的文本来测试文件是否已加载。

在其中一个评论员的ajax代码的帮助下，我已经做到了这一点：

$(document).ready(function(){
    $("button").click(function(){
        var card_id = $(this).attr('id');
        $.ajax({
            url: "/goblins/delete_card.php", 
            method: "POST",
            data: {del_id: card_id},
            success: function(result){
             $('li[id="' + card_id + '"]').fadeOut();
        }});
    });
});

这会加载php文件，因为成功正常。卡片已淡出，但当我重新加载页面时，卡片会返回并且不会从数据库中删除。我认为这是因为if (isset($_POST['del_id']))尚未返回true。谁能帮助我？太多了！

拉乌尔

Answer 1

如果您在成功的ajax请求后必须重新加载页面，则可以在成功函数上使用{{1}}，如：

{{1}}

Answer 2

将行ID添加为while循环中每个<li>元素的属性：

echo '<li id="'$row[id]'"class="card"><a href="'. $row["img"] .'"><img src="'. $row["img"] .'"/></a>';
        echo 'Card<br/><h4>' .$row["cardname"] . '</h4>Type<h4>' . $row["cardtype"] . ' - ' . $row["cardsubtype"]. '</h4></br>Serie<h4>' . $row["serie"]. '</h4>Rarity<h4>' . $row["rarity"]. '</h4>Manacost<h4>' . $row["manacost"].  '</h4>Color<h4>' . $row["color"]. '</h4>Artist<h4>' . $row["artist"]. '</h4>Power / Toughness<h4>' . $row["power"] . ' / ' . $row["toughness"] . '<br/>';
        echo '<div class="status" id="wanted">' . $row["want"] . '</div>';
        echo '<div class="status" id="favorited">' . $row["favorite"] . '</div>';
        echo '<div class="status" id="collectioned">' . $row["incollection"] . '</div>';
        echo '<div class="status del_wrapper" id="' . $row["id"] . '"><button id="'.$row['id'].'">Delete</button></div>';
        echo '</li>';

然后将删除脚本放在单独的php文件中，并在删除卡时使用AJAX调用它：

// DELETE SCRIPT (in separate file delete.php)
if (isset($_POST['del_id'])) {
    $del_id = $_POST['del_id'];
    $del_sql="DELETE FROM cards WHERE id='$del_id'";
    $del_result = $conn->query($del_sql);
    echo $del_result;
}

然后在删除单击时，使用AJAX调用delete.php脚本并成功，隐藏该卡的li元素（如果您还没有，请记住包含JQuery）：

$("button").click(function() {
    var card_id = $(this).attr('id');
    $.ajax({
        url: "delete.php",
        method: "POST",
        data:{'del_id':card_id},
        success: function() {
            $('li[id="' + card_id + '"]').hide();
        }
    });
});

单击“提交”按钮后，要使用AJAX刷新内容

2 个答案: