英文网站建设方案模板高校,艺术字设计,wordpress插件中文,天元建设集团有限公司第一建筑工程公司Ajax-02
今天内容#xff1a; 安装浏览器插件 聊天机器人案例 Form表单提交 模板引擎#xff08;新的概念#xff0c;难点#xff09; 两个案例
Chrome浏览器插件安装
安装步骤
下载插件的网站#xff1a; https://www.gugeapps.net/ 无需扫码 http://www.cnplu…Ajax-02
今天内容 安装浏览器插件 聊天机器人案例 Form表单提交 模板引擎新的概念难点 两个案例
Chrome浏览器插件安装
安装步骤
下载插件的网站 https://www.gugeapps.net/ 无需扫码 http://www.cnplugins.com/ 需要扫二维码验证 从上述两个网站下载的插件和从Chrome商店下载的插件是一样的。只不过Chrome商店被和谐了打不开。
如何安装使用插件
下载下来的插件形如 JSONView.crx。可以把后缀换成 zip使用解压软件解压它得到一个文件夹 Chrome -- 更多工具 -- 扩展程序 -- 打开开发者模式 -- 加载已解压的扩展程序 -- 选择上一步解压得到的文件夹 最终效果 jsonview插件
美化JSON的插件
postman
测试接口的工具 聊天机器人案例
案例演示与分析
聊天的时候每个人说的话用一 li 标签标示 小思同学说的话li classleft_word我们说的话li classright_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 classright_wordimg srcimg/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 classleft_wordimg srcimg/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 typecheckbox checked /input typeradio 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” 隐藏域selectoptiontextarea 多行文本域 按钮 !--下面的按钮 会 造成表单的提交--
button 提交 /button button typesubmit/button input typesubmit value提交 /!--下面的按钮 不会 造成表单的提交--
button typebutton提交button input typebutton value提交 /form标签的属性
!---
action 属性表示表单提交的地址默认空表示提交到当前页面
method 属性表示提交方式可选GET和POST默认是GET
---
form actionhttp://www.liulongbin.top:3006/api/addbook methodPOSTinput typetext nameusernamebrbutton typesubmit提交/button
/form提前了解
GET方式提交表单我们输入的值(请求参数)会拼接到url后面。POST方式提交表单请求参数不会拼接到url上。 推荐的提交表单的方案
监听表单的提交事件阻止表单提交阻止标签的默认行为使用JS代码来收集表单数据将收集到的数据通过ajax来提交
使用jQuery提供的方法来快速收集表单数据 $(form).serialize(); – 得到一个字符串 booknameaaaauthorbbbpublisherccc$(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}}
