Php 使用jquery ajax删除记录，但再次加载表_Php_Jquery

Php 使用jquery ajax删除记录，但再次加载表

php jquery

Php 使用jquery ajax删除记录，但再次加载表,php,jquery,Php,Jquery,我正在使用jQuery和Ajax删除记录。我编写的代码删除了一条记录，但HTML表再次加载，这意味着我希望避免页面刷新这是我的密码： comment.php <script type="text/javascript"> $(document).ready(function(){ function loadList(){ $.ajax({ url: "load_list.php", cache: false,

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

这是我的密码：

comment.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
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
include('connection.php');

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

?>


$（文档）.ready（函数（）{
函数loadList（）{
$.ajax({
url:“load_list.php”，
cache:false，
成功：函数（html）{
$（“.name_list”）.html（html）；
}
});
}
loadList（）；
$（“#提交”）。单击（函数（）{
if（$（“：text”）.val（）.length==0）
{
//$（this.next（）.html（“字段需要填充”）；
$（“：text”）.after（'字段不能为空'）；
//返回false；
成功=错误；
}
其他的
{
var name=$（“#name”）.val（）；
var message=$（“#message”）.val（）；
$.ajax({
类型：“post”，
url:“save_list.php”，
数据：“name=“+name+”&message=“+message，
成功：功能（数据）{
loadList（）；
} 
}); 
返回false；
}
});
$（“.delete_按钮”）。在（“单击”，函数（）{
//这将删除通过警报单击的行，然后重新加载列表
var id=$（this.attr（“id”）；
/*var x=window.confirm（“确实要删除此项目吗？”）
如果（x==true）{*/
$.ajax({
类型：“POST”，
url:“delete.php”，
数据：“id=”+id，
成功：函数（）{
loadList（）；
}
});
// }
返回false；
});
});
姓名：


信息：

loadlist.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
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
include('connection.php');

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

?>

delete.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
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
include('connection.php');

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

?>

当您调用

$.ajax（）

调用

$（'.delete_按钮'）

时，您不应该在那里调用

loadList（）

函数，因为这是重新加载表的功能，而应该从表中删除一个条目

也许您可以使用类似的方法将其删除，将其放置在delete button success回调中：

$.ajax({
    type: "POST",
    url: "delete.php",
    data: "id="+ id,
    success: function()
    {
        $(this).parent().parent().remove();
    }
});

最终代码是

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

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

  exit;
?>

此代码中存在安全漏洞。

标题（位置…

重定向页面提交时希望页面发生什么？是否希望它重新加载表（以显示记录已被删除）？现在出现了什么问题，整个页面正在重新加载？您的

a.delete_按钮上仍然有href
属性。看起来您的单击事件正在通过ajax调用触发以删除记录，然后使用delete.php？id=“.$row['id']”进行刷新（&type=delete
调用。我可能错了，但如果我删除标题（位置…），我会尝试将其更改为href='#'
@HugoDozois然后页面被发送到delete.php我想在单击delete链接时删除特定行，但重新加载整个表，然后显示更改。您能建议如何执行吗？我尝试了您的解决方案，当我单击delete时，它会将我带到delete.php并显示1它不会停留在comment.php页面上，如果我从href标记中删除delete.php，它会显示不行