Question

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

我得到了我遇到的js错误的解决方案，但现在问题还有别处。

我使用的是我在这里找到的脚本。 Credits and Demo to original script

并且它意味着发布评论而不用使用淡入淡出效果刷新页面。我修改它以适应我的项目，我现在遇到的问题是即使是这样的问题。它将数据保存到数据库中，它没有实时加载评论。我必须手动刷新页面是我想看到的新内容。由于它没有在开发者控制台中抛出任何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错误。我必须手动刷新页面才能查看违背实时评论理念的评论。

Answer 1

您的PHP文件似乎没有将任何内容发送（ECHOing）回到javascript AJAX例程。

试试这个。像这样更改你的comment-insert.php文件：

<?php
    $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));

    }
    $Photo = 'your_image.jpg';
    $out = "
        <li><span class='comment'>
        <span class='picture'>
        <span><img src='users/images/" .$Photo. "'></span>
        </span>
        <span class='content'><span class='title'><b>" .$Name. "</b>, Said:</span><br>" .$Comment. "</span>
        <span class='clear'></span>
        </span>
        </li>
    ";
    echo $out;
?>

请注意，上面的代码没有$ Photo变量并且会失败，所以我提供了一个代码，因此代码不会崩溃。请妥善修复。

Answer 2

使用别人的代码总是充满挑战。

首先，不需要<form></form>构造。只需使用DIV。这样就无需使用e.preventDefault() （仅用于抑制导航离开当前页面的默认<form>行为。）

接下来，如果用户点击的元素在最初呈现（DOM）之后已添加到DOM中，则只需使用.on()。 .on()的目的是指示DOM将javascript代码绑定到稍后会出现的元素，但是当javascript代码执行时，它还没有在DOM中。 在这种情况下，如果没有.on()，用户点击将无效，因为代码无法绑定到尚不存在的按钮。

请查看this post中的简单AJAX示例。老实说，您可以轻松地自行构建此聊天系统，而无需使用w3bee的代码。但是， 在您构建了一些有用的东西 后，您可能希望将您想出的内容与w3bee代码进行比较，看看他们是否有任何好主意。但严重的是，自己构建它。您将花费几天时间来解决w3bee的代码（主要是因为它仍然是一个黑盒子），但您可以在几个小时内自己重现它。

获取the linked post中的示例，将它们复制到您的服务器，然后使它们正常工作。特别是this one。您将在20分钟内学习这些示例，而不是在两天内修改w3bee的代码。

至少，让这些示例在您自己的系统上运行可能会帮助您了解您现在拥有的w3bee代码的问题。

说到上面的话，当前代码的问题可能在javascript AJAX success:函数中。尝试显示收到的内容（来自PHP方面），看看你得到了什么：

$.ajax({
  url: 'data/queries/comment-insert.php',
  type: 'POST',
  data: form.serialize(), //form serialized data
  success: function(data){
    alert(data);
  }
});

Answer 3

我实际上是在猜测为什么它可能不起作用。这可能是你尝试做事的顺序。在实际进入DOM之前，您正在淡化HTML响应。在实际淡化之前，您需要在DOM中使用它。所以不要做

var item = $(data).hide().fadeIn(800); // fading while it is not in the DOM
$('.comment-block').append(item);

DO

var item = $(data).hide();
$('.comment-block').append(item); // in the DOM
item.fadeIn(800);

AJAX：使用fadeIn

3 个答案: