ajax评论显示在提交w/out页面刷新

Question

我写了一个非常简单的评论系统的开头。它使用jQuery/AJAX/PHP MySQL。到目前为止它工作正常。但是，一旦提交评论，您必须刷新页面才能显示评论。它如何显示在提交。

我希望这里没有太多的代码，但这里有三个部分。 jQuery/php插入评论查询/ php选择评论查询。

的jQuery/AJAX：

$(document).ready(function() { 
    $('#button').click(function() { 
    var name = $('#name').val(); 
    var comment = $('#comment').val(); 

    if(name == '' || comment == '') { 
     $('#comment_messages').html('Please enter both fields'); 
    } else if(name !== '' || comment !== '') { 
     $('#comment_messages').html(''); 

    $.ajax({ 
    type: 'POST', 
    url: 'comments.php', 
    data: 'name='+name+'&comment='+comment, 
    success: function(data) { 
    $('#comments_area').append(data); 
    } 
    }); 
    } 
    }); 
}); 

PHP INSERT（插入注释）：

<?php 

include('init.inc.php'); 

if(isset($_POST['name'], $_POST['comment'])) { 
    $name = $_POST['name']; 
    $comment = $_POST['comment']; 
    if(!empty($name) && !empty($comment)) { 
    $query = mysql_query("INSERT INTO comments VALUES(NULL, '$name', '$comment', CURRENT_TIMESTAMP)"); 
    if($query === true) { 

     // right here is what is being returned to success: function(data) in the ajax script. What's the best way to return the comment here? 

    } else { 
     echo 'Hmmm... that\'s odd........'; 
    } 
    } else { 
    echo 'Please enter both fields'; 
    } 
} 

?> 

PHP SELECT（检索评论）：

<?php 

$query = mysql_query("SELECT * FROM comments ORDER BY time DESC LIMIT 10"); 

    $num = mysql_num_rows($query); 
    if($num >= 1) { 
    while($fetch = mysql_fetch_assoc($query)) { 
     $name = $fetch['name']; 
     $comment = $fetch['comment']; 
     $time = $fetch['time']; 

     ?> 

     <div id="user_comments"> 

      <?php echo $name; ?> said at: <span id="time_stamp"><?php echo $time; ?></span><p>- <?php echo $comment; ?> 

     </div> 

     <?php 

    } 
} 

?> 

UPDATE：

个

新增两行底部：

$(document).ready(function() { 
    $('#button').click(function() { 
    var name = $('#name').val(); 
    var comment = $('#comment').val(); 

    if(name == '' || comment == '') { 
     $('#comment_messages').html('Please enter both fields'); 
    } else if(name !== '' || comment !== '') { 
     $('#comment_messages').html(''); 

    $.ajax({ 
    type: 'POST', 
    url: 'comments.php', 
    data: 'name='+name+'&comment='+comment, 
    success: function(data) { 
    $('#comments_area').append('<b>'+name+'</b><p>- '+comment); 
    $('#comment_messages').html(data); 
    } 
    }); 
    } 
    }); 
}); 

Answer 1

你已经有注释，当你发送，所以当AJAX调用提交评论返回成功，你可以追加不实际从PHP得到它的评论/ AJAX。

所以不要返回评论，那只是实际上并未使用的数据。

$.ajax({ 
type: 'POST', 
url: 'comments.php', 
data: 'name='+name+'&comment='+comment, 
success: function(data) { 
$('#comments_area').append('<b>'+name+'</b>: '+comment); 
} 
}); 
} 
}); 

如果失败，返回一个200状态码到你的PHP文件中，或者返回一个4xx状态码。只有当返回200状态码时，它才会进入succes:区块

除了像上面那样追加评论，您还可以使用jQuery模板（http://api.jquery.com/template/）。

通过的StatusCode滤清器过：（此页文档）：http://api.jquery.com/jQuery.ajax/

捕捉失败就像下面的例子中：

$.ajax({ 
    url: "test.html", 
    context: document.body, 
    success: function(){ 
    // add comment here, succes will go here if ajax returns a 200 statuscode 
    } 
    error: function(){ 
    // add failure here, error will go there if ajax returns a 4xx statuscode 
    } 
}); 

如果你想使用statuscodes，看看这个例子：

$.ajax({ 
    statusCode: { 
    200: function() { 
     //succes 
    }, 
    400: function(){ 
     // bad request 
    } 
    } 
}); 

Answer 2

你可以这么像

$.ajax({ 
type: 'POST', 
url: 'comments.php', 
data: 'name='+name+'&comment='+comment, 
success: function(data) { 
    $('#comments_area').append(data); 
    $('user_comments').load('selectcomments.php #user_comments') 
} 

然后它会保存条目，并重新加载评论部分。

但是，您应该将#user_comments设置为容器ID，并且从不使用ID作为重复元素。

所以我会做

<div id="user_comments"> 
     <div class="comment">comment info here</div> 
     <div class="comment">comment info here</div> 
     <div class="comment">comment info here</div> 
     <div class="comment">comment info here</div> 
</div> 

然后在您的评论对插入SUCCES我会做一个SUCCES messeage用户。

Answer 3

@Graham，由Topener说你可以做或者除了可以做的是，作为ajax()响应发送一个数字代码

if(//name and comment empty){ 
    echo "0"; 
} else if (// name and comment not inserted to db table){ 
    echo "1"; 
} else if (//successful){ 
    echo "2"; 
} 

现在在此基础上Ajax响应可以为Java的脚本代码即

if(response == '0'){ 
    $('#comment_messages').html('Please enter both fields'); 
} elseif (response == '1'){ 
    $('#comment_messages').html('Hmmm... that\'s odd........'); 
} elseif (response == '2'){ 
    $('#comments_area').append('<b>'+name+'</b>: '+comment); 
} 

希望你明白它。