用我的ajax代码来显示注释 - Problen with my ajax code to display comment

下面的代码试图使用ajax和php创建一个注释系统，这里php部分运行良好。注释被插入到表中，但我似乎还没有掌握ajax。Ajax不起作用，除非我重新加载页面，否则不会显示注释。在重新加载页面时，注释会完美地出现在它应该出现的地方，所以帮助我修复ajax代码。

<?php
if(isset($_POST['content'])) {
$comment=strip_tags($_POST['content']);
$com = $db->prepare("INSERT INTO comments (comment,userto, userfrom, blog) VALUES (:comment, :userto, :userfrom, :blog)");
$com->execute(array(':comment'=>$comment,':userto'=>$userid,':userfrom'=>$uid,':blog'=>$blogId));   
}
?>

  <div class='db'>
  <table>
  <tr>
  <td>
  <img src='<?php echo $tar['profile_pic']; ?>' style='width:40px;height:40px;'/>
  </td>
  <td>
  <a href='<?php echo $tar['username']; ?>'><?php echo $tar['first_name'].' '.$tar['last_name']; ?></a>
  <p><?php echo $tar['comment']; ?></p>
  </td> 
  <td>
   <a href='#' id='<?php echo $tar['id']; ?>' class='delcomment' style='color:#555555;text-decoration:none;' title='Delete'>X</a>
   </td>
   </tr>
   </table>
        </div>
<script type="text/javascript" >
$(function() {
  $(".comment_button").click(function() {
    var test = $("#content").val();
    var dataString = 'content=' + test;
    if (test == '') {
      alert("Please Enter Some Text");
    } else {
      $.ajax({
        type: "POST",
        url: "",
        data: dataString,
        cache: false,
        success: function(html) {
          $(".db").show(html);
        }
      });
    }
    return false;
  });
});
</script>

<form method='post' name='form' action='' class='commentbox'>
<textarea cols='30' rows='2' name='content' id='content'></textarea><br />
<input type='submit' value='Comment' name='submit'class='comment_button'/>
</form>

您不需要使用变量dataString，并且需要为此更改$.ajax()函数：

var test = $("#content").val();
$.ajax({
    type: "POST",
    url: "",
    data: {
        content: test;
    },
    success: function(response) {
      $(".db").append(response);
    }
  });

更改以下行以避免页面刷新：

$(".comment_button").click(function(event) {
    event.preventDefault();

或者将按钮的属性type="submit"更改为type="button"，如下所示：

<button type='button' name='submit' class='comment_button'>Comment</button>

我希望它能帮助你。。。

试试这个。并确保jQuery库也包含在您的页面中。

HTML页面

<script type="text/javascript" >
    $(function() {
         $(".comment_button").click(function() {
            var test = $("#content").val();
            var comment = test;
            if (test == '') {
              alert("Please Enter Some Text");
            } else {
              $.ajax({
                type: "POST",
                url: "process.php",
                data: {content : comment},
                cache: false,
                success: function(html) {
                  $("#db").append(html);
                }
              });
            }
            return false;
          });
        });
        </script>
    <div id="db">
         <!--Returned comment will appear here -->
    </div>
        <form method='post' name='form' action='process.php' class='commentbox'>
        <textarea cols='30' rows='2' name='content' id='content'></textarea><br />
        <input type='submit' value='Comment' name='submit'class='comment_button'/>
        </form>

PHP页面
process.php

 <?php
    if(isset($_POST['content'])) {
    $comment=strip_tags($_POST['content']);
    $com = $db->prepare("INSERT INTO comments (comment,userto, userfrom, blog) VALUES (:comment, :userto, :userfrom, :blog)");
    $com->execute(array(':comment'=>$comment,':userto'=>$userid,':userfrom'=>$uid,':blog'=>$blogId));   
        }
    ?>
<table>
  <tr>
  <td>
  <img src='<?php echo $tar['profile_pic']; ?>' style='width:40px;height:40px;'/>
  </td>
  <td>
  <a href='<?php echo $tar['username']; ?>'><?php echo $tar['first_name'].' '.$tar['last_name']; ?></a>
  <p><?php echo $tar['comment']; ?></p>
  </td> 
  <td>
   <a href='#' id='<?php echo $tar['id']; ?>' class='delcomment' style='color:#555555;text-decoration:none;' title='Delete'>X</a>
   </td>
   </tr>
   </table>

使用

$(".db").append(html);

如果你已经有了现有的评论，比如：

<div class = "db">
  Comment 1
  Comment 2
  ...
</div>

.append将向现有标记添加更多HTML。