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

希望你明白它。