Fatal编程技术网
  • javascript/
  • Javascript 使用ajax添加和删除注释？

Javascript 使用ajax添加和删除注释？

javascript php mysql ajax

Javascript 使用ajax添加和删除注释？,javascript,php,mysql,ajax,comments,Javascript,Php,Mysql,Ajax,Comments,我使用php创建了一个简单的添加和删除注释系统。有几个问题 在我发布评论并刷新页面后，它将再次发布相同的评论 我可以删除评论，但在我刷新页面之前，它不会显示它已被删除。再次刷新页面后，它将加载回重复的注释 因此，我假设我的最佳选择是使用ajax路由来完成这项工作，而无需刷新页面。 下面是添加和显示评论的基本设置。您将如何为它创建ajax 添加评论表单 <form action="" method="post" enctype="multipart/form-data">

我使用php创建了一个简单的添加和删除注释系统。有几个问题

  • 在我发布评论并刷新页面后，它将再次发布相同的评论
  • 我可以删除评论，但在我刷新页面之前，它不会显示它已被删除。再次刷新页面后，它将加载回重复的注释
    • 因此，我假设我的最佳选择是使用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>
    您可以使用此选项显示评论的实时提要：

    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脚本，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();
}
    这就是你想要的吗？？？

    你可以让你的
    thispage.php更像：
    

    <?php
  /* execute comments query -- echo $comments with the proper HTML formatting
     surrounding each comment */
?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
   <head>
     <meta http-equiv='content-type' content='text/html;charset=utf-8' />
     <style type='text/css'>
       @import 'common.css'; @import 'thispage.css';
     </style>
   </head>
<body class='njs'>
  <div class='field-comment'>
    <label for='comment'>Enter your comment</label>
    <input type='text' name='comment' id='comment' maxsize='60' />
    <input type='button' name='pst' id='pst' value='Post' />
  </div>
  <div id='added-comments'>
    <div id='comments'><?php echo $comments;?></div>
  </div>
  <script type='text/javascript' src='common.js'></script>
  <script type='text/javascript' src='post.js'></script>
  <script type='text/javascript' src='thispage.js'></script>
</body>
</html>

    
现在你的学习。下面是
    post.js
    ：
    

    //<![CDATA[
var doc = document, bod = doc.body, IE = parseFloat(navigator.appVersion.split('MSIE')[1]);
bod.className = 'js';
function gteIE(version, className){
  if(IE >= version)bod.className = className;
}
function E(e){
  return doc.getElementById(e);
}
//]]>

    

    //<![CDATA[
function post(where, send, success){
  var x = new XMLHttpRequest || new ActiveXObject('Microsoft.XMLHTTP');
  var v = encodeURI(send);
  x.open('POST', where); x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  x.setRequestHeader('Content-length', v.length); x.setRequestHeader('Connection', 'close');
  x.onreadystatechange = function(){
    if(x.readyState === 4 && x.status === 200){
      success(x.responseText);
    }
  }
  x.send(v);
}
//]]>

    

    //<![CDATA[
E('pst').onclick = function(){
  var cmt = E('comment').value;
  if(cmt !== ''){
    post('response.php', 'comment='+cmt, function(o){
      var div = doc.createElement('div'), del = doc.createElement('input');
      del.type = 'input'; del.value = 'Delete';
      div.appendChild(doc.createTextNode(o)); div.appendChild(del);
      E('comments').appendChild(div);
    });
  }
  else{
    // a comment was not entered
  }
}
var psts = E('comments').childNodes, cn, ip;
for(var i=0,l=psts.length; i<l; i++){
  (function(i){
    cn = psts[i].childnodes;
    for(var n=0,c=cn.length; n<c; n++){
      (function(n){
        ip = cn[n];
        if(ip.nodeName.match(/^input$/i)){
          ip.onclick = function(){
            post('response.php', 'delete='+ip.previousSibling.nodeValue, function(o){
              if(o){
                bod.removeChild(ip.parentNode);
              }
              else{
                // put error code here
              }
            });
          }
        }
      })(n);
    }
  })(i);
}
//]]>

    
怎么样
    response.php
    ：
    

    <?php
if(isset($_POST['comment'])){
  $cmnt = $_POST['comment'];
  /* run database table column row INSERT based on $cmnt -- echo $cmnt when query
     is executed correctly
  */
}
elseif(isset($_POST['delete'])){
  /* run database table column row DELETE based on the actual comment which you
     can find in $_POST['delete'] -- Once you have executed query echo 1, which
     will go back to JavaScript page `onreadystatechange`
  */   
}
?>

    

    首先，您需要稍微更改一下表单：
    

    <form action="#">
    <div class="field-comment">
        <label for="commentText">Enter your comment</label><br>
        <input type="text" name="commentText" id="commentText" size="60">
    </div>
    <input type="submit" value="Post">
</form>

    

    单击delete按钮获取属性
    数据id
    （
    $（this）.data（'id'）
    ，在代码中）的值，并调用函数
    deleteComment
    ，id作为属性（在本例中为1234）。函数发送ajax请求并删除id为“comment-[id]”的div，因此在本例中为“comment-1234”。
    JavaScript代码在哪里？使用ajax不需要
    表单。点击
    enter
    将提交到您的
    表单
    s
    action
    属性。如果您出于任何原因想使用
    表单
    ，请不要使用
    submit`按钮。您需要使用JavaScript提交到PHP页面，该页面将返回一个值
    onreadystatechange
    。我的评论系统是用php和mysql数据库完成的。所以我需要一些关于ajax的帮助，因为我对它不太熟悉。没有JavaScript就不是ajax。在我的回答中，我将向您展示一个简单的AJAX请求，它仍然不能解决您的问题。我理解。请给我举个例子。会有帮助的。是的，我想这就是我要找的。但是现在来看，我认为最好是回到过去，一步一步地学习javascript，然后回到这里。看起来你花了很多时间。谢谢你的精彩代码。这不是问题！如果您有任何问题，请告诉我。好的，这段代码更容易理解。我的问题是，我是否将所有这些函数都放在一个js文件中，并在站点头部引用它？在我看来，这些函数将通过delete_comment.php和add_comment.php（我已经有了）来对应。正确，只需创建一个新的js文件（例如comments.js），不要忘记在它前面包含jQuery。我稍后会稍微修改代码，因为已经存在的删除按钮的功能缺失，我想我在将事件处理程序添加到新创建的删除按钮时也犯了一些错误。阅读您的更新，是的，理解您想要使用的代码始终是一件好事：）尽管如此，我仍然修改了代码，因此，它现在已经完成，您（或其他人）可以使用它。祝你的评论系统好运。从昨晚开始，我对你的代码有了更好的理解。我要一步一步地做。现在，我只想尝试删除一条评论。我唯一的问题是，删除函数中的“id”对应于谁？您能创建与js代码匹配的html删除按钮/div吗？这对我有很大帮助。我添加了一个注释div示例。

    //<![CDATA[
var doc = document, bod = doc.body, IE = parseFloat(navigator.appVersion.split('MSIE')[1]);
bod.className = 'js';
function gteIE(version, className){
  if(IE >= version)bod.className = className;
}
function E(e){
  return doc.getElementById(e);
}
//]]>

    

    //<![CDATA[
function post(where, send, success){
  var x = new XMLHttpRequest || new ActiveXObject('Microsoft.XMLHTTP');
  var v = encodeURI(send);
  x.open('POST', where); x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  x.setRequestHeader('Content-length', v.length); x.setRequestHeader('Connection', 'close');
  x.onreadystatechange = function(){
    if(x.readyState === 4 && x.status === 200){
      success(x.responseText);
    }
  }
  x.send(v);
}
//]]>

    

    //<![CDATA[
E('pst').onclick = function(){
  var cmt = E('comment').value;
  if(cmt !== ''){
    post('response.php', 'comment='+cmt, function(o){
      var div = doc.createElement('div'), del = doc.createElement('input');
      del.type = 'input'; del.value = 'Delete';
      div.appendChild(doc.createTextNode(o)); div.appendChild(del);
      E('comments').appendChild(div);
    });
  }
  else{
    // a comment was not entered
  }
}
var psts = E('comments').childNodes, cn, ip;
for(var i=0,l=psts.length; i<l; i++){
  (function(i){
    cn = psts[i].childnodes;
    for(var n=0,c=cn.length; n<c; n++){
      (function(n){
        ip = cn[n];
        if(ip.nodeName.match(/^input$/i)){
          ip.onclick = function(){
            post('response.php', 'delete='+ip.previousSibling.nodeValue, function(o){
              if(o){
                bod.removeChild(ip.parentNode);
              }
              else{
                // put error code here
              }
            });
          }
        }
      })(n);
    }
  })(i);
}
//]]>

    

    <?php
if(isset($_POST['comment'])){
  $cmnt = $_POST['comment'];
  /* run database table column row INSERT based on $cmnt -- echo $cmnt when query
     is executed correctly
  */
}
elseif(isset($_POST['delete'])){
  /* run database table column row DELETE based on the actual comment which you
     can find in $_POST['delete'] -- Once you have executed query echo 1, which
     will go back to JavaScript page `onreadystatechange`
  */   
}
?>

    

    <form action="#">
    <div class="field-comment">
        <label for="commentText">Enter your comment</label><br>
        <input type="text" name="commentText" id="commentText" size="60">
    </div>
    <input type="submit" value="Post">
</form>

    

    //Event handler for click on a delete button
function deleteClick () {
    deleteComment($(this).data('id'));
}

function addComment(commment) {
    //Create a new div with id "comment-[id]" containing the comment
    var $commentDiv = $('<div />', {
        id: 'comment-' + comment.id,
        'class': 'comment',
        html: comment.text
    };

    //Create the delete button with the attribute data-id, 
    //which will be used for deleting
    var $deleteLink = $('<a href="#" data-id="' + comment.id + '"/>', {
        'class': 'delete_comment',
        html: '<p><img src="images/icon_del.gif" alt="delete"></p>',
        click: deleteClick //Reference to the event handler we created above
    });

    //Add the delete button to the comment div
    $commentDiv.append($deleteLink);
    //Add the comment div to your comment area
    $('#show-comments').append($commentDiv);
}

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!');
        }
    });
}

$(function() {
    $('#comment-form').submit(function(event) {
        //Skip the form from submitting
        event.preventDefault();

        var commentText = $(this).find('#commentText').val();

        //Ensure commentText to not be empty
        if($.trim(commentText).length) {
            $.ajax('add_comment.php', {
                type: 'POST',
                data: {
                    commentText: commentText
                },
                success: function(response) {
                    //Ajax successful: call the addComment function
                    addComment(response);
                },
                error: function() {
                    //Ajax not successful: show an error
                    alert('An error occured while saving the comment!');
                }
            };  
        }          
    });

    //Find all delete buttons and add the event handler we created above.
    //This expects the delete buttons to have a data-id attribute containing 
    //the id of the comment that should be deleted
    $('.delete_comment').click(deleteClick);
});

    

    <div id="comment-1234" class="comment">
    This is a comment.
    <a data-id="1234" href="#" class="delete_comment">
        <p><img src="images/icon_del.gif" alt="delete"></p>
    </a>
</div>