Question

我正在尝试使用php为网站创建添加/删除/编辑帖子系统。我有添加工作，所以当用户输入信息时，它会被添加到数据库中，然后使用ajax异步添加到页面上。我想要一个类似的功能，也可以异步删除。现在，当我点击删除时，只有最旧的帖子在刷新页面后才会被删除。一旦我点击删除按钮这是我的目标，它不会删除帖子。这就是我到目前为止所拥有的。 home.php是我的表单，它收集信息并打印出数据库中的信息。 handledelete.php是处理删除的地方。

home.php

<script>
    $(function() {
        $('#deleteButton').click(function(event) {
            event.preventDefault();

            $.ajax({
                type: "GET",
                url: "handle_delete.php",
                data : { entry_id : $(this).attr('data-id') },
                beforeSend: function(){
                }
                , complete: function(){
                }
                , success: function(html){
                    $("#show_entries").append(html);
                }
            });
        });
    });

</script>

<div id="entry">
    <form method="GET" action="handle_insert.php">
        <table align="center" width="30%" border="0">
            <tr>
                <td><input type="text" name="activity" id="activity" placeholder="Activity" required /></td>
            </tr>
            <tr>
                <td><input type="text" name="duration" id="duration" placeholder="Duration (hours)" required /></td>
            </tr>
            <tr>
                <td><input type="text" name="date" id="date_" placeholder="Date (YYYY-MM-DD)" required /></td>
            </tr>
            <tr>
                <td><button type="submit" name="submitButton" id="submitButton">Add input</button></td>
            </tr>

        </table>
    </form>
</div>

<!-- shows the previous entries and adds on new entries-->

<div id="show_entries">
    <?php
        $userID = $_SESSION["user"];
        $link = mysqli_connect('localhost', 'oviya', '', 'userAccounts');
        $query="SELECT * FROM dataTable WHERE user_id='$userID'";
        $results = mysqli_query($link,$query);

        while ($row = mysqli_fetch_assoc($results)) {
            echo '<div class="output" >';
                $entry_id = $row["entry_id"];
                $output= $row["activity"];
                echo "Activity: ";
                echo htmlspecialchars($output ,ENT_QUOTES,'UTF-8')."<br>"."<br>";
                $output= $row["duration"];
                echo "Duration: ";
                echo htmlspecialchars($output ,ENT_QUOTES,'UTF-8')." hrs"."<br>"."<br>";
                $output= $row["date_"];
                echo "Date: ";
                echo htmlspecialchars($output ,ENT_QUOTES,'UTF-8')."<br>"."<br>";

                echo '<button type="submit" name="deleteButton" data-id='.$entry_id.' id= "deleteButton">Delete</button>';
               //echo '<button type="submit" name="editButton" data-id='.$entry_id.' id="editButton">Edit</button>';
            echo '</div>';
        }

    ?>
</div>

handle_delete.php

session_start();
$user = 'oviya';
$password = '';
$db = 'userAccounts';
$host = 'localhost';
$port = 3306;

$link = mysqli_connect($host, $user, $password, $db);
mysqli_query($link,"GRANT ALL ON comment_schema TO 'oviya'@'localhost'");

if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}

if(!empty($_GET["entry_id"])){
    $entry_id = mysqli_real_escape_string($link, $_GET["entry_id"]);

    $sql = "DELETE FROM dataTable WHERE entry_id = '$entry_id'";
    $result = mysqli_query($link, $sql);

    die();
    mysqli_close($link);

}

Answer 1

这一行是问题所在。如果您的AJAX调用返回HTML，它会添加元素，它不是

$("#show_entries").append(html);

相反，您要删除已删除的元素，您可以直接引用该元素并从DOM中remove：

$('#deleteButton').click(function(event) {
    event.preventDefault();
    // Get a reference to the whole row element.
    var row = $(this).parent();

    $.ajax({
        type: "GET",
        url: "handle_delete.php",
        data : { entry_id : $(this).attr('data-id') },
        success: function(html){
            // Remove the row
            row.remove();
        }
    });
});

ajax异步删除帖子 - php

1 个答案: