【问题标题】:delete record in a table using jquery ajax [closed]使用jquery ajax删除表中的记录[关闭]
【发布时间】:2013-04-01 19:42:36
【问题描述】:

我正在学习 j 查询 Ajax 事件。我已使用 j 查询 Ajax 在 php 中插入和显示记录,但我无法删除我编写的代码但它不工作的记录,我不想再次加载表。请帮忙

表名:登录

列:id、用户名、消息

comment.php

    <script type="text/javascript">
$(document).ready(function(e) {
 function showComment(){
     $.ajax({
     type:"post",
      url:"process2.php",
      data:"action=showcomment",
      success:function(data){
       $("#flash").html(data);
      }
    });
   }
showComment(); 

//Insert records 
$("#Submit").click(function(){

            if($(":text").val().length==0)
            {
               // $(this).next().html("Field needs filling");
               $(":text").after('<span class="errorkeyup">Field cannot be empty</span>');
                //return false;
                success = false;
            }
            else
            {
                var name=$("#name").val();
                var message=$("#message").val();
                $.ajax({
                  type:"post",
                   url:"process2.php",
                   data:"name="+name+"&message="+message+"&action=addcomment",                            
                  success:function(data){
                  showComment();                                  
                 } 
                }); 
            }

  });

$('.delete').click(function(e){
    e.stopPropagation();
            var deleteID = $(this).attr('name');
            var row = deleteID;
            $.ajax({
                type: "POST",
                url: "delete.php?deleteID=" + deleteID,
                data: "deleteID="+ deleteID,
                success: function(result){
                    $('#row'+row).fadeOut('fast');
                }
            });

        });     
});



</script>
    </head>

    <body>
    <form method="post" name="form" action="">
<div id="content">
 Name :    <input type="text" name="name" id="name"/>
               </br>
               Message : <input type="text" name="message" id="message" />
               </br>
               </div>
<input type="button" value="Submit" id="Submit">
</form>
</div>
<div id="flash"></div>

            </form>
    </body>

进程.php

  <?php
  mysql_connect("localhost","root","dot1235");
  mysql_select_db("chitra");


  $action=$_POST["action"];

  if($action=="showcomment"){
     $show=mysql_query("Select * from login order by id ASC");
 echo "<table border=1 id=t1>";

   echo "<tr>";
   echo "<td>SrNo.</td>";
   echo "<td>Name</td>";
   echo "<td>Message</td>";
   echo "<td>Delete</td>";   
   echo "</tr>";
   $i=1;
     while($row=mysql_fetch_array($show)){
        //echo "<li><b>$row[name]</b> : $row[message]</li>";
        echo "<tr>";
    echo"<td>".$i."</td>";
    echo "<td>" .$row['username'] ."</td>"; 
    echo "<td>" .$row['message'] ."</td>";
    echo "<td><a href='javascript:void(0)'><img src=delete.png class=delete name=".$row[id]."</a></td>" ;
    echo "</tr>";
    $i++;
     }
     echo"</table>";
  }
  else if($action=="addcomment"){
    $name=$_POST["name"];
    $message=$_POST["message"];

     $query=mysql_query("insert into login(username,message) values('$name','$message') ");

     if($query){
        echo "Your comment has been sent";
     }
     else{
        echo "Error in sending your comment";
     }
  }


?>

删除.php

<?php
include("connection.php");
 if(isset($_POST['id']))
  {
   $id = $_POST['id'];
   $id = mysql_escape_String($id);
   $delquery=mysql_query("delete from login where id=$id") or die(mysql_error());
   //echo "Record deleted";

  }

?>

【问题讨论】:

  • 您是否检查过您在 delete.php 页面中获得了 $_POST['mid'] 吗?

标签: php jquery partial-page-refresh


【解决方案1】:

在您的 delete.php 页面中存在小错误。

    $(".delete_button").click(function() {
var id = $(this).attr("mid");
var dataString = 'id='+ id ;
var parent = $(this).parent();

$.ajax({
   type: "POST",
   url: "delete.php",
   data: dataString,
   cache: false,

   success: function()
   {
    if(id % 2)
    {
    parent.fadeOut('slow', function() {$(this).remove();});
    }
    else
    {
    parent.slideUp('slow', function() {$(this).remove();});
    }
  }

你在 url 中传递 id 并得到 mid 所以根据这个改变你的delet.php

<?php
include("connection.php");
 if(isset($_POST['id']))  //mid to id
  {
   $id = $_POST['id']; //mid to id
   $id = mysql_escape_String($id);
   $delquery=mysql_query("delete from login where mid=$id") or die(mysql_error());
   //echo "Record deleted";

  }

?>

【讨论】:

    【解决方案2】:

    这是用 JQuery 编码的整个逻辑的核心:

    $(document).ready(function()
    {
        $('table#delTable td a.delete').click(function()
        {
            if (confirm("Are you sure you want to delete this row?"))
            {
                var id = $(this).parent().parent().attr('id');
                var data = 'id=' + id ;
                var parent = $(this).parent().parent();
    
                $.ajax(
                {
                       type: "POST",
                       url: "delete_row.php",
                       data: data,
                       cache: false,
    
                       success: function()
                       {
                        parent.fadeOut('slow', function() {$(this).remove();});
                       }
                 });
            }
        });
    
        // style the table with alternate colors
        // sets specified color for every odd row
        $('table#delTable tr:odd').css('background',' #FFFFFF');
    });
    

    让我们用分而治之的方法来看看这里发生了什么。

    $(document).ready(function()
    

    这是 JQuery 的函数,它会在文档准备好后立即运行。这类似于 onload 事件,但 JQuery 的功能要快得多。所以我们希望能够在页面准备好时运行这段代码。

    $('table#delTable td a.delete').click(function()
    

    如果您曾研究过 CSS 选择器,那么上面一行对您来说应该不会太神秘。您可以使用相同的语法来使用 JQuery 来定位元素。基本上,它表示带有 id delTable 和 TD 的表在单击时具有带有类删除的超链接,运行此函数中指定的代码。因此,当单击 id 为 delTable 的表中的 TD 中名为 delete 的类的超链接时,将执行指定的代码。

    if (confirm("Are you sure you want to delete this row?"))
    

    我们希望能够确认用户是否真的想删除一行。

    var id = $(this).parent().parent().attr('id');
    var data = 'id=' + id ;
    var parent = $(this).parent().parent();
    

    请记住,在 JQuery 中,$(this) 总是指代目标元素,在我们的例子中是带有类删除的超链接。 attr 用于获取或设置标签的属性。所以 id 变量指的是这个超链接的父级,即 TD,然后是这个 TD 的父级,即 TR。所以这里我们得到了这个TR的id属性。在 HTML 代码中,我们会将每一行的主键字段分配给这些 TR 以识别和删除记录。 data 变量使数据作为使用 JQuery 发出的 ajax 请求的一部分发送。父变量引用每个包含目标元素的TR,该目标元素与类delete超链接。

    $.ajax(
    {
           type: "POST",
           url: "delete_row.php",
           data: data,
           cache: false,
    
           success: function()
           {
            parent.fadeOut('slow', function() {$(this).remove();});
           }
     });
    

    $.ajax 函数用于发送 ajax 请求。在它的参数中,类型是指请求的方法,无论是 POST 还是 GET,url 是指将获取 ajax 请求数据并返回一些响应的脚本,data 是指作为 ajax 请求的一部分发送的数据,类似于查询字符串表单中,缓存控制请求是否打开或关闭缓存,因为在 IE 中请求被缓存,如果请求成功,成功函数(也是 $.ajax 函数的属性)会运行其中的代码。

    parent.fadeOut('slow', function() {$(this).remove();});
    

    如前所述,在我们的案例中,parent 指的是 TR。 fadeOut 函数需要两个参数;动画速度和要执行的功能。所以这条线的作用是它通过淡出它来删除父链接,然后使用 remove() 方法删除目标链接。通过这种方式,整行都消失了,并且在 ajax 请求的帮助下,数据库中的记录也被删除了。这里我们使用了JQuery的fadeOut动画功能,但是还有更多的动画可用。

    $('table#delTable tr:odd').css('background',' #FFFFFF');
    

    这行表示对id为delTable的表的每个奇数TR应用背景样式。现在因为我们的代码在页面准备就绪时执行,因此我们的表格将为每个奇数行提供交替的颜色。

    你可以下载它here

    【讨论】:

      【解决方案3】:

      在javascript中改变

      var dataString = 'id='+ id ; 
      

      var dataString = 'mid='+ id ; 
      

      【讨论】:

        【解决方案4】:

        POST values 不同。像这样更改delete.php POST values

        <?php
        include("connection.php");
         if(isset($_POST['id']))   // changed into 'id'
          {
           $id = $_POST['mid'];
           $id = mysql_escape_String($id);
           $delquery=mysql_query("delete from login where mid=$id") or die(mysql_error());
           //echo "Record deleted";
        
          }
        
        ?>
        

        【讨论】:

          【解决方案5】:

          伙计,您的 javascript 代码中的删除处理程序中有以下行:

          var id = $(this).attr("mid");
          

          因此,您从删除链接中获取了一个不存在的“mid”属性。

          在你的process.php

          <td><a href="#" id="<?php echo $mid; ?>" class="delete_button">Delete</a></td>
          

          您显然应该将.attr('id') 分配给id 变量。

          此外,正如其他评论者所指出的,您的 delete.php 脚本需要一个 $_POST['mid'] 参数,但您向它发送了一个 id

          为什么会有奇怪的命名?只需放下这个“中间”的东西并在任何地方使用“id”。

          顺便说一句,如果您为 HTML 链接分配自定义点击处理程序,最好在处理程序中首先调用event.preventDefault(),因为否则浏览器将尝试遵循此链接的href 属性,在您的情况下 - 将页面滚动到顶部。

          【讨论】:

          • 感谢指出我的错误,但仍然没有成功
          • 好吧,无论如何,您的问题缺少关键信息:在控制台输出中显示什么 Firebug 或 Chrome 开发人员工具?你试过console.debugprint_r 有问题的变量吗?
          【解决方案6】:

          我在这里看到两个问题

          1. 服务器端变量称为mid,您将在其中发送id
          2. parent 需要指向 tr 在您的情况下它指向 td

            $(".delete_button").click(function() { var id = $(this).attr("mid"); var dataString = 'mid=' + id; var parent = $(this).closest('tr');

            $.ajax({
                        type : "POST",
                        url : "delete.php",
                        data : dataString,
                        cache : false,
            
                        success : function() {
                            if (id % 2) {
                                parent.fadeOut('slow', function() {
                                            $(this).remove();
                                        });
                            } else {
                                parent.slideUp('slow', function() {
                                            $(this).remove();
                                        });
                            }
                        }
            
                    });
            
            return false;
            

            });

          【讨论】:

            【解决方案7】:

            我认为问题出在变量名上。

            在您的 AJAX 函数中,您使用了变量名 'id'

            $(".delete_button").click(function() {
              var id = $(this).attr("mid");
              var dataString = 'id='+ id ; // Here
              var parent = $(this).parent();
            

            但在删除过程中,你是从$_POST['mid']获取的

            if(isset($_POST['mid'])) // Change this to $_POST['id']
              {
                $id = $_POST['mid']; // Change this to $_POST['id']
            

            【讨论】:

              【解决方案8】:

              delete.php 中使用 $id = $_POST['id'] 而不是 $_POST['mid'],那么它应该可以工作。

              【讨论】:

                【解决方案9】:

                我会这样做,更简单更干净:

                删除.php

                <?php
                
                include("connection.php");
                if(!isset($_REQUEST['action'])) die("Invalid request");
                if(!isset($_REQUEST['id'])) die("Invalid Comment ID");
                $action = $_REQUEST['action'];
                if($action == 'remove_comment') {
                    $id = (int)$_REQUEST['id'];
                    $delquery = mysql_query("DELETE FROM `login` WHERE mid=$id") or die(mysql_error());
                    echo 1;
                }
                ?>
                

                js 脚本:

                function RemoveComment(comment_id) {
                    var row = $("table#comments tr#commentid-"+comment_id);
                    if(row.length < 1) return false; //if element doesnt exist on our page
                    $.post("http://yourhost/delete.php", { action: "remove_comment", id: comment_id },
                    function(response) {
                        if(response == 1) row.fadeOut();
                        else alert(response);
                    });
                }
                

                编辑:

                $(".delete_button").click(function() {
                var id = $(this).attr("id");
                var dataString = 'id='+ id ;
                var parent = $(this).parent();
                

                我的“var row”在您的代码中是“var parent”,我只是使用了不同的元素名称和 ID。你应该使用你的。

                而不是 干杯!

                【讨论】:

                • 感谢我尝试过的解决方案,但每当我点击删除链接时,它都会给我无效请求
                • 尝试将 $_REQUEST 替换为 $_POST。 _REQUEST 在服务器上不起作用是非常奇怪和罕见的事情(在我开发网络应用程序的所有这些年中发生过一次)
                • 你能解释一下 var row = $("table#cmets tr#commentid-"+comment_id);根据我的代码你的代码?
                猜你喜欢
                • 1970-01-01
                • 2012-12-15
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 2012-04-23
                • 2012-11-28
                • 1970-01-01
                • 1970-01-01
                相关资源
                最近更新 更多