ajax评论在提交时显示而不刷新页面

Question

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

我希望这里的代码不会太多，但这里分为三个部分。 jQuery / php 插入评论查询 / php select cmets 查询。

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（插入 cmets）：

<?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（检索 cmets）：

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

    }
}

?>

更新：

在底部添加了两行：

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

如果成功则在您的 PHP 文件中返回 200 状态码，如果失败则返回 4xx 状态码。这样只有在返回 200 状态码时，才会进入succes: 块

您也可以使用 jQuery 模板 (http://api.jquery.com/template/)，而不是像上面那样附加注释。

也按状态码过滤：（此页面上的文档）：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
  }
});

如果你想使用状态码，看看这个例子：

$.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_cmets 设置为容器 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 消息。

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

希望你能明白。