Ajax — 第二天_scroll.js resetui

Ajax-02

今天内容：

• 安装浏览器插件

• 聊天机器人案例

• Form表单提交

• 模板引擎（新的概念，难点）

• 两个案例

Chrome浏览器插件安装

安装步骤

下载插件的网站：

• https://www.gugeapps.net/ 无需扫码

• http://www.cnplugins.com/ 需要扫二维码验证

• 从上述两个网站下载的插件，和从Chrome商店下载的插件是一样的。只不过Chrome商店被和谐了，打不开。

如何安装使用插件

• 下载下来的插件形如 JSONView.crx。可以把后缀换成 zip
• 使用解压软件解压它，得到一个文件夹

• Chrome --> 更多工具 --> 扩展程序 --> 打开开发者模式 --> 加载已解压的扩展程序 --> 选择上一步解压得到的文件夹

• 最终效果

jsonview插件

美化JSON的插件

postman

测试接口的工具

聊天机器人案例

案例演示与分析

• 聊天的时候，每个人说的话，用一 <li> 标签标示
  • 小思同学说的话，<li class="left_word">
  • 我们说的话，<li class="right_word">
• 后面有一个 <audio src=""> ，用于播放语音，我们只需要设置src属性为一个音频文件地址即可自动播放
• 需要我们手动加载 scroll.js ，它里面封装的一个函数 resetui() ，用于重置聊天区的滚动条。

渲染自己说的话

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

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

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

// 封装一个函数，渲染自己说的话
    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);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

获取并渲染机器人说的话

// 获取机器人的回应，并渲染到页面中
    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>${res.data.info.text}</span>
          </li>`;
          // 把str追加到ul中
          $('#talk_list').append(str);
          // 重置滚动条
          resetui();
          // 调用把文字转成语音的函数
          playVoice(res.data.info.text);
        }
      });
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

把机器人说的话转成语音

// 播放语音
    function playVoice (text) {
      $.get('http://www.liulongbin.top:3006/api/synthesize', {text: text}, function (res) {
        // console.log(res);
        if (res.status === 200) {
          // 设置 audio 标签的src属性
          $('#voice').attr('src', res.voiceUrl);
        }
      });
    }
1
2
3
4
5
6
7
8
9
10

输入框按回车和点击发送一样的效果

// 优化 - 在输入框里按回车，也能够发送（让按回车的效果和点击发送按钮的效果一样）
    $('#ipt').keyup(function (e) {
      // 键盘弹起之后，触发的函数
      // 获取键盘的keyCode值
      // let keyCode = e.keyCode; // jQuery封装的属性，可以获取到键盘的keyCode
      let keyCode = e.which; // jQuery封装的属性，也可以获取到键盘的keyCode
      // 判断，是否按的是回车键
      if (keyCode === 13) {
        // 说明按了回车键
        // 解决方案一：renderMyWord($(this).val().trim());
        // 解决方案二：触发 发送按钮的单击事件
        // $('#btnSend').click(); // 
        $('#btnSend').trigger('click');
      }
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

attr和prop

prop适合用在属性的值是布尔值的情况下。比如：

• <input readonly />
• <input type="checkbox" checked />
• <input type="radio" checked />
• <input disabled />
• <select> <option selected></option> </select>

除此之外，其他的任何属性都用 attr();

表单的组成

• form标签

• 表单域

  • input type=“text”
  • input type=“password”
  • input type=“checkbox”
  • input type=“radio”
  • input type=“file” 文件域
  • input type=“hidden” 隐藏域
  • select>option
  • textarea 多行文本域

• 按钮

  <!--下面的按钮 会 造成表单的提交-->
  <button> 提交 </button>   ====  <button  type="submit"></button>   ====   <input type="submit" value="提交" />
  
  <!--下面的按钮 不会 造成表单的提交-->
  <button  type="button">提交<button>  =====   <input type="button" value="提交" />
  1
  2
  3
  4
  5

form标签的属性

<!--- 
action 属性，表示表单提交的地址，默认空，表示提交到当前页面
method 属性，表示提交方式，可选GET和POST，默认是GET
--->
<form action="http://www.liulongbin.top:3006/api/addbook" method="POST">
    <input type="text" name="username"><br>
    <button type="submit">提交</button>
</form>
1
2
3
4
5
6
7
8

提前了解：

• GET方式提交表单，我们输入的值(请求参数)会拼接到url后面。
• POST方式提交表单，请求参数，不会拼接到url上。

推荐的提交表单的方案

• 监听表单的提交事件
• 阻止表单提交（阻止标签的默认行为）
• 使用JS代码来收集表单数据
• 将收集到的数据，通过ajax来提交

使用jQuery提供的方法来快速收集表单数据

• $('form').serialize(); – 得到一个字符串

  bookname=aaa&author=bbb&publisher=ccc
  1

• $('form').serializeArray(); – 得到一个数组

  [
      {name: 'bookname', value: 'aaa'},
      {name: 'author', value: 'bbb'},
      {name: 'publisher', value: 'ccc'}
  ]
  1
  2
  3
  4
  5

细节问题：

• 表单域必须指定name属性。否则，serialize或serializeArray不会收集到值
• 使用serialize和serializeArray得到的结果，可以直接作为ajax请求的data使用。

评论案例

略

监听表单提交事件说明

监听表单提交事件，可以有下面两种写法：

• $('form').submit(事件处理函数) — 推荐方案
• $('提交按钮').click(事件处理函数);

模板引擎简介

• 字符串大量拼接的问题

  • 性能及其低下
  • 结构上，html和js代码混合到一起了

• 解决办法

  • 模板引擎

• 模板引擎

  • 模板引擎，可以把 模板结构 和 数据组合到一起，形成最终的html页面

art-tempalte模板引擎的使用步骤

1. 加载 template-web.js
2. 设置模板（就是我们前面写好的HTML页面）
   • 模板要使用script标签包裹
   • 指定script标签的type=“text/html"
   • 指定script标签的id=”值“
3. 有数据了，然后调用 template函数，完成模板和数据的组合
   • 数据可以自己模拟，真实情况，数据一般都是ajax请求返回的数据
   • template函数
     • 参数1：模板的id
     • 参数2：要展示的数据，使用JS对象形式的数据
     • 返回值：模板和数据组合好的结果
4. 把组合好的结果，放到页面中
5. 最后，使用 {{title}} 这样的模板语法，指定数据展示的位置。

模板语法

• 原样输出 - 适用于 直接显示标签的样式，而不是使用实体符合

  • {{@title}}

• 直接输出

  • {{name}}

• 条件判断

  {{if  条件}}
  xxx
  {{else}}
  yyy
  {{/if}}
  1
  2
  3
  4
  5

• 循环

  {{each hobby val key}}
  	{{val}}  --- 表示数组的值
  	{{key}}  --- 表示数组的下标
  {{/each}}
  1
  2
  3
  4