Ajax(二,案例聊天机器人)

案例 – 聊天机器人

1 演示案例要完成的效果

实现步骤&＃xff1a;

① 梳理案例的代码结构
② 将用户输入的内容渲染到聊天窗口
③ 发起请求获取聊天消息
④ 将机器人的聊天内容转为语音
⑤ 通过 播放语音
⑥ 使用回车键发送消息

2 梳理案例的代码结构

① 梳理页面的 UI 布局
② 将业务代码抽离到 chat.js 中
③ 了解 resetui() 函数的作用

3 将用户输入的内容渲染到聊天窗口

// 为发送按钮绑定点击事件处理函数
$(&＃39;#btnSend&＃39;).on(&＃39;click&＃39;, function () {
var text &＃61; $(&＃39;#ipt&＃39;).val().trim() // 获取用户输入的内容
if (text.length <&＃61; 0) { // 判断用户输入的内容是否为空
return $(&＃39;#ipt&＃39;).val(&＃39;&＃39;)
}
// 将用户输入的内容显示到聊天窗口中
$(&＃39;#talk_list&＃39;).append(&＃39;<li class&＃61;"right_word">
&＃39; &＃43; text &＃43; &＃39;</li>&＃39;)
resetui() // 重置滚动条的位置
$(‘#ipt’).val(&＃39;&＃39;) // 清空输入框的内容
// TODO: 发起请求&＃xff0c;获取聊天消息
})


4 发起请求获取聊天消息

function getMsg(text) {
$.ajax({
method: &＃39;GET&＃39;,
url: &＃39;http://ajax.frontend.itheima.net:3006/api/robot&＃39;,
data: {
spoken: text
},
success: function (res) {
if (res.message &＃61;&＃61;&＃61; &＃39;success&＃39;) {
var msg &＃61; res.data.info.text
$(&＃39;#talk_list&＃39;).append(&＃39;<li class&＃61;"left_word">
&＃39; &＃43; msg &＃43; &＃39;</li>&＃39;)
resetui()
// TODO: 发起请求&＃xff0c;将机器人的聊天消息转为语音格式
}
}
})
}


5 将机器人的聊天内容转为语音

function getVoice(text) {
$.ajax({
method: &＃39;GET&＃39;,
url: &＃39;http://ajax.frontend.itheima.net:3006/api/synthesize&＃39;,
data: {
text: text
},
success: function (res) {
// 如果请求成功&＃xff0c;则 res.voiceUrl 是服务器返回的音频 URL 地址
if (res.status &＃61;&＃61;&＃61; 200) {
$(&＃39;#voice&＃39;).attr(&＃39;src&＃39;, res.voiceUrl)
}
}
})
}


6 通过 播放语音

7 使用回车发送消息

// 让文本输入框响应回车事件后&＃xff0c;提交消息
$(&＃39;#ipt&＃39;).on(&＃39;keyup&＃39;, function (e) {
// e.keyCode 可以获取到当前按键的编码
if (e.keyCode &＃61;&＃61;&＃61; 13) {
// 调用按钮元素的 click 函数&＃xff0c;可以通过编程的形式触发按钮的点击事件
$(&＃39;#btnSend&＃39;).click()
}
})