ajax案例:聊天机器人

m0_63400611

已于 2022-05-18 16:11:59 修改

阅读量379

点赞数

分类专栏： ajax 文章标签： ajax

于 2022-03-19 15:15:30 首次发布

本文链接：https://blog.csdn.net/m0_63400611/article/details/123595322

版权

ajax 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

使用到的接口

http://www.liulongbin.top:3006/api/robot
http://www.liulongbin.top:3006/api/synthesize

(黑马课程提供)

需要用到jQuery库

分析

绑定发送按钮和输入框,分别在输入框按下回车键和鼠标点击发送时触发send()方法,此方法在外面定义,因为需要多次使用,send()方法内容包括获取输入框的内容val(),判断内容是否为空,是则返回空,否则在tali_list中插入一段html内容,即将输入框的内容传入元素的html文本中,以消息的形式渲染加载到页面,最后将文本框的内容清空并且保持文本框的焦点
保持滚动条在消息页面的最底部: 定义一个boxScroll(元素)方法,设置指定元素的scrollTop = 指定元素.scrollHeight
使用$.ajax传送参数到提供的接口,根据接口的描述使用

代码

index.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/reset.css">
</head>

<body>
    <div class="box">
        <!--header-->
        <div class="header clearfix">
            <h2 class="name">小冰</h2>
            <img src="./img/head.png" alt="">
        </div>
        <!--聊天框-->
        <div class="chatarea">
            <ul class="talk_list">
                <li class="left_word">
                    <img src="./img/head.png" alt="">
                    <span>你好!</span>
                </li>
            </ul>
        </div>
        <!--输入框-->
        <div class="enter">
            <img src="./img/head.png" alt="">
            <input type="inputarea" class="enterarea" placeholder="请输入信息">
            <button class="enterbtn">发送</button>
        </div>
    </div>
    <script src="../../../js/jQuery.js"></script>
    <script src="./js/index.js"></script>
</body>

</html>

index.js

$(function() {
    //发送信息
    var chatarea = document.querySelector('.chatarea');
    var a = 1;

    function send() {
        //将输入的内容显示到聊天窗口中
        var text = $('.enterarea').val().trim();
        console.log(text);
        if (text.length <= 0) { //判断输入是否为空
            return $('.enterarea').val('');
        }
        $('.talk_list').append("<li class='right_word'><img src='./img/head.png' /><span>" + text + "</span></li>");
        $('.enterarea').val('').focus();
        //重置滚动条位置
        boxScroll(chatarea);
        //发送请求,获取聊天内容
        getMsg(text);
    }

    //聚焦在输入框时点击回车按钮发送消息
    $('.enterarea').on('keydown', function(e) {
        if (e.keyCode === 13) {
            send();
        }
    })

    //保持滚动条在最底部
    function boxScroll(o) {
        o.scrollTop = o.scrollHeight;
    }

    //触发发送消息方法
    $('.enterbtn').on('click', function() {
        send();
    })

    //获取机器人发送回来的消息
    function getMsg(text) {
        $.ajax({
            method: 'GET',
            url: 'http://www.liulongbin.top:3006/api/robot',
            data: {
                spoken: text,
            },
            success: function(res) {
                console.log(res);
                if (res.message === 'success') {
                    var msg = res.data.info.text
                    $('.talk_list').append("<li class='left_word'><img src='./img/head.png' /><span>" + msg + "</span></li>")
                    boxScroll(chatarea); //重置滚动条
                }
            }
        })
    }
})

index.css

.box {
    position: relative;
    width: 470px;
    height: 670px;
    margin: 20px auto;
    border-radius: 15px;
}

.header {
    display: table-cell;
    width: 470px;
    padding-left: 20px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    height: 50px;
    background-color: pink;
    vertical-align: middle;
}

.name {
    line-height: 50px;
    font-weight: normal;
    float: left;
    letter-spacing: 2px;
    margin-left: 20px;
    font-size: 18px;
    text-shadow: 0px 0px 5px #944846;
}

.header img {
    float: right;
    width: 35px;
    height: 35px;
    border-radius: 35px;
    margin-top: 10px;
    margin-right: 20px;
    box-shadow: 5px;
}

.chatarea {
    position: absolute;
    top: 50px;
    height: 570px;
    width: 100%;
    background-color: rgb(245, 245, 245);
    overflow: auto;
}

.enter {
    position: absolute;
    background-color: pink;
    height: 50px;
    width: 470px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    bottom: 0;
}

.enter img {
    float: left;
    width: 35px;
    height: 35px;
    border-radius: 35px;
    margin-top: 7px;
    margin-left: 20px;
    box-shadow: 5px;
}

.enterarea {
    margin-left: 30px;
    margin-top: 10px;
    width: 270px;
    height: 28px;
    border-radius: 10px;
    border: 0;
    box-shadow: 0 0 5px #f2fdfe;
    text-indent: 5px;
    outline: none;
}

.enterbtn {
    float: right;
    width: 60px;
    height: 30px;
    margin-right: 20px;
    margin-top: 10px;
    border-radius: 10px;
    border: 0px;
    box-shadow: 0 0 5px #f2fdfe;
    background-color: #00eeff;
}

.talk_list li {
    margin-top: 20px;
    margin-bottom: 20px;
    overflow: hidden;
}

.left_word img {
    float: left;
    width: 35px;
    height: 35px;
    border-radius: 35px;
    margin-top: 7px;
    margin-left: 15px;
    box-shadow: 5px;
}

.left_word span {
    float: left;
    border: 0px;
    border-radius: 10px;
    margin-left: 10px;
    padding: 10px 15px;
    max-width: 290px;
    font-size: 16px;
    line-height: 24px;
    background-color: #FFFFFF;
}

.right_word img {
    float: right;
    width: 35px;
    height: 35px;
    border-radius: 35px;
    margin-top: 7px;
    margin-right: 15px;
    box-shadow: 5px;
}

.right_word span {
    float: right;
    border: 0px;
    border-radius: 10px;
    margin-right: 10px;
    padding: 10px 15px;
    max-width: 290px;
    font-size: 16px;
    line-height: 24px;
    background-color: #FFFFFF;
}

reset.css

* {
    margin: 0;
    padding: 0;
}

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    /*IE6,7专有,照顾低版本浏览器*/
    *zoom: 1;
}

ul {
    margin: 0;
    padding: 0;
}

ul li {
    list-style: none;
}

m0_63400611

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
ajax案例:聊天机器人

使用到的接口http://www.liulongbin.top:3006/api/robothttp://www.liulongbin.top:3006/api/synthesize(黑马课程提供)需要用到jQuery库分析绑定发送按钮和输入框,分别在输入框按下回车键和鼠标点击发送时触发send()方法,此方法在外面定义,因为需要多次使用,send()方法内容包括获取输入框的内容val(),判断内容是否为空,是则返回空,否则在tali_list中插入一段html内容,即将输入框的内
复制链接

扫一扫