1 演示案例要完成的效果

实现步骤：

① 梳理案例的代码结构

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

③ 发起请求获取聊天消息

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

⑤ 通过 <audio> 播放语音

⑥ 使用回车键发送消息

2 梳理案例的代码结构

① 梳理页面的 UI 布局

② 将业务代码抽离到 chat.js 中

③ 了解 resetui () 函数的作用

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

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

4 发起请求获取聊天消息

function getMsg(text) {$.ajax({method: 'GET',url: 'http://ajax.frontend.itheima.net:3006/api/robot',data: {spoken: text},success: function (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()// TODO: 发起请求，将机器人的聊天消息转为语音格式}}})
}

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

  function getVoice(text) {$.ajax({method: 'GET',url: 'http://www.liulongbin.top:3006/api/robot',data: {text: text},success: function (res) {// 如果请求成功，则 res.voiceUrl 是服务器返回的音频 URL 地址if (res.status === 200) {$('#voice').attr('src', res.voiceUrl)}}})}

6 通过 <audio> 播放语音

<!-- 音频播放语音内容 -->
<audio src="" id="voice" autoplay style="display: none;"></audio>

7 使用回车发送消息

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

AJAX案例 – 聊天机器人相关推荐

聊天机器人（Ajax实现聊天机器人接口的调用）
文章目录前言一.UI布局二.用户内容渲染到聊天窗口三.获取聊天机器人消息 1.jquery中的ajax 2.调用机器人接口四.将机器人的聊天内容转化为语音播放五.使用回车发送消息总结 - ...
ajax练习——聊天机器人
一.效果演示二.代码 html <!DOCTYPE html> <html lang="zh-cn"><head><meta chars ...
ajax实现聊天机器人（语音助手）完整源码
实现思路:(1)点击发送按钮触发点击事件,进行非空判断,如果输入内容为空或空格,跳出弹窗"输入内容不能为空"(2)设置全局空数组用于存放用户和机器人的语言,为了进行区分,可在数组中 ...
Uniapp案例-聊天机器人demo
目的: 1.掌握uni.request 2.掌握button @click点击事件 3.掌握v-model实现双向绑定代码: template区 <template> <v ...
Ajax — 聊天机器人演示
<body><div class="wrap"><div class="header& ...
python自然语言处理与方言聊天机器人_聊天机器人Python实现案例 | 老炮儿聊机器语音...
点击上方蓝色字体,关注:九三智能控世界上最早的聊天机器人诞生于20世纪80年代,名为"阿尔贝特",用BASIC语言编写而成.目前,聊天机器人从功能和技术的角度,可以分为两类,一类 ...
（微信）聊天机器人--实用案例
关于微信聊天机器人或者聊天机器人,大家所熟知的就是图灵机器人,聊天比较灵活,可以承担一部分客服的工作.除了图灵机器人,除了大家知道的客服功能,今天为大家重点分享几个机器人的使用方法,相信这些机器人可以 ...
AIGC：ChatGPT(一个里程碑式的对话聊天机器人)的简介(意义/功能/核心技术等)、使用方法(七类任务)、案例应用(提问基础性/事实性/逻辑性/创造性/开放性的问题以及编程相关)之详细攻略
AIGC:ChatGPT(一个里程碑式的对话聊天机器人)的简介(意义/功能/核心技术等).使用方法(七类任务).案例应用(提问基础性/事实性/逻辑性/创造性/开放性的问题以及编程相关)之详细攻略导读 ...
使用 ChatterBot 库制作一个聊天机器人
作者 | 周萝卜来源 | 萝卜大杂烩我们学习一些如何使用 ChatterBot 库在 Python 中创建聊天机器人,该库实现了各种机器学习算法来生成响应对话,还是挺不错的 1什么是聊天机器人聊 ...

AJAX案例 – 聊天机器人

1 演示案例要完成的效果

2 梳理案例的代码结构

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

4 发起请求获取聊天消息

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

6 通过 <audio> 播放语音

7 使用回车发送消息

AJAX案例 – 聊天机器人相关推荐

最新文章

热门文章