Question

下面的代码试图使用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>

Answer 1

您不需要使用变量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"按钮的attrubute type="button"，如下所示：

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

我希望它可以帮助你...

Answer 2

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

HTML PAGE

<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 PAGE
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>

Answer 3

使用

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

如果您已有以下评论：

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

.append会为现有代码添加更多HTML。

问题与我的ajax代码显示评论

3 个答案: