chat

最新推荐文章于 2025-12-04 17:38:03 发布

原创最新推荐文章于 2025-12-04 17:38:03 发布 · 279 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

前端（javaScript+jQuery）同时被 2 个专栏收录

6 篇文章

订阅专栏

1 篇文章

订阅专栏

本文介绍了一个基于HTML、jQuery和AJAX的聊天界面实时更新与清空聊天记录的功能实现。通过定时调用getChat()方法，前端能够不断获取后端的聊天数据并显示在界面上。同时，点击清空记录按钮，可向后端发送删除指令，实现实时清空聊天记录。

<!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>