AJAX编程第一天案例2：聊天机器人

综合案例2-聊天机器人

案例演示与分析

聊天机器人接口文档

请求的根路径

http://www.liulongbin.top:3006

获取机器人回应的内容

• 接口URL： /api/robot
• 调用方式： GET
• 参数格式：
  
• 响应格式：
  
• 返回示例：

{
   
  "data": {
   
    "info": {
   
      "text": "今天天气不错哦~"
    },
  	"type": 5000
  },
  "message": "success"
}

将文字转换为语音

• 接口URL： /api/synthesize
• 调用方式： GET
• 参数格式：
  
• 响应格式：
  
• 返回示例：

{
   
    "message: "success",
	"status": 200,
	"voiceUrl": "https://dds.dui.ai/runtime/v1/synthesize?voiceId=q..." // 略
};

渲染自己说的话

点击发送按钮的时候，获取输入框的值，然后调用函数。

// 单击事件
// 给 发送 注册单击事件 

    $('#btnSend').on('click', function () {
   
      // 1. 渲染自己说的话
      let myWord = $('#ipt').val().trim(); // 取得输入框的值
      renderMyWord(myWord);
      // 2. 得到对方的回应，并渲染到页面中
      // 3. 播放语音
    });

// 封装一个函数，渲染自己说的话
    function renderMyWord (myWord) {
   
      let str = `<li class="right_word">
          <img src="img/person02.png" /> <span>${
     myWord}</span>
        </li>`;

      // 把str放到ul后面
      $('#talk_list').append(str);
      // 清空输入框的内容
      $('#ipt').val('');
      // 重置滚动条，否则后面说的话看不见了
      resetui(); // scroll.js 里面封装的函数，作用是可以重置滚动条
      // 渲染机器人的回应
      renderRobotWord(myWord);
    }

获取并渲染机器人说的话

// 获取机器人的回应，并渲染到页面中
    function renderRobotWord (myWord) {
   
      // 按照接口文档，发送ajax请求。获取机器人的回应
      $.get('http://www.liulongbin.top:3006/api/robot', {
   spoken: myWord}, function (res) {
   
        // console.log(res);
        if (res.message === 'success') {
   
          // 组装一个li标签。把机器人的回应渲染到页面中
          let str = `<li class="left_word">
            <img src="img/person01.png" /> <span>${