🤖️ 哈喽！大家好呀。如果无聊就和机器人聊聊天吧
在初步进入Ajax学习 就忍不住给大家分享今天的劳动成果啦
先来看看效果图：
功能实现：
点击发送按钮事件 将用户输入的内容渲染到页面中 点击回车键将表单的内容渲染到页面中 获取机器人的内容 渲染到页面中 播放机器人的内容先来看看项目的总体结构
引入相关的文件：
html框架比较简单
<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;" id="talk_list"> <li class="left_word"> MoluSjt <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" id="ipt" /> <input type="button" value="发 送" class="input_sub" id="btnSend" /> </div> </div> <audio src="" id="voice" autoplay style="display: none;"></audio>
<audio src="" id="voice" autoplay style="display: none;"></audio>这里的音频播放标签，一定要添加autoplay属性，自动播放，不过不添加这个属性，播放机器人的功能就不能实现哟
main.css
body { font-family: 'Microsoft YaHei';}.wrap { position: fixed; width: 450px; left: 50%; margin-left: -225px; top: 20px; bottom: 20px; border: 1px solid #ebebeb; background-color: #fff; border-radius: 10px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.1); overflow: hidden;}.header { height: 55px; background: linear-gradient(90deg, rgba(246, 60, 47, 0.6), rgba(128, 58, 242, 0.6)); overflow: hidden;}.header h3 { color: #faf3fc; line-height: 55px; font-weight: normal; float: left; letter-spacing: 2px; margin-left: 25px; font-size: 18px; text-shadow: 0px 0px 5px #944846;}.header img { float: right; margin: 7px 25px 0 0; border-radius: 20px; box-shadow: 0 0 5px #f7f2fe;}.main { position: absolute; left: 0; right: 0; top: 55px; bottom: <span>' + text + '</span></li>') $('#ipt').val('')//文本为空 // 重置滚动条的位置 resetui() // 发起请求，获取聊天内容 getMsg(text) })接下来就是机器人的回复内容啦：
用一个getMsg函数封装 传递放入参数就是用户输入的内容
下一些Ajax的get获取内容，根据文档提供的地址http://www.liulongbin.top:3006/api/robot
当 res.message === 'success' 表示获取聊天信息成功 就接受聊天信息，将信息追加到页面
// 获取聊天机器人发送回来的消息 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/person01.png" /> <span>' + msg + '</span></li>') // 重置滚动条的位置 resetui() // 调用 getVoice 函数，把文本转化为语音 getVoice(msg) } } }) }然后就是将文本转化为语音播放功能
同样的封装一个函数getVoice() 传递的参数是接受到的机器人的聊天消息msg
// 把文字转化为语音进行播放 function getVoice(text) { $.ajax({ method: 'GET', url: ' http://www.liulongbin.top:3006/api/synthesize', data: { text: text }, success: function(res) { // console.log(res) //下面的值可以通过console.log(res)输出查看里面的属性值 if (res.status === 200) { // 播放语音 路径 $('#voice').attr('src', res.voiceUrl) } } }) }最后一个功能就是用户按回车也可以发送消息
// 为文本框绑定 keyup 事件 $('#ipt').on('keyup', function(e) { // console.log(e.keyCode) if (e.keyCode === 13) { // console.log('用户弹起了回车键') $('#btnSend').click() } })大家赶快去试试吧
