聊天机器人案例（Ajax）

本文介绍: 基本功能：1. 给发送按钮绑定点击事件2.获取输入框中的用户输入3. 判断用户输入是否为空4.把用户输入的文字发送到后台，把用户说的话渲染到页面中5. 获取结果，渲染到页面上6.把机器人说的话转换为语音7.按下回车，也可以说话基本代码如下：<!DOCTYPE html&g t;<html lang=”en”&g t;<head> <meta chars et=”UTF-8″ /> <meta name=”v.

基本 功能：

1. 给发送按钮绑定点击事件

2.获取输入框中的用户输入

3. 判断用户输入是否为空

4.把用户输入的文字发送到后台，把用户说的话渲染到页面中

5. 获取结果，渲染到页面上

6.把机器人说的话转换为语音

7.按下回车，也可以说话

基本 代码 如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/main.css" />
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
    <title>聊天机器人</title>
</head>

<body>
    <div class="wrap">
        <!-- 头部 Header 区域 -->
        <div class="header">
            <h3>小思同学</h3>
            <img src="img/person01.png" alt="icon" />
        </div>
        <!-- 中间 聊天内容区域 -->
        <div class="main">
            <ul class="talk_list" style="top: 0px;">
                <!-- <li class="left_word">
                    <img src="img/person01.png" /> <span>你好</span>
                </li>
                <li class="right_word">
                    <img src="img/person02.png" /> <span>你好哦</span>
                </li>
                <li class="left_word">
                    <img src="img/person01.png" /> <span>你好</span>
                </li>
                <li class="right_word">
                    <img src="img/person02.png" /> <span>你好哦</span>
                </li>
                <li class="left_word">
                    <img src="img/person01.png" /> <span>你好</span>
                </li>
                <li class="right_word">
                    <img src="img/person02.png" /> <span>你好哦</span>
                </li>
                <li class="left_word">
                    <img src="img/person01.png" /> <span>你好</span>
                </li>
                <li class="right_word">
                    <img src="img/person02.png" /> <span>你好哦</span>
                </li>
                <li class="left_word">
                    <img src="img/person01.png" /> <span>你好</span>
                </li>
                <li class="right_word">
                    <img src="img/person02.png" /> <span>你好哦</span>
                </li>
                <li class="left_word">
                    <img src="img/person01.png" /> <span>你好</span>
                </li>
                <li class="right_word">
                    <img src="img/person02.png" /> <span>你好哦</span>
                </li> -->
            </ul>
            <div class="drag_bar" style="display: none;">
                <div class="drager ui-draggable ui-draggable-handle" style="display: none; height: 412.628px;"></div>
            </div>
        </div>
        <!-- 底部 消息编辑区域 -->
        <div class="footer">
            <img src="img/person02.png" alt="icon" />
            <input type="text" placeholder="说的什么吧..." class="input_txt" />
            <input type="button" value="发 送" class="input_sub" />
        </div>
        <audio src="" autoplay style="display:none"></audio>
    </div>
    <script type="text/javascript" src="js/scroll.js"></script>
    <script src="./js/axios.js"></script>
    <script>
        $(function() {
            // 初始化右侧滚动条
            // 这个方法定义在scroll.js中
            resetui()
        })

        function common() {
            let text = input.value.trim()
                // 判断输入的内容是否为空
            if (text === '') {
                return
            }
            // 把用户说的话渲染到页面
            let ul = document.querySelector('ul')
            let liRight = document.createElement('li')
            liRight.classList.add('right_word')
            liRight.innerHTML = `<img src="img/person02.png" /> <span>${text}</span>`
            ul.append(liRight)
                // 清空聊天框
            input.value = ''
                // 重置滚动条
            resetui()

            // 获取机器人说的话并把机器人说的话渲染到页面
            axios({
                url: 'http://www.liulongbin.top:3006/api/robot',
                params: {
                    spoken: text
                }
            }).then(({
                data: res
            }) => {
                let ul = document.querySelector('ul')
                let lileft = document.createElement('li')
                lileft.classList.add('left_word')
                lileft.innerHTML = `<img src="img/person01.png" /> <span>${res.data.info.text}</span>`
                ul.append(lileft)
                input.value = ''
                    // 重置滚动条
                resetui()
                audio(res.data.info.text)
            })

            // 把机器人说的话转化成语音
            function audio(text) {
                axios({
                    url: 'http://www.liulongbin.top:3006/api/synthesize',
                    params: {
                        text
                    }
                }).then(({
                    data
                }) => {
                    if (data.status === 200) {
                        let audio = document.querySelector('audio')
                        audio.src = data.voiceUrl;
                    }
                })
            }
        }

        let sendBtn = document.querySelector('.input_sub')
            // 给发送按钮添加点击事件
        let input = document.querySelector('.input_txt')
        sendBtn.addEventListener('click', function() {
            common()
        })

        // 按回车键也可以发送内容
        input.addEventListener('keyup', function(e) {
            if (e.key === 'Enter') {
                common()
            }
        })
    </script>
</body>

</html>