聊天机器人案例（Ajax）
·
基本功能：
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>
DAMO开发者矩阵，由阿里巴巴达摩院和中国互联网协会联合发起，致力于探讨最前沿的技术趋势与应用成果，搭建高质量的交流与分享平台，推动技术创新与产业应用链接，围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐
1
0- 0
已为社区贡献3条内容
所有评论(0)