doucao1888
doucao1888
2015-06-05 16:32

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

Currently I have a database filled with collectible cards. I'm using php to display the cards from my database and this is working fine. The output includes a button to delete that specific card. The AJAX works when clicked but the card is not removed.

I have index.php which is just a html page with:

<?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>";
}
?>

In this script I fetch all the cards and display them. Also there is included a button to delete a specific card when pressed.

The php file for deleteing is 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);
}
?>

I've tested if the file is loaded by echoing a simple text.

With the help of the ajax code from one of the commentors I've got this far:

$(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();
        }});
    });
});

This loads the php file because success is working. The card is faded out but when I reload the page the card returns and is not deleted from the database. I figure it's because if (isset($_POST['del_id'])) is not returning true yet. Who can help me out? Much apreciated!

Raoul

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • doujiang1993 doujiang1993 6年前

    Add the row id as an attribute of each <li> element in your while loop:

    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>';
    

    Then put your delete script in a separate php file and call it with AJAX when deleting a card:

    // 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;
    }
    

    Then on delete click, call the delete.php script with AJAX and on success, hide the li element for that card (remember to include JQuery if you haven't already):

    $("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();
            }
        });
    });
    
    点赞 评论 复制链接分享
  • duanlieshuang5330 duanlieshuang5330 6年前

    If you have to reload page after successful ajax request, you can use location.reload(); on success function like:

    $.ajax({
      url: "test.html",
      context: document.body
    }).done(function() {
      location.reload();
    });
    
    点赞 评论 复制链接分享

相关推荐