javascript - 使用ajax添加和删除评论？

Question

我使用 php 创建了一个简单的添加和删除评论系统。一些问题。

1. 我发表评论并刷新页面后，它会再次发布相同的评论。
2. 我可以删除评论，但在刷新页面之前不会显示评论已被删除。一旦我刷新页面，它就会加载回重复的评论。

所以我假设我最好的选择是使用 ajax 路由来完成此操作而不刷新页面。下面说的是添加和显示评论的基本设置。您将如何为其创建 ajax？

添加评论表单

      <form action="" method="post" enctype="multipart/form-data">
         <div class="field-comment">
              <label for="name">Enter your comment</label><br>
               <input type="text" name="comment" size="60">
         </div>
         <input type="submit" value="Post">
      </form>

显示评论

<div id="show-comments"></div>

删除评论按钮

<div class="delete_comment">
<a href="delete_comment.php?id=<?php echo $comment_id; ?>"><p><img src="images/icon_del.gif" alt="delete"></p></a>
</div>

<小时/>

这些是我在网站头部的删除功能。

<script>
    function deleteClick () {
        deleteComment($(this).data('id'));
    }

    function deleteComment(id) {
        $.ajax('delete_comment.php', {
            type: 'POST',
            data: {
                id: id
            },
            success: function() {
                //Ajax successful: remove the comment div from your comment area
                $('.comment-' + id).remove();
            },
            error: function() {
                //Ajax not successful: show an error
                alert('An error occured while deleting the comment!');
            }
        });
    }
    $('.delete_comment').click(deleteClick);
</script>

这是index.php上的删除div

<div id="comment-<?php echo $comment_id; ?>" class="comment">
                    This is a comment.
                    <a data-id="<?php echo $comment_id; ?>" href="#" class="delete_comment">
                        <p><img src="images/icon_del.gif" alt="delete"></p>
                    </a>
                </div>

这是delete_comment.php中的删除函数

$delete     =   $dbh->prepare("DELETE from comments WHERE comment-id = {$comment_id}");

Answer 1

您可以使用它来显示您的评论的实时提要:

setInterval(function showcomments() {
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
csxmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
csxmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
}
csxmlhttp.onreadystatechange=function comments()
{
if (csxmlhttp.readyState==4 && csxmlhttp.status==200)
    {
    document.getElementById('show-comments').innerHTML=csxmlhttp.responseText;
    }
}
csxmlhttp.open('GET','show_comments.php',true);
csxmlhttp.send();
}, 1000);

这会将评论的 id 发送到 php 脚本，该脚本将从数据库中删除评论，然后在删除后向您发送 alert() :

function deletecomment() {
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
dcxmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
dcxmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
}
dcxmlhttp.onreadystatechange=function dcomment()
{
if (dcxmlhttp.readyState==4 && dcxmlhttp.status==200)
    {
    alert('Comment Deleted!')
    }
}
dcxmlhttp.open('GET','delete_comment.php?id=' + comment_id,true);
dcxmlhttp.send();
}

这就是你要找的吗？