javascript - 除非刷新页面，否则AJAX不会在聊天框系统中显示最后一条消息

Question

我为网站制作了一个聊天框，其中显示了用户评论以及其姓名和日期。除了jQuery AJAX之外，它都可以正常工作。我已经尝试了所有方法，但是按提交按钮后仍然看不到我的评论。仅在刷新页面时显示。

<div id="display_comment">
  <a href="#" class="card-link">
    <h5 class="card-title"><strong><?php echo $row[1] ; ?></strong></h5>
  </a>
  <h6 class="card-subtitle mb-2 text-muted">
    <?php echo $row[4] ; ?>
  </h6>
  <p class="card-text">
    <?php echo $row[2]; ?>
  </p>
</div>

<!-- ADD COMMENT  -->
<form style="padding: 40px;width: 700px;" method="POST" enctype="multipart/form-data" id="comment_form">
  <div class="form-group">
    <textarea class="form-control" id="exampleFormControlTextarea1" id="comment_content" rows="3" name="comment"></textarea>
    <input class="btn btn-primary" type="submit" value="new message" name="submit" id="submit">
  </div>
</form> -->

$(document).ready(function() {
  $('#comment_form').('submit', function(event) {
    event.preventDefault();
    var form_data = $(this).serialize();
    $.ajax({
      url: "https://manix.000webhostapp.com/community.php",
      method: "POST",
      data: form_data,
      dataType: "JSON",
      success: function(data) {
        if (data.error != '') {
          $('#comment_form')[0].reset();
          $('#comment_message').html(data.error);
        }
      }
    })
  });

  load_comment();

  function load_comment() {
    $.ajax() {
      url: "https://manix.000webhostapp.com/community.php",
      method: "POST",
      success: function(data) {
        $('#display_comment').html(data);
      }
    }
  }
});

Answer 1

Ajax是异步的，因此当您调用load comment（）时，该注释仍然不存在。
只需将加载注释放入ajax回调中即可。

    $(document).ready(function() {
      $('#comment_form').('submit', function(event) {
        event.preventDefault();
        var form_data = $(this).serialize();
        $.ajax({
          url: "https://manix.000webhostapp.com/community.php",
          method: "POST",
          data: form_data,
          dataType: "JSON",
          success: function(data) {
            if (data.error != '') {
              $('#comment_form')[0].reset();
              $('#comment_message').html(data.error);
            } else {
              load_comment();
            }
          }
        })
      });



      function load_comment() {
        $.ajax() {
          url: "https://manix.000webhostapp.com/community.php",
            method: "POST",
            success: function(data) {
            $('#display_comment').html(data);
          }
        }
      }
    });