如何在javascript和ajax中删除注释



我正试图为我正在开发的注释系统编写一个简单的删除函数。注释存储在一个数据库中,每个注释都有一个cid,该cid会自动递增。我注意到,用户只能删除他/她写的第一条评论,但当用户写了两条评论并在第二条上按delete时,评论无法删除,有人能帮我解决这个问题吗。这是我的密码。谢谢你的帮助。

这是我的meatballs.php文件,我在其中加载了注释。

<div class = "page" id = "comments">
<p class = "style">Comments</p>
<button class="btn" id="load-comments">See Previous Comments</button><br> 
<br>
<?php
if(isset($_SESSION['u_id'])){
echo "  <input type = 'hidden' id = 'uid' value = '".$_SESSION['u_uid']."'>
<input type = 'hidden' id = 'date' value = '".date('Y-m-d H:i:s')."'>
<textarea id = 'message'></textarea><br>
<button class = 'btn' type = 'submit' id = 'meatballsSubmit'>Comment</button>";
}
else{
echo "<p>Please log in to comment</p>";}
?>
</div><br>
<script>
$(document).ready(function(){
$("#load-comments").click(function(){
document.getElementById('#comments').innerHTML=
$("#comments").load("getComments.php");
});
});
</script>

至于从数据库中检索注释的getCommetns.php文件。

<?php
include 'includes/dbh.inc.php';
session_start();
$sql = "SELECT * FROM meatballscomments";
$result = mysqli_query($conn, $sql);
while($row = $result->fetch_assoc()){
echo "<div class = 'comment-box'>";
echo '<span class = "user">'.$row['user_uid'].'</span><br><br>';
echo "<p>".htmlspecialchars($row['message'])."</p>";
echo '<span class = "datef">'.$row['date'].'</span>';
if(isset($_SESSION['u_id']) && $_SESSION['u_uid'] == $row['user_uid']){
echo "<br>";
echo "<input type = 'hidden' id = 'cid' value = '".$row['cid']."'>";
echo "<button class = 'btn' type = 'submit' id = 'meatballsDelete'>Delete</button>";
}
echo "</div><hr>";
}
?>
<script>
$(document).ready(function(){
$("#meatballsDelete").click(function(){
var cid = $("#cid").val();
$.ajax({
url: "deleteComment.php",
type: "POST",
async: false,
data: {
"cid": cid
}});
alert("Your comment has been deleted");
});
});
</script>

我的deleteComment.php文件很短,就在这里。

<?php
include 'includes/dbh.inc.php';
$cid = $_POST['cid'];
$sql = "DELETE FROM meatballscomments WHERE cid = '$cid'";
$result = mysqli_query($conn, $sql);

在多个html元素上分配相同的id;对返回id为CCD_ 3的第一个元素的jQuery选择器的结果使用CCD_。来自jQuery:

每个id值在文档中只能使用一次。如果超过一个元素被分配了相同的ID,使用该ID的查询将只选择DOM中的第一个匹配元素。

因此,当您多次使用同一个id时,不能保证它会自动为您获取正确的元素。

最快的解决方案是将#meatballsDelete更改为.meatballsDelete,并将meatballsDelete类添加到按钮中,这样单击将在两个按钮上注册。还将$row['cid']值作为属性添加到按钮,然后在click中的函数中使用$(this).attr("myAttribute")获取该值,这将始终确保返回属于按钮的id。

就像@u_mulder在评论中所说的那样,您还使用id来注册点击,它也将绑定到具有该id的第一个元素。

修改代码以解决此问题的一个相当简单的方法是去掉隐藏的cid输入,并将cid值作为数据值添加到按钮中。您还需要将按钮更改为具有类meatballsDelete而不是id,因为id的值必须是唯一的。所以改变这个:

echo "<input type = 'hidden' id = 'cid' value = '".$row['cid']."'>";
echo "<button class = 'btn' type = 'submit' id = 'meatballsDelete'>Delete</button>";

echo "<button class = 'btn meatballsDelete' type = 'submit' data-cid = '{$row['cid']}'>Delete</button>";

然后修改javascript,将单击处理程序添加到类meatballsDelete(而不是id(的项中,并从数据cid属性中检索cid值:

$(document).ready(function(){
$(".meatballsDelete").click(function(){
var cid = $(this).data('cid');
$.ajax({
url: "deleteComment.php",
type: "POST",
async: false,
data: {
"cid": cid
}});
alert("Your comment has been deleted");
});
});
if(isset($_SESSION['u_id']) && $_SESSION['u_uid'] == $row['user_uid']){
echo "<br>";
echo "<p id='demo'></p>";
$commentId = $row['cid'];
echo "<input type = 'hidden' id = 'cid' value = '".$row['cid']."'>";
echo "<button class = 'btn' type = 'submit'  onclick= 'deleteFunction($commentId, 1)'>Delete</button>";
}

以及我使用的脚本

<script>
function deleteFunction(cid, page){
//document.getElementById("demo").innerHTML = cid + " ----"+ page;
$.ajax({
url: "deleteComment.php",
type: "POST",
async: false,
data: {
"cid": cid,
"page": page}
});
alert("Your comment has been deleted!");
}
</script>

最新更新