ajax删除按钮从数据库中删除但我必须重新加载页面才能看到更改?

时间:2014-11-15 19:42:58

标签: ajax

第一页

<script>
    $(document).ready(function(){         
    $(".delete_buttom").click(function(){  
    var x = $(this).attr('id');  
    click_delete(x);  
    });  

    function click_delete(x){  
    var commentId = x;  
    $.post("ajax_comments3.php",  
   {  
        task : "this is the task",  
        commentId : commentId  
    }  
    ).success(  
        function(data){  
             $('.li_style').remove(data);  
        }
    ).error(function(){  
       alert("404 not found");  
        });  
}  
</script>  

html代码

<ul class="ul_style">                  
<?php while($row = mysqli_fetch_array($excute_select)){  

if(!empty($row['commet_text'])) {  ?>  

    <li class="li_style" >  

   <img src="profile.jpg" class="user_img_src" />  

   <h5 class="username"><?php echo "mohamed daif" ;?></h5>  

   <div class="delete_buttom" id="<?php echo $row['comment_id'] ; ?>">X</div>  

   <div class="user_comment"><?php echo $row['commet_text'] ; ?> </div>  

   </li>  

  <?php }  

  }   ?>    

 </ul>    
html代码中的

我使用php从数据库中获取数据

第二页

<?php  
$host_name = "localhost";  
$database_user = "root";  
$password = "";  
$database_name = "comments";  
if(isset($_POST["task"]) && $_POST["task"] == "this is the task"){  
    $commentId = $_POST["commentId"];  
    $connection = mysqli_connect($host_name,$database_user,$password,$database_name) 
        or die("connection failed");  
   $delete_query = "delete from comment where comment_id = $commentId ";  
   $excute_delete = mysqli_query($connection,$delete_query) or die("delete query error");  
}  
?>  

它工作正常并从数据库中删除但在浏览器中,当我单击删除按钮时,它会隐藏所有其他注释,直到我重新加载页面以查看更改

如果我的问题中有任何不清楚的地方让我认识那些人

1 个答案:

答案 0 :(得分:0)

为您的列表元素添加id标记,如

<li id="comment_<?php echo $row['comment_id'] ; ?>" class="li_style" >  

然后将您的脚本更改为:

<script>
    $(document).ready(function(){         
    $(".delete_buttom").click(function(){  
    var x = $(this).attr('id');  
    click_delete(x);  
    });  

    function click_delete(commentId){ 
    $.post("ajax_comments3.php",  
   {  
        task : "this is the task",  
        commentId : commentId  
    }  
    ).success(  
        function(data){  
             $('#comment_' + commentId).remove();  
        }
    ).error(function(){  
       alert("404 not found");  
        });  
}  
</script>