Ajax 发布请求后不显示结果

Question

我正在编写一个应用程序。我做了异步 AJAX reuqest，所以当你想聊天时它不会刷新页面。但它不显示消息，因为当我转到网络选项卡，然后到该请求的响应选项卡时，一切都很好 - 它显示消息。

我的 HTML 代码：

<form action="apka.php" method="post" class="sendData">
    <input type="text" value="<?php echo $rc->picture;?>" class="picture" name="picture" hidden>
    <input type="text" name="chat" class="chat" hidden>
    <input type="text" value="<?php echo $rc->username;?>" class="username" name="name" hidden>
    <button type="submit" style="background-color:transparent;border:none;color:white"><?php echo $rc->username;?></button>
 </form>

我的 JavaScript 代码：

 <script>

       $('form.sendData').on('submit', function(e) {
           e.preventDefault();
        var that = $(this),
            url = that.attr('action'),
            method= that.attr('method'),
            data = {};
            that.find('[name]').each(function() {
                var that = $(this),
                    name= that.attr('name'),
                    value = that.val();
                data[name]=value;
            });
            console.log(data);
          $.ajax({
            url: url,
            type: method,
            data: data,
            success: function() {
                $('.card-footer').show();
                $('#messages').show();
                if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
                    $('#chats').hide();
                    $('#friends').hide();
                    $('#add').hide();
                    $('.navbar').hide();
                    $('#back').show();
                    $('#messages').show();
                    $('#show-search').hide();
                    $('#divChat').hide();
                }
            }
          });                     


       });




    </script>

以及选择消息的第一行：

 <?php

    http_response_code(200);


      require_once "connect.php";
        $connection = new mysqli($host, $db_user, $db_password, $db_name);

            if($connection->connect_errno!=0){
                 echo "Error: " . $connection->connect_errno;
            }else{
              $picture=$_POST['picture'];
              $name=$_POST['name'];
              $username=$_SESSION['username'];
              $username_messages = $username.'messages';
              $result_messages=$connection->query("SELECT * FROM $username_messages WHERE nameUser='$username' AND nameFriend='$name' OR nameUser='$name' AND nameFriend='$username'");
              $how_much_messages = $result_messages->num_rows;
                ?>

在这里你可以看到响应

我在这里回复：

<div class="card">
   <div class="card-header msg_head">
     <div class="d-flex bd-highlight">
        <div class="img_cont">
           <img src="https://cdmessenger.pl/profiles/<?php if(isset($picture)) echo $picture;?>" class="rounded-circle user_img" id="photo-message">
           <span class="online_icon"></span>
        </div>
        <div class="user_info">
           <span id="username-message"><?php if(isset($name)) echo $name;?></span>
           <p><?php echo $how_much_messages;?> wiadomości</p>
     </div>
   </div>
</div>

然后我检查 isset 会话变量是否在有 0 条消息时包含错误。如果不是我把这个：

while($rm=$result_messages->fetch_object()) {
    if($rm->nameUser==$username) {
      ?>
    <div class="d-flex justify-content-end mb-4 messages">
       <div class="msg_cotainer_send">
          <?php echo base64_decode($rm->messages);?>
          <span class="msg_time"><?php echo $rm->datas;?></span>
       </div>
    <div class="img_cont_msg">
      <img src="https://cdmessenger.pl/profiles/<?php echo $rm->picture;?>" class="rounded-circle user_img_msg">
     </div>
   </div>

   <?php
     } elseif($rm->nameUser!=$_SESSION['username']) {
       ?>
      <div class="d-flex justify-content-start mb-4 messages">
        <div class="img_cont_msg">
        <img src="https://cdmessenger.pl/profiles/<?php echo $rm->picture;?>" class="rounded-circle user_img_msg">
         </div>
        <div class="msg_cotainer">
          <?php echo base64_decode($rm->messages);?>
          <span class="msg_time"><?php echo $rm->datas;?></span>
       </div>
     </div>
    <?php
      }
     }
    ?>
  </div>

Answer 1

您需要使用 ajax 返回更新一些 div：

$.ajax({
            url: url,
            type: method,
            data: data,
            success: function(data) {
                $('.card-footer').show();
                $('#messages').show();
                if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
                    $('#chats').hide();
                    $('#friends').hide();
                    $('#add').hide();
                    $('.navbar').hide();
                    $('#back').show();
                    $('#messages').show();
                    $('#show-search').hide();
                    $('#divChat').hide();

                    $('#someDiv').innerHTML = data;
                }
            }
          });