0
我有這個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,我不認爲可能影響到的任何輸出:
你有沒有進行錯誤檢查瀏覽器控制檯?或者使用網絡工具檢查ajax調用的響應? – NewToJS
我檢查了控制檯沒有任何錯誤。我做了一切工作正常?只是消息根本不顯示。 –