Ajax--初识Ajax--案例 - 聊天机器人（黑马俩个新接口）

演示案例要完成的效果

实现步骤：

①梳理案例的代码结构

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

③发起请求获取聊天消息

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

⑤通过 <audio> 播放语音

⑥使用回车键发送消息

梳理案例的代码结构

①梳理页面的 UI 布局

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

③了解 resetui() 函数的作用

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>')
    resetui() // 重置滚动条的位置
    $(‘#ipt’).val('') // 清空输入框的内容

    // TODO: 发起请求，获取聊天消息
})

  发起请求获取聊天消息

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

 这里注意的是接口换成新的了

 http://www.liulongbin.top:3006/api/robot

新

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></span></li>')
                    resetui()
                }
            }
        });
    }

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

  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)
        }
      }
    })
  }

通过 <audio> 播放语音

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

这里注意的是也要用新接口

 http://www.liulongbin.top:3006/api/synthesize

 function getVoice(text){
        $.ajax({
            type:"get",
            url:'http://www.liulongbin.top:3006/api/synthesize',
            data:{
                text:text
            },
            success:function(res){
                console.log(res);
                if(res.status===200){
                    // 播放语音
                    $("#voics").attr('src',res.voiceUrl)
                }
                // console.log(res);
            }
        })
    }

 使用回车键发送消息

   $('#ipt').on('keyup',function(e){
        console.log(e.keyCode);
        if(e.keyCode==13){
            // 调用按钮的click函数，可以通过编程的方式触发按钮的点击事件
            $("#btnSend").click()
        }
    })
  })

这里又要注意keyCode的C是大写

完整代码

$(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({
            type: "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></span></li>')
                    resetui()
                    // 调用getVoice（）函数，把语音转换为文本
                    getVoice(msg)
                }
            }
        });
    }
    // 把文字转换为语音
    function getVoice(text){
        $.ajax({
            type:"get",
            url:'http://www.liulongbin.top:3006/api/synthesize',
            data:{
                text:text
            },
            success:function(res){
                console.log(res);
                if(res.status===200){
                    // 播放语音
                    $("#voics").attr('src',res.voiceUrl)
                }
                // console.log(res);
            }
        })
    }
    // 让文本输入框响应回车事件后，提交消息
    $('#ipt').on('keyup',function(e){
        console.log(e.keyCode);
        if(e.keyCode==13){
            // 调用按钮的click函数，可以通过编程的方式触发按钮的点击事件
            $("#btnSend").click()
        }
    })
  })

 <!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>
    <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>
        </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 style="display: none;" 语音会自动播放 并且隐藏起来 -->
    <audio src="" id="voics" autoplay style="display: none;"></audio>
    <script type="text/javascript" src="js/scroll.js"></script>
    <script src="js/chart.js"></script>
  </body>
</html>

效果