Ajax入门——第一节:案例：利用jQuery和Ajax编码《聊天机器人》——陪你一起聊天

最新推荐文章于 2024-01-31 09:49:22 发布

不能瞌睡呀

最新推荐文章于 2024-01-31 09:49:22 发布

阅读量216

点赞数

分类专栏： Ajax jQuery 文章标签： jquery ajax javascript

本文链接：https://blog.csdn.net/qq_56897195/article/details/125629427

版权

jQuery 同时被 2 个专栏收录

12 篇文章 1 订阅

订阅专栏

Ajax

6 篇文章 1 订阅

订阅专栏

文章目录

9. 案例 – 聊天机器人

9. 案例 – 聊天机器人

9.1 演示案例要完成的效果

在这里插入图片描述

实现步骤：

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

9.2 梳理案例的代码结构

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

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: '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: 发起请求，将机器人的聊天消息转为语音格式
        }
      }
    })
}

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

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

9.6 通过播放语音

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

9.7 使用回车发送消息

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

9.8 整体代码：

<!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>
  <!-- 导入一个布局的jQuery-ui库 -->
  <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;" id="talk_list">
        <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" id="ipt" />
      <input type="button" value="发 送" class="input_sub" id="btnSend" />
    </div>
  </div>
  <!-- 注意：只要为 audio 指定了新的 src 属性，而且指定了 autoplay，那么，语音就会自动播放 -->
  <audio src="" id="voice" autoplay style="display: none;"></audio>
  <script type="text/javascript" src="./js/scroll.js"></script>
  <script src="./js/chat.js"></script>
</body>

</html>

$(function () {
  // 初始化右侧滚动条
  // 这个方法定义在scroll.js中
  resetui()

  // 为发送按钮绑定鼠标点击事件
  $('#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>')
    $('#ipt').val('')
    // 重置滚动条的位置
    resetui()
    // 发起请求，获取聊天内容
    getMsg(text)
  })

  // 获取聊天机器人发送回来的消息
  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)
        }
      }
    })
  }

  // 把文字转化为语音进行播放
  function getVoice(text) {
    $.ajax({
      method: 'GET',
      url: 'http://www.liulongbin.top:3006/api/synthesize',
      data: {
        text: text
      },
      success: function (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()
    }
  })
})