3

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

表名:登录

列:id、用户名、消息

评论.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";

  }

?>
4

9 回答 9

9

在您的 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();});
    }
  }

您传入idurl 并根据此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";

  }

?>
于 2013-04-10T05:48:56.317 回答
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,该目标元素是带有类删除的超链接。

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

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

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

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

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

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

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

你可以在这里下载。

于 2013-04-10T06:08:33.267 回答
1

在 javascript 更改

var dataString = 'id='+ id ; 

var dataString = 'mid='+ id ; 
于 2013-04-10T05:49:22.210 回答
0

我会这样做,更简单,更清洁:

删除.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。你应该使用你的。

而不是干杯!

于 2013-04-10T05:50:42.763 回答
0

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

于 2013-04-10T05:48:38.920 回答
0

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

  }

?>
于 2013-04-10T05:49:05.657 回答
0

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

var id = $(this).attr("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此链接的属性,在您的情况下 - 将页面滚动到顶部.

于 2013-04-10T05:49:06.863 回答
0

我在这里看到两个问题

  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;
    

    });

于 2013-04-10T05:51:17.843 回答
0

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

在您的 AJAX 函数中,您使用了变量 name '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']
于 2013-04-10T05:46:41.247 回答