Ajax加载的评论不起作用

时间:2014-11-14 01:50:51

标签: javascript php jquery ajax forms

我的php文件遍历我数据库中的每篇博文,并创建了评论部分。博客发布很棒。当我评论最新的博客文章时,评论没有出现,但似乎在空间扩展时添加一行,只是不包括评论。当我对第一篇文章发表评论时,它的效果非常好,完全符合预期。我无法弄清楚如何纠正它。我认为这是一个向注释块选择器添加.closest的问题,但这似乎没有做到这一点。

感谢任何帮助或反馈!

PHP / HTML     

<?php   // retrive post
     include('php/config.php');
    include ('php/function.php');
    dbConnect();

    $blog_query = mysql_query(
    'SELECT * 
    FROM Blog 
    ORDER BY DATE DESC');

    $date = date_create($row['DATE']);
    while($row = mysql_fetch_array($blog_query)): ?>

    <div class="post">
        <h2><?php echo $row['TITLE']?></h2>
        <h3><?php echo date_format($date, 'l, F j, Y')?></h3>
        <p><?php echo $row['CONTENT']?></p>
    </div>
    <h2>Comments.....</h2>
    <div class="comment-block">

<?php   // retrieve comments with post id
    $comment_query = mysql_query(
        "SELECT *
        FROM Comments
        WHERE BID = {$row['ID']}
        ORDER BY CID DESC
        LIMIT 15") or die(mysql_error());

        while($comment = mysql_fetch_array($comment_query)):?>

        <div class="comment-item">
            <div class="comment-post">
                <h3><?php echo $comment['UNAME'] ?> <span>said....</span></h3>
                <p><?php echo $comment['COMMENT']?></p>
            </div>
        </div>
    <?php endwhile?>
    </div>

    <h2>Submit new comment</h2>
    <!--comment form -->
    <form id="form" method="post"> 
        <div>
            <input type="hidden" name="BID" value="<?php echo $row['ID']?>">
            <label> <span>Display Name: *</span>
                <input id="uname" type="text" tabindex="1" name="commentName" required />
            </label>
        </div>
        <div>
            <label> <span>Comment: *</span>
                <textarea id="textarea" placeholder="Enter your comment here..." tabindex="2" name="commentMessage" required></textarea>
            </label>
        </div>
        <div>
            <input type="submit" id="submit" value="Submit Comment">
        </div>
    </form>     


<?php endwhile?>    
</div>

的Jquery / AJAX:

var form = $('form');
var submit = $('#submit');

form.on('submit', function(e) {
    // prevent default action
    e.preventDefault();
    // send ajax request
    $.ajax({
        url: 'php/ajaxcomment.php',
        type: 'POST',
        cache: false,
        data: form.serialize(), //form serizlize data
        beforeSend: function(){
            // change submit button value text and disabled it
            submit.val('Submitting...').attr('disabled', 'disabled');
        },
        success: function(data){
            // Append with fadeIn see http://stackoverflow.com/a/978731
            var item = $(data).hide().fadeIn(800);
            $('.comment-block').append(item);

            // reset form and button
            form.trigger('reset');
            submit.val('Submit Comment').removeAttr('disabled');
        },
        error: function(e){
            alert(e);
        }
    });
});

ajajcomment.php

<?php
if (isset( $_SERVER['HTTP_X_REQUESTED_WITH'] )):
include('config.php');
include('function.php');
dbConnect();

if (!empty($_POST['commentName']) AND !empty($_POST['commentMessage']) AND !empty($_POST      ['BID'])) {
    $name = mysql_real_escape_string($_POST['commentName']);
    $comment = mysql_real_escape_string($_POST['commentMessage']);
    $BID = mysql_real_escape_string($_POST['BID']);

    mysql_query("
        INSERT INTO Comments
        (UNAME, BID, COMMENT)
        VALUES('{$name}', '{$BID}', '{$comment}')");            
}
?>

 <div class="comment-item">
<div class="comment-post">
    <h3><?php echo $name ?> <span>said....</span></h3>
    <p><?php echo $comment ?></p>
</div>
</div>

<?php
dbConnect(0);
endif?>

1 个答案:

答案 0 :(得分:0)

&#34; php / ajaxcomment.php&#34;发表评论时返回?纯HTML?

我制作&#34; php / ajaxcomment.php&#34;返回JSON,例如:

<?php
/*
here you do what ever you do now,
Insert the new comment to database, etc
*/

// Then you return the inserted data:
$data = array(
  'UNAME' => $username,
  'COMMENT' => $comment,
);

header('Content-Type: application/json');
print json_encode( $data );
?>

..并更改ajax:

...
...
success: function(data){
    var commentItem = $('<div/>').addClass('comment-item');
    var commentPost = $('<div/>').addClass('comment-post');
    var user        = $('<h3/>').html( data.UNAME +'<span>said...</span>' );
    var comment     = $('<p/>').html( data.COMMENT );

    commentItem.html( commentPost.html( user + comment ) ).hide().fadeIn(800);

    $('.comment-block').append(commentItem);

    // reset form and button
    form.trigger('reset');
    submit.val('Submit Comment').removeAttr('disabled');
},
...
...