ajax聊天界面不顯示消息，即使在頁面刷新

我有這個JavaScript文件，應該通過ajax機制從PHP文件中獲取消息，即使消息得到成功發送沒有得到顯示在屏幕上，但它在PHP中文件，它也在數據庫中。任何人都可以指出我正在犯的任何錯誤，有沒有其他方法可以製作聊天界面？下面是JavaScript文件和HTML代碼ajax聊天界面不顯示消息，即使在頁面刷新

var pollServer = function() { 
 
    $.get('chat.php', function(result) { 
 
     
 
     if(!result.success) { 
 
      console.log("Error polling server for new messages!"); 
 
      return; 
 
     } 
 
     
 
     $.each(result.messages, function(idx) { 
 
      
 
      var chatBubble; 
 
      
 
      if(this.sent_by == 'self') { 
 
       chatBubble = $('<div class="row bubble-sent pull-right">' + 
 
           this.message + 
 
           '</div><div class="clearfix"></div>'); 
 
      } else { 
 
       chatBubble = $('<div class="row bubble-recv">' + 
 
           this.message + 
 
           '</div><div class="clearfix"></div>'); 
 
      } 
 
      
 
      $('#chatPanel').append(chatBubble); 
 
     }); 
 
     
 
     setTimeout(pollServer, 5000); 
 
    }); 
 
} 
 

 
$(document).on('ready', function() { 
 
    pollServer(); 
 
    
 
    $('button').click(function() { 
 
     $(this).toggleClass('active'); 
 
    }); 
 
}); 
 

 
$('#sendMessageBtn').on('click', function(event) { 
 
    event.preventDefault(); 
 
    
 
    var message = $('#chatMessage').val(); 
 
    
 
    $.post('chat.php', { 
 
     'message' : message 
 
    }, function(result) { 
 
     
 
     $('#sendMessageBtn').toggleClass('active'); 
 
     
 
     
 
     if(!result.success) { 
 
      alert("There was an error sending your message"); 
 
     } else { 
 
      console.log("Message sent!"); 
 
      $('#chatMessage').val(''); 
 
     } 
 
    }); 
 
    
 
});

<h1 style="text-align:center"></h1> 
 
    <div class="container"> 
 
     <div class="panel panel-default"> 
 
      <div class="panel-heading"> 
 
       <h2 class="panel-title">Let's Chat</h2> 
 
      </div> 
 
      <div class="panel-body" id="chatPanel"> 
 
      </div> 
 
      <div class="panel-footer"> 
 
       <div class="input-group"> 
 
        <input type="text" class="form-control" id="chatMessage" placeholder="Send a message here..."/> 
 
        <span class="input-group-btn"> 
 
         <button id="sendMessageBtn" class="btn btn-primary has-spinner" type="button"> 
 
          <span class="spinner"><i class="icon-spin icon-refresh"></i></span> 
 
          Send 
 
         </button> 
 
        </span> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>  
 
    <script src="jquery-3.1.1.min.js"></script> 
 
    <script src="client.js"></script>

我也有CSS，我不認爲可能影響到的任何輸出：

來源

2017-08-28 Siyad Nijah

你有沒有進行錯誤檢查瀏覽器控制檯？或者使用網絡工具檢查ajax調用的響應？ – NewToJS

我檢查了控制檯沒有任何錯誤。我做了一切工作正常？只是消息根本不顯示。 –

如果我的理解是正確的，you're錯在這一點上：

if(!result.success) { 
    alert("There was an error sending your message"); 
} else { 
    console.log("Message sent!"); 
    $('#chatMessage').val(''); 
}

您正在返回的消息，在成功的情況下到日誌文件，我想如果你只是這樣做就足夠了：

if(!result.success) { 
    alert("There was an error sending your message"); 
} else { 
    $('#returning_div_id').html("Message sent!"); 
    $('#chatMessage').val(''); 
}

我倒是建議你創建這個div在這一點上：

<div class="container"> 

    <div id='returning_div_id' class='alert alert-success'></div> 

    <div class="panel panel-default">

來源

2017-08-28 20:26:16 Luiz

我這樣做，它只是顯示消息發送的消息，'不是我有我如何顯示其他人發送的消息的困境。 –

ajax聊天界面不顯示消息，即使在頁面刷新

回答

相關問題