AJAX：使用淡入淡出附加数据

【问题标题】：AJAX: append data with fadeInAJAX：使用淡入淡出附加数据
【发布时间】：2016-09-01 00:07:57
【问题描述】：

我针对一个不同的问题提出了一个问题，最终导致了我现在需要帮助的问题。 AJAX form Submit to post comments

我得到了解决 js 错误的方法，但现在问题出在其他问题上。

我正在使用我在此处找到的脚本。 Credits and Demo to original script

它的目的是发布 cmets 而不用淡入效果刷新页面。我修改了它以适合我的项目，我现在遇到的问题是，即使它正在将数据保存到数据库中，它也没有实时加载 cmets。我必须手动刷新页面才能看到新内容。由于它没有在开发者控制台中抛出任何 js 错误，所以我找不到问题所在。

评论区

<div class="comments">
    <div class="top-title">
        <h3>Messages</h3>
    </div>
    <ul class="level-1">
    <div class="comment-block">
<?php while ($row = mysqli_fetch_array($res_post_select))
{
$PageID = $row['PageID'];
$Name = $row['Name'];
$Photo = $row['Photo'];
$PostDate = $row ['PostDate'];
$Comment = nl2br($row['Comment']);
?>
    Posted on <?php echo DATE("F d, Y", strtotime($PostDate)) ?> at <?php echo DATE("g:i a", strtotime($PostDate)) ?>
    <li>
    <span class='comment'>
    <span class='picture'>
    <span><img src='users/images/<?php echo $Photo?>'></span>
    </span>
    <span class='content'><span class='mid-title'><b><?php echo $Name ?></b>, Said:</span><br><?php echo $Comment ?></span>
    <span class='clear'></span>
    </span>
    </li>
<?php } ?>

JS Credits

<script>
$(document).ready(function(){
  var form = $('form');
  var submit = $('#submit');

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

        // reset form and button
        form.trigger('reset');
        submit.val('Post Message').removeAttr('disabled');
      },
      error: function(e){
        alert(e);
      }
    });
  });
});
</script>

comment-insert.php 文件

<?php
if (isset( $_SERVER['HTTP_X_REQUESTED_WITH'] )):
$ds = DIRECTORY_SEPARATOR;
$base_dir = realpath(dirname(__FILE__)  . $ds . '..') . $ds;
include_once("{$base_dir}..{$ds}include{$ds}dbconfig.php");
include_once("{$base_dir}..{$ds}include{$ds}dbconnection.php");
$conn = dbconnect();

    if(!empty($_POST['comment']))
        {
$Name = mysqli_real_escape_string($conn, $_POST['Name']);
$PageID = mysqli_real_escape_string($conn, $_POST['PageID']);
$ID = mysqli_real_escape_string($conn, $_POST['ID']);
$Comment = mysqli_real_escape_string($conn, $_POST['comment']);

$sql = "INSERT INTO comments
(PageID, ID, Name, PostDate, Comment)
VALUES
('$PageID', '$ID', '$Name', now(), '$Comment')";

    mysqli_query($conn, $sql) or die("Error: ".mysqli_error($conn));

}
?>

<!-- This is the mark up that should fadeIn after the data is inserted into the database.
 You can refer to the demo found in the credited page -->

<li><span class='comment'>
<span class='picture'>
<span><img src='users/images/<?php echo $Photo ?>'></span>
</span>
<span class='content'><span class='title'><b><?php echo $Name ?></b>, Said:</span><br><?php echo $Comment ?></span>
<span class='clear'></span>
</span>
</li>

<?php
mysqli_close($conn);
endif

因此，ajax 会触发在 comment-insert.php 中找到的查询，但它不会实时插入，也不会在控制台中给出任何 js 错误。我必须手动刷新页面才能查看 cmets，这违背了实时评论想法的目的。

【问题讨论】：

• 您能否预览 AJAX 查询在您的浏览器控制台网络选项卡中返回的内容？
• 您是否检查过您至少进入了success 回调并在data 中获取了您的HTML？
• 旁注：无需大写 PHP 变量。 DATE() 应该是 date()。
• @TomDillinger。它预览文本部分。图像不预览。 POST 响应返回这个。
• John Doe，说：
  这是你选择的选项
span> 并且 HTML 返回没有格式的文本部分（无图像）。