要在单击submit按钮后使用AJAX刷新内容

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

在while循环中添加行id作为每个<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();
        }
    });
});

Answer 2

如果必须在ajax请求成功后重新加载页面，则可以在成功函数上使用location.reload();，如下所示：

$.ajax({
  url: "test.html",
  context: document.body
}).done(function() {
  location.reload();
});