使用 jQuery Ajax 删除 mySQL 表行

Deleting mySQL Table Row with jQuery Ajax(使用 jQuery Ajax 删除 mySQL 表行)
本文介绍了使用 jQuery Ajax 删除 mySQL 表行的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

我正在尝试这样做,因此当我单击跨度图标时,它会将 article_id 发送到我的 php sql 页面,该页面将删除我的文章,我正在使用 jQuery Ajax 发送 id,该 id 在 jQuery 上发送没问题一边但是在 http post 请求完成后,我的表格行仍然存在,谁能看看我的代码是否有问题,在此先感谢!

  $row){?><div class="row" id="page_<?php echo $row['art_id']; ?>"><div class="第一列"><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垃圾"></span>

<div class="第二列"><p><?php echo $row['art_title'];?></p></div><div class="第二列"><p><?php echo $row['art_company'];?></p></div><div class="第二列"><p><?php echo $row['cat_name'];?></p></div><div class="第一列"><p><?php echo $row['art_date'];?></p></div><div class="第一列"><p><?php echo $row['art_rating'];?></p></div><div class="第一列"><p><?php echo $row['art_price'];?></p></div><div class="第一列"><p><?php echo $row['sta_name'];?></p></div><div class="第一列"><a href=""><span class="icon-small star"></span></a></div>

<?php}}别的 {回声失败";}?>jQuery$(document).ready(function(){$(".trash").click(function(){var del_id = $(this).attr('id');$.ajax({类型:'POST',url:'ajax-delete.php',数据:'delete_id='+del_id,成功:功能(数据){如果(数据){}别的 {}}});});});PHP mySQL 语句if(isset($_POST['delete_id'])) {$sql_articles = "DELETE FROM app_articles WHERE art_id = ".$_POST['delete_id'];如果(查询($sql_articles)){回声是";}别的 {回声否";}}别的 {回声失败";}?>

解决方案

你的行仍然存在的原因是因为 AJAX 调用没有刷新页面.如果您想删除您的行,您必须执行以下操作:

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

 $(".trash").click(function(){var del_id = $(this).attr('id');var rowElement = $(this).parent().parent();//抓取行$.ajax({类型:'POST',url:'ajax-delete.php',数据:{delete_id:del_id},成功:功能(数据){如果(数据==是"){rowElement.fadeOut(500).remove();}别的 {}}});

替换:

 数据:'delete_id='+del_id,

与:

 数据:delete_id:del_id,

I'm trying to make it so when I click a span icon it will send the article_id to my php sql page which deletes my article, I'm using jQuery Ajax to send the id, the id sends alright on the jQuery side but after the http post request is done my table row is still there, can anyone see if somethings wrong with my code, thanks in advance!

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


?>

解决方案

the reason your row is still there because AJAX call does not refresh the page. If you want your row to be removed you gotta do something like:

ASSUMING that your span click event is inside the row

 $(".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 {

                }   
            }
    });

Replace:

            data: 'delete_id='+del_id,

with:

            data: delete_id : del_id,

这篇关于使用 jQuery Ajax 删除 mySQL 表行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益,请联系我们,我们会在确认后第一时间进行删除!

相关文档推荐

DeepL的翻译效果还是很强大的,如果我们要用php实现DeepL翻译调用,该怎么办呢?以下是代码示例,希望能够帮到需要的朋友。 在这里需要注意,这个DeepL的账户和api申请比较难,不支持中国大陆申请,需要拥有香港或者海外信用卡才行,没账号的话,目前某宝可以
PHP通过phpspreadsheet导入Excel日期,导入系统后,全部变为了4开头的几位数字,这是为什么呢?原因很简单,将Excel的时间设置问文本,我们就能看到该日期本来的数值,上图对应的数值为: 要怎么解决呢?进行数据转换就行,这里可以封装方法,或者用第三方的
mediatemple - can#39;t send email using codeigniter(mediatemple - 无法使用 codeigniter 发送电子邮件)
Laravel Gmail Configuration Error(Laravel Gmail 配置错误)
Problem with using PHPMailer for SMTP(将 PHPMailer 用于 SMTP 的问题)
Issue on how to setup SMTP using PHPMailer in GoDaddy server(关于如何在 GoDaddy 服务器中使用 PHPMailer 设置 SMTP 的问题)