<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chat</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
//设置定时刷新获取聊天内容的方法。
$(function(){
setInterval(function(){
getChat();
},100)
});
/**
* 获取聊天内容的方法,比如说是A 、B两个人的聊天内容,
* 从后端获取聊天数据并显示到<div id="chat"></div>中
*/
function getChat(){
//使用jquery的方式发送异步请求。
$.ajax({
url:"这里写后端获取聊天内容的接口",
type:"POST",//请求的方式
/**
*这个data是要传给后端的数据,比如要查名字为A、B的聊天内容,这个data里就有A B的昵称
*/
data:{
"username":['A','B']
},
//回调函数,后端根据你发送过去的A、B昵称,查找到了两人的聊天内容,并把聊天内容返回给你。
//这里的data就是后端返回的聊天数据
success:function (data) {
$("#chat").html(data);//显示聊天内容
},
//当请求出现错误时会执行回调函数。
error:function () {
alert("获取聊天内容异常!");
},
dataType:"json"//设置接收到的相应数据的格式
})
}
/**
* 这里是清空聊天清空的方法,点击按钮clear会向后端发送清除指令。
*/
$("#clear").click(function(){
$.ajax({
url:"这里写后端清空聊天消息的接口",
type:"POST",//请求的方式
/**
*这个是后端接收指令的数据,比如说后端清空消息的接口判断删除聊天内容的监听是 isClear=isClear,
* 则这里data就要将指令传给后端,
*/
data:{
"isClear":true
},
//回调函数,后端接收到你清除指令后,可以返回给你一串字符,比如说是 “删除成功!”
success:function (data) {
alert(data);//弹窗显示,删除成功!
},
//当删除失败时提示这个
error:function () {
alert("删除失败");
},
dataType:"json"//设置接收到的相应数据的格式
});
/*
*说明:这个程序会一直通过getChat()方法获取后端A、B的聊天数据,
* 并写入到div中。
* 当点击clear按钮时,会向后端传递删除的指令,后端通过删除接口的方法
* 判断isClear删除掉A、B两人的聊天内容,而此时getChat()方法获取到的A、B两人的聊天记录就是空了。
* 之后将空值覆盖到div中,就实现了删除所有聊天记录的需求。
* */
})
</script>
</head>
<body>
<!--div模拟界面-->
<div id="chat">这里显示聊天的内容!!!</div>
<input type="submit" value="清空记录" id="clear">
</body>
</html>
chat
最新推荐文章于 2023-05-17 15:55:56 发布