Question

大家好我是AJAX的新手，我正在开发像CRUD这样的DB列表，而且我在AJAX中使用的删除功能之一实际上删除了记录，但只是在手动刷新后不能同时反映，所以我需要你对AJAX的帮助。

list.php的

<?php 
    include "db.php";
    $sql = "SELECT * FROM users";
    $query = $conn->query($sql);
?>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>
    <script>
        $(document).ready(function() {
            $(document).on('click','#btn_delete',function(){
                var uid = $(this).data("id1");
                if(confirm('Are You Sure To Delete '+uid+' ?'))
                {
                $.ajax({
                    url: 'delete.php',
                    type: 'POST',
                    data: 'uid='+uid,
                    dataType: 'text',
                    success:function(data){
                        //alert(data);
                    }
                });
                }
            });
        });
    </script>
<table border="1">
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Contact</th>
        <th>Skills</th>
        <th>Edit</th>
    </tr>
        <?php
        while($row = $query->fetch_object()){
        //echo $row->name."<br>";
        ?>
    <tr>
        <td><?php echo $row->uid; ?></td>
        <td><?php echo $row->name; ?></td>
        <td><?php echo $row->contact; ?></td>
        <td><?php echo $row->skills; ?></td>
        <td id="edit">

            <button calss="delete_btn" type="submit" id="btn_delete" name="delete" value="DELETE" data-id1="<?php echo $row->uid; ?>">DELETE</button>
            <!-- <a href="delete.php" data-id2="<?php echo $row->uid; ?>" id="delete" alt="DELETE" >Delete</a> -->
            <a href="form.php?link=<?php echo $row->uid; ?>" value="<?php echo $row->uid; ?>" alt="UPDATE">Update</a>

        </td>
    </tr>
    <?php } ?>
</table>

每当我按下删除按钮时，它实际上会从数据库中删除记录，这意味着ajax工作但同时表不刷新，删除的条目保留在表中直到下次刷新。

Delete.php

<?php
    include "db.php";
    $uid = $_POST['uid'];
    $sql = "DELETE FROM users WHERE uid='".$uid."'";
    $conn->query($sql);
    $conn->close();
?>
<p id="check">Deleted</p>

Answer 1

您可以删除成功回调函数中的元素，如下所示：

$.ajax({
    url: 'delete.php',
    type: 'POST',
    data: 'uid='+uid,
    dataType: 'text',
    success:function(data){
        //if using jquery
        //$('tr').filter(':has(td:first:contains(' + uid + '))').remove();
        $('tr').filter(function() {
            return $(this).find('td:first').text() == uid;
        }).remove();
        //if not
        var table = document.getElementsByTagName('table')[0];
        var rows = table.getElementsByTagName('tr');
        for (var i = 0; i < rows.length; i++) {
            if (rows[i].children[0].textContent == uid) {
                table.removeChild(rows[i]);
            }    
        }
    }
});

Answer 2

我看到这段代码存在一些问题，目前只有部分或全部的答案，所以我想我会伸出援助之手：）

您在while循环中创建的动态行具有在所有删除按钮上具有静态ID的按钮。
- 这可能会导致问题，因为ID应该是唯一的。
- 你拼错了class。
- 我删除了ID，更正了课堂上的拼写，并更新了JavaScript以使用按钮类而不是ID。
由于按钮位于表格中，我们可以将其用作从表格中删除哪一行的标记。
- 这可以通过致电closest：var tr = $(this).closest("tr");
- 一旦AJAX成功，我们现在remove行tr.remove();
jQuery AJAX函数最近经历了一些更改，因为弃用了成功回调，然后在3.0中删除了请参阅弃用通知。
- 这会导致您的成功通话不会激发，因为它在3.0中不存在，而且从您的问题我们可以看到您使用的版本为3.2.1。
- 我已使用更新的电话替换回调。

以下是我提出的解决方案：

<script>
    $(document).ready(function() {
        $(document).on("click", ".btn_delete", function(){
            var tr = $(this).closest("tr");
            var uid = $(this).data("id1");

            if (confirm("Are You Sure To Delete " + uid + "?")) {
                $.ajax({
                    url: "delete.php",
                    type: "POST",
                    data: "uid=" + uid,
                    dataType: "text",
                    done: function(data){
                        tr.remove();
                    }
                });
            }
        });
    });
</script>

<table border="1">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Contact</th>
            <th>Skills</th>
            <th>Edit</th>
        </tr>
    </thead>
    <tbody>
        <?php
        while($row = $query->fetch_object()){
        //echo $row->name."<br>";
        ?>
        <tr>
            <td><?php echo $row->uid; ?></td>
            <td><?php echo $row->name; ?></td>
            <td><?php echo $row->contact; ?></td>
            <td><?php echo $row->skills; ?></td>
            <td id="edit">
                <button class="delete_btn" type="submit" name="delete" 
                    value="DELETE" data-id1="<?php echo $row->uid; ?>">DELETE</button>
                <a href="form.php?link=<?php echo $row->uid; ?>"
                    value="<?php echo $row->uid; ?>" alt="UPDATE">Update</a>
            </td>
        </tr>
    </tbody>
    <?php } ?>
</table>

另一方面，Delete.php中对MySql的PHP调用容易受到注入攻击，这里的一些文档在PHP < 5.5中见Example 5.50 An example SQL Injection Attack和PHP >= 5.5函数在5.5中已弃用。

Answer 3

您可以使用：

$.ajax({
                url: 'delete.php',
                type: 'POST',
                data: 'uid='+uid,
                dataType: 'text',
                success:function(data){
                    window.location.href = 'YOUR PAGE';
                }
            })

Answer 4

您可以在成功调用ajax后自动重新加载页面。试试这个：

           $.ajax({
                url: 'delete.php',
                type: 'POST',
                data: 'uid='+uid,
                dataType: 'text',
                success:function(data){
                    location.reload();
                }
            })

AJAX事件有效但不能在没有刷新的情况下同时反映PHP MYSQL结果。

4 个答案: