AJAX Chat - 构建实时聊天应用的简单解决方案
以下是一个简化的AJAX聊天应用程序的前端代码示例，使用了jQuery库来简化AJAX请求的处理。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX Chat</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
$('#sendMessageForm').submit(function(e) {
e.preventDefault();
var message = $('#message').val();
$.post('send_message.php', { message: message }, function(data) {
$('#messages').append('<p>' + data + '</p>');
$('#message').val('');
});
});
function fetchMessages() {
$.get('fetch_messages.php', function(data) {
$('#messages').html(data);
});
}
setInterval(fetchMessages, 1000); // 每秒钟获取新消息
});
</script>
</head>
<body>
<div id="messages"></div>
<form id="sendMessageForm">
<input type="text" id="message" placeholder="Type your message here...">
<input type="submit" value="Send">
</form>
</body>
</html>这段代码首先加载了jQuery库，然后在文档加载完成时，绑定了表单的提交事件和定时获取消息的函数。当用户提交表单时，会发送一个POST请求到send_message.php来发送消息，并清空输入框；fetch_messages.php会被周期性地请求以获取聊天室中的最新消息，并更新页面上的消息区域。这个简单的例子演示了如何使用AJAX技术来创建一个实时更新的聊天应用。
评论已关闭