使用 jQuery Ajax 删除 mySQL 表行

Posted 2023-02-24

【中文标题】使用 jQuery Ajax 删除 mySQL 表行

【英文标题】：Deleting mySQL Table Row with jQuery Ajax

【发布时间】：2013-03-15 11:26:33

【问题描述】：

我正在尝试这样做，所以当我单击 span 图标时，它会将 article_id 发送到我的 php sql 页面，这会删除我的文章，我正在使用 jQuery Ajax 发送 id，id 在 jQuery 上发送正常但是在http post请求完成后，我的表格行仍然存在，任何人都可以查看我的代码是否有问题，提前谢谢！

    <?php
        $sql_categories = "SELECT art_id, art_title, art_company, art_cat_id, art_sta_id, art_date, art_rating, art_price, cat_id, cat_name, sta_id, sta_name
                FROM app_articles LEFT JOIN app_categories
                ON app_articles.art_cat_id = app_categories.cat_id
                LEFT JOIN app_status
                ON app_articles.art_sta_id = app_status.sta_id
                ORDER BY art_order ASC"; 

            if($result = query($sql_categories))
                $list = array();

                while($data = mysqli_fetch_assoc($result))
                    array_push($list, $data);
                

                foreach($list as $i => $row) 
                ?>
                    <div class="row" id="page_<?php echo $row['art_id']; ?>">
                        <div class="column one">
                            <span class="icon-small move"></span>
                            <a href="edit-article.php?art_id=<?php echo $row['art_id']; ?>"><span class="icon-small edit"></span></a>
                            <span id="<?php echo $row['art_id']; ?>" class="icon-small trash"></span>
                        </div>
                        <div class="column two"><p><?php echo $row['art_title']; ?></p></div>
                        <div class="column two"><p><?php echo $row['art_company']; ?></p></div>
                        <div class="column two"><p><?php echo $row['cat_name']; ?></p></div>
                        <div class="column one"><p><?php echo $row['art_date']; ?></p></div>
                        <div class="column one"><p><?php echo $row['art_rating']; ?></p></div>
                        <div class="column one"><p><?php echo $row['art_price']; ?></p></div>
                        <div class="column one"><p><?php echo $row['sta_name']; ?></p></div>
                        <div class="column one"><a href=""><span class="icon-small star"></span></a></div>
                    </div>
                <?php
                
            
            else 
                echo "FAIL";
            
        ?>


jQuery

        $(document).ready(function()

                $(".trash").click(function()

            var del_id = $(this).attr('id');

            $.ajax(
                type:'POST',
                url:'ajax-delete.php',
                data: 'delete_id='+del_id,
                success:function(data) 
                    if(data) 

                     
                    else 

                       
                

            ); 
        );

    );


PHP mySQL Statement

    if(isset($_POST['delete_id'])) 

        $sql_articles = "DELETE FROM app_articles WHERE art_id = ".$_POST['delete_id'];

        if(query($sql_articles)) 
            echo "YES";
        
        else 
            echo "NO";
        
    
else 
    echo "FAIL";



?>

【参考方案1】：

您的行仍然存在的原因是因为 AJAX 调用不会刷新页面。如果您希望删除您的行，您必须执行以下操作：

假设您的跨度点击事件在行内

 $(".trash").click(function()
   var del_id = $(this).attr('id');
   var rowElement = $(this).parent().parent(); //grab the row

   $.ajax(
            type:'POST',
            url:'ajax-delete.php',
            data: delete_id : del_id,
            success:function(data) 
                if(data == "YES") 
                   rowElement.fadeOut(500).remove();
                 
                else 

                   
            
    );

替换：

            data: 'delete_id='+del_id,

与：

            data: delete_id : del_id,

【讨论】：

@GGio 谢谢，但我的问题是从实际数据库中删除它，因为我正确发送了我需要的数据（jQuery Ajax）并且我在我的 sql 页面中正确接收它？因为它不会从数据库中删除它。

非常感谢您，这是我很困惑的部分，非常感谢您的时间！非常感谢！