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. 播放语音});
// 封装一个函数，渲染自己说的话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>${res.data.info.text}</span></li>`;// 把str追加到ul中$('#talk_list').append(str);// 重置滚动条resetui();// 调用把文字转成语音的函数playVoice(res.data.info.text);}});}
把机器人说的话转成语音
// 播放语音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);}});}
输入框按回车和点击发送一样的效果
// 优化 - 在输入框里按回车，也能够发送（让按回车的效果和点击发送按钮的效果一样）$('#ipt').keyup(function (e) {// 键盘弹起之后，触发的函数// 获取键盘的keyCode值// let keyCode = e.keyCode; // jQuery封装的属性，可以获取到键盘的keyCodelet keyCode = e.which; // jQuery封装的属性，也可以获取到键盘的keyCode// 判断，是否按的是回车键if (keyCode === 13) {// 说明按了回车键// 解决方案一：renderMyWord($(this).val().trim());// 解决方案二：触发 发送按钮的单击事件// $('#btnSend').click(); // $('#btnSend').trigger('click');}});
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="提交" />
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>
提前了解：
- GET方式提交表单，我们输入的值(请求参数)会拼接到url后面。
- POST方式提交表单，请求参数，不会拼接到url上。
推荐的提交表单的方案
- 监听表单的提交事件
- 阻止表单提交（阻止标签的默认行为）
- 使用JS代码来收集表单数据
- 将收集到的数据，通过ajax来提交
使用jQuery提供的方法来快速收集表单数据
-
$('form').serialize();– 得到一个字符串bookname=aaa&author=bbb&publisher=ccc -
$('form').serializeArray();– 得到一个数组[{name: 'bookname', value: 'aaa'},{name: 'author', value: 'bbb'},{name: 'publisher', value: 'ccc'} ]
细节问题：
- 表单域必须指定
name属性。否则，serialize或serializeArray不会收集到值 - 使用serialize和serializeArray得到的结果，可以
直接作为ajax请求的data使用。
评论案例
略
监听表单提交事件说明
监听表单提交事件，可以有下面两种写法：
$('form').submit(事件处理函数)— 推荐方案$('提交按钮').click(事件处理函数);
模板引擎简介
-
字符串大量拼接的问题
- 性能及其低下
- 结构上，html和js代码混合到一起了
-
解决办法
- 模板引擎
-
模板引擎
- 模板引擎，可以把 模板结构 和 数据组合到一起，形成最终的html页面
art-tempalte模板引擎的使用步骤
- 加载
template-web.js - 设置模板（就是我们前面写好的HTML页面）
- 模板要使用
script标签包裹 - 指定
script标签的type=“text/html" - 指定
script标签的id=”值“
- 模板要使用
- 有数据了，然后调用 template函数，完成模板和数据的组合
- 数据可以自己模拟，真实情况，数据一般都是ajax请求返回的数据
- template函数
- 参数1：模板的id
- 参数2：要展示的数据，使用JS对象形式的数据
- 返回值：模板和数据组合好的结果
- 把组合好的结果，放到页面中
- 最后，使用
{{title}}这样的模板语法，指定数据展示的位置。
模板语法
-
原样输出 - 适用于 直接显示标签的样式，而不是使用实体符合
{{@title}}
-
直接输出
{{name}}
-
条件判断
{{if 条件}} xxx {{else}} yyy {{/if}} -
循环
{{each hobby val key}}{{val}} --- 表示数组的值{{key}} --- 表示数组的下标 {{/each}}
