四、聊天机器人

四、聊天机器人

 

实现步骤： 梳理案例的代码结构 将用户输入的内容渲染到聊天窗口 发起请求获取聊天消息 将机器人的聊天内容转为语音 通过 <audio> 播放语音 使用回车键发送消息

9.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: 发起请求，获取聊天消息
})
​

9.4 发起请求获取聊天消息

function getMsg(text) {
    $.ajax({
      method: 'GET',
      url: