1

我正在使用 jQuery 和 Ajax 删除记录。我编写的代码删除了一条记录，但再次加载了 HTML 表，这意味着我想避免页面刷新。

这是我的代码：

评论.php

<script type="text/javascript">
$(document).ready(function(){
    function loadList(){
        $.ajax({
            url: "load_list.php",
            cache: false,
            success : function(html){
                $(".name_list").html(html);
            }
        });
    }
    loadList();

    $("#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:"save_list.php",
                   data:"name="+name+"&message="+message,                             
                  success:function(data){
                 loadList();                                
                 } 
                }); 
                return false;
            }
    });
    $(".delete_button").on("click", function(){
        //this deletes the row clicked on with an alert and then reloads the list
        var id = $(this).attr("id");
        /*var x=window.confirm("Are you sure you want to delete this item?")
        if (x==true){*/
            $.ajax({
                type: "POST",
                url: "delete.php",
                data: "id="+ id,
                success: function(){
                    loadList();
                }
            });
       // }
        return false;
    });

});
</script>
</head>

<body>
<div id="form">

<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 class="name_list"></div>

</body>

加载列表.php

<?php
include('connection.php');
$sqlnew = 'Select * from login order by id ASC';
    $res = mysql_query($sqlnew);
    echo'<table border="1">';
    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($res))
    {
        echo '<tr>';
        echo'<td>'.$i.'</td>';
        echo'<td>'.$row['username'].'</td>';
        echo '<td>'.$row['message'].'</td>';
        echo"<td>
          <a id='".$row['id']."' href=delete.php?id=".$row['id']."&type=Delete class=delete_button>Delete</a></td>";
        echo"<td>
          <a id='".$row['id']."' href=comment.php?id=".$row['id']."&type=edit class=edit_button>Edit</a></td>";         
        echo '</tr>';
        $i++;

    }
    echo'</table>';

?>

删除.php

<?php
include('connection.php');

  if(isset($_REQUEST["id"]))
  {
  $cmd=mysql_query("delete from login where id=" .$_REQUEST["id"] .";");
   header("location: comment.php");
  }

?>
4

2 回答 2

0

当你$.ajax()调用 for$('.delete_button')时，你不应该在那里调用你的loadList()函数，因为那是重新加载表的原因，而你应该只删除从表中删除的一个条目。

也许您可以使用类似于此的内容将其删除，放置在删除按钮成功回调中：

$.ajax({
    type: "POST",
    url: "delete.php",
    data: "id="+ id,
    success: function()
    {
        $(this).parent().parent().remove();
    }
});
于 2013-04-13T02:11:43.817 回答
0 
<?php
include('connection.php');

  if(isset($_REQUEST["id"]))
  {
  $cmd=mysql_query("delete from login where id=" .$_REQUEST["id"] .";");
   header("location: comment.php");
  }

?>

在此代码中删除行

header("location: comment.php");

最终代码是，

<?php
include('connection.php');

  if(isset($_REQUEST["id"]))
  {
   $cmd=mysql_query("delete from login where id=" .$_REQUEST["id"] .";");
   echo '1';
  } else {
   echo '0';
  }

  exit;
?>

在删除函数中，执行删除查询后，需要回显“1”或“0”。让我们说回声'1'；成功删除时，删除不成功时回显“0”。因此，基于 1 或 0，您可以从表中删除那些已删除的行，

$(".delete_button").on("click", function(){ //这会删除带有警报单击的行，然后重新加载列表 var obj = $(this); var id = obj.attr(" ID”）;

    /*var x=window.confirm("Are you sure you want to delete this item?")
    if (x==true){*/
        $.ajax({
            type: "POST",
            url: "delete.php",
            data: "id="+ id,
            success: function(response){
                if(response == '1') {
                      obj.parent.remove();
                }
            }
        });
   // }
    return false;
});
于 2013-04-13T04:30:17.033 回答