河北省建设机械协会网站,宁波seo入门教程,wordpress数据库删不掉,WordPress安卓APP不能绑定文章目录 一、form表单的基本使用1、什么是表单2、表单的组成部分3、 form标签的属性4、表单的同步提交及缺点#xff08;1#xff09; 什么是表单的同步提交#xff08;2#xff09; 表单同步提交的缺点#xff08;3#xff09; 如何解决表单同步提交的缺点 二、… 文章目录 一、form表单的基本使用1、什么是表单2、表单的组成部分3、 form标签的属性4、表单的同步提交及缺点1 什么是表单的同步提交2 表单同步提交的缺点3 如何解决表单同步提交的缺点 二、通过Ajax提交表单数据1、 监听表单提交事件2、 阻止表单默认提交行为3、 快速获取表单中的数据1 serialize()函数2serialize()函数示例 三、案例评论列表1、渲染UI结构2、获取评论列表3、发表评论 四、模板引擎的基本概念1、渲染UI结构时遇到的问题2、什么是模板引擎3、模板引擎的好处 五、art-template模板引擎1、art-template简介2、art-template的安装3、 art-template模板引擎的基本使用1 使用传统方式渲染UI结构2 art-template的使用步骤 4、art-template标准语法1什么是标准语法2 标准语法 - 输出3 标准语法 – 原文输出4 标准语法 – 条件输出5 标准语法 – 循环输出6 标准语法 – 过滤器7综合使用演示 六、模板引擎的实现原理1、正则与字符串操作1基本语法2分组3 字符串的replace函数4 多次replace5使用while循环replace6 replace替换为真值 2、实现简易的模板引擎1定义模板结构2预调用模板引擎3封装 template 函数4导入并使用自定义的模板引擎 一、form表单的基本使用
1、什么是表单
表单在网页中主要负责数据采集功能。HTML中的form标签就是用于采集用户输入的信息并通过form标签的提交操作把采集到的信息提交到服务器端进行处理。
2、表单的组成部分
forminput typetext nameemail_or_mobile /input typepassword namepassword /input typecheckbox nameremember_me checked /button typesubmit提交/button
/form表单由三个基本部分组成
表单标签表单域包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮
3、 form标签的属性
form标签用来采集数据form标签的属性则是用来规定如何把采集到的数据发送到服务器。
属性值描述actionURL地址规定当提交表单时向何处发送表单数据methodget或post规定以何种方式把表单数据提交到 action URLenctypeapplication/x-www-form-urlencoded在发送前编码所有字符。默认, multipart/form-data不对字符编码。在使用包含文件上传控件的表单时必须使用该值, text/plain空格转换为 “” 加号但不对特殊字符编码。很少用规定在发送表单数据之前如何对其进行编码target_blank(在新窗口中打开) _self(默认。在相同的框架中打开) _parent在父框架集中打开。很少用 _top在整个窗口中打开。很少用 framename 在指定的框架中打开。很少用规定在何处打开 action UR
注意
get 方式适合用来提交少量的、简单的数据。post 方式适合用来提交大量的、复杂的、或包含文件上传的数据。在实际开发中form 表单的 post 提交方式用的最多很少用 get。例如登录、注册、添加数据等表单操作都需要使用 post 方式来提交表单。 form action/login target_blank methodpostinput typetext nameemail_or_mobile /input typepassword namepassword /button typesubmit提交/button/form4、表单的同步提交及缺点
1 什么是表单的同步提交
通过点击 submit 按钮触发表单提交的操作从而使页面跳转到 action URL 的行为叫做表单的同步提交。
2 表单同步提交的缺点
form表单同步提交后整个页面会发生跳转跳转到 action URL 所指向的地址用户体验很差。form表单同步提交后页面之前的状态和数据会丢失。
3 如何解决表单同步提交的缺点
解决方案表单只负责采集数据Ajax 负责将数据提交到服务器。
二、通过Ajax提交表单数据
1、 监听表单提交事件
在 jQuery 中可以使用如下两种方式监听到表单的提交事件 script$(function () {// 第一种方式$(#f1).submit(function () {alert(监听到了表单的提交事件)})// 第二种方式$(#f1).on(submit, function () { alert(监听到了表单的提交事件2)})})/script2、 阻止表单默认提交行为
当监听到表单的提交事件以后可以调用事件对象的 event.preventDefault() 函数来阻止表单的提交和页面的跳转示例代码如下 $(#f1).on(submit, function (e) { alert(监听到了表单的提交事件2)e.preventDefault()})3、 快速获取表单中的数据
1 serialize()函数
为了简化表单中数据的获取操作jQuery 提供了 serialize() 函数其语法格式如下
$(selector).serialize()serialize() 函数的好处可以一次性获取到表单中的所有的数据。
2serialize()函数示例
form idform1input typetext nameusername /input typepassword namepassword /button typesubmit提交/button
/form$(#form1).serialize()
// 调用的结果
// username用户名的值password密码的值注意在使用 serialize() 函数快速获取表单数据时必须为每个表单元素添加 name 属性
三、案例评论列表
1、渲染UI结构 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlelink relstylesheet href./lib/bootstrap.css /script src./lib/jquery.js/scriptscript src./js/cmt.js/script
/headbody stylepadding: 15px;!-- 评论面板 --div classpanel panel-primarydiv classpanel-headingh3 classpanel-title发表评论/h3/divform classpanel-body idformAddCmtdiv评论人/divinput typetext classform-control nameusername autocompleteoff /div评论内容/divtextarea classform-control namecontent/textareabutton typesubmit classbtn btn-primary发表评论/button/form/div!-- 评论列表 --ul classlist-group idcmt-listli classlist-group-itemspan classbadge stylebackground-color: #F0AD4E;评论时间/spanspan classbadge stylebackground-color: #5BC0DE;评论人/spanItem 1/li/ul/body/html2、获取评论列表
function getCommentList() {$.ajax({method: GET,url: http://www.liulongbin.top:3006/api/cmtlist,success: function (res) {if (res.status ! 200) return alert(获取评论列表失败)var rows []$.each(res.data, function (i, item) {var str li classlist-group-itemspan classbadge stylebackground-color: #F0AD4E;评论时间 item.time /spanspan classbadge stylebackground-color: #5BC0DE;评论人 item.username /span item.content /lirows.push(str)})$(#cmt-list).empty().append(rows.join())}})
}getCommentList()3、发表评论
$(function () {$(#formAddCmt).submit(function (e) {e.preventDefault()// 获取表单所有数据var data $(this).serialize()$.post(http://www.liulongbin.top:3006/api/addcmt, data, function (res) {if (res.status ! 201) {return alert(发表评论失败)}getCommentList() // 重置表单$(#formAddCmt)[0].reset()})})
})四、模板引擎的基本概念
1、渲染UI结构时遇到的问题
var rows []
$.each(res.data, function (i, item) { // 循环拼接字符串rows.push(li classlist-group-item item.content span classbadge cmt-date评论时间 item.time /spanspan classbadge cmt-person评论人 item.username /span/li)
})
$(#cmt-list).empty().append(rows.join()) // 渲染列表的UI结构上述代码是通过字符串拼接的形式来渲染UI结构。 如果UI结构比较复杂则拼接字符串的时候需要格外注意引号之间的嵌套。且一旦需求发生变化修改起来也非常麻烦。
2、什么是模板引擎
模板引擎顾名思义它可以根据程序员指定的模板结构和数据自动生成一个完整的HTML页面。
3、模板引擎的好处
减少了字符串的拼接操作使代码结构更清晰使代码更易于阅读与维护
五、art-template模板引擎
1、art-template简介
art-template 是一个简约、超快的模板引擎。中文官网首页为 http://aui.github.io/art-template/zh-cn/index.html
2、art-template的安装
在浏览器中访问 http://aui.github.io/art-template/zh-cn/docs/installation.html 页面找到下载链接后鼠标右键选择“链接另存为”将 art-template 下载到本地然后通过 script 标签加载到网页上进行使用。
3、 art-template模板引擎的基本使用
1 使用传统方式渲染UI结构 var data {title: h3用户信息/h3,name: zs,age: 20,isVIP: true,regTime: new Date(),hobby: [吃饭, 睡觉, 打豆豆]}$(function () {$(#name).html(data.name)$(#title).html(data.title)$(#age).html(data.age)$(#isVIP).html(data.isVIP)$(#regTime).html(data.regTime)var rows []$.each(data.hobby, function (i, item) {rows.push(li item /li)})$(#hobby).html(rows.join())})2 art-template的使用步骤
导入 art-template定义数据定义模板调用 template 函数渲染HTML结构
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/title!-- 导入 art-template --script src./js/template.js/script
/headbodydiv iduser-box/div!-- 定义模板 --script typetext/html idtpl-userdiv姓名{{name}}/divdiv年龄{{ age }}/divdiv性别{{ gender}}/divdiv住址{{address }}/div/scriptscript// 定义数据var data { name: zs, age: 28, gender: 男, address: 北京顺义马坡 }// 调用模板引擎 template 函数var htmlStr template(tpl-user, data)// 渲染HTML结构document.getElementById(user-box).innerHTML htmlStr/script
/body/html4、art-template标准语法
1什么是标准语法
art-template 提供了 {{ }} 这种语法格式在 {{ }} 内可以进行变量输出或循环数组等操作这种 {{ }} 语法在 art-template 中被称为标准语法。
2 标准语法 - 输出
{{value}}
{{obj.key}}
{{obj[key]}}
{{a ? b : c}}
{{a || b}}
{{a b}}在 {{ }} 语法中可以进行变量的输出、对象属性的输出、三元表达式输出、逻辑或输出、加减乘除等表达式输出。
3 标准语法 – 原文输出
{{ value }}如果要输出的 value 值中包含了 HTML 标签结构则需要使用原文输出语法才能保证 HTML 标签被正常渲染。
4 标准语法 – 条件输出
如果要实现条件输出则可以在 {{ }} 中使用 if … else if … /if 的方式进行按需输出。
{{if value}} 按需输出的内容 {{/if}}{{if v1}} 按需输出的内容 {{else if v2}} 按需输出的内容 {{/if}}
5 标准语法 – 循环输出
如果要实现循环输出则可以在 {{ }} 内通过 each 语法循环数组当前循环的索引使用 $index 进行访问当前的循环项使用 $value 进行访问。
{{each arr}}{{$index}} {{$value}}
{{/each}}6 标准语法 – 过滤器
过滤器的本质就是一个 function 处理函数。
{{value | filterName}}过滤器语法类似管道操作符它的上一个输出作为下一个输入。
定义过滤器的基本语法如下
template.defaults.imports.filterName function(value){/*return处理的结果*/
}7综合使用演示
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/title!-- 1. 导入模板引擎 --!-- 在 window 全局多一个函数叫做 template(模板的Id, 需要渲染的数据对象) --script src./lib/template-web.js/scriptscript src./lib/jquery.js/script
/headbodydiv idcontainer/div!-- 3. 定义模板 --!-- 3.1 模板的 HTML 结构必须定义到 script 中 --script typetext/html idtpl-userh1{{name}} ------ {{age}}/h1{{ test}}div{{if flag 0}}flag的值是0{{else if flag 1}}flag的值是1{{/if}}/divul{{each hobby}}li索引是:{{$index}}循环项是:{{$value}}/li{{/each}}/ulh3{{regTime | dateFormat}}/h3/scriptscript// 定义处理时间的过滤器template.defaults.imports.dateFormat function (date) {var y date.getFullYear()var m date.getMonth() 1var d date.getDate()return y - m - d}// 2. 定义需要渲染的数据var data { name: zs, age: 20, test: h3测试原文输出/h3, flag: 1, hobby: [吃饭, 睡觉, 写代码], regTime: new Date() }// 4. 调用 template 函数var htmlStr template(tpl-user, data)console.log(htmlStr)// 5. 渲染HTML结构$(#container).html(htmlStr)/script
/body/html六、模板引擎的实现原理
1、正则与字符串操作
1基本语法
exec() 函数用于检索字符串中的正则表达式的匹配。如果字符串中有匹配的值则返回该匹配值否则返回 null。RegExpObject.exec(string)示例如下
var str hello
var pattern /o/
// 输出的结果[o, index: 4, input: hello, groups: undefined]
console.log(pattern.exec(str)) 2分组
正则表达式中 ( ) 包起来的内容表示一个分组可以通过分组来提取自己想要的内容示例代码如下 var str div我是{{name}}/divvar pattern /{{([a-zA-Z])}}/var patternResult pattern.exec(str)console.log(patternResult)// 得到 name 相关的分组信息// [{{name}}, name, index: 7, input: div我是{{name}}/div, groups: undefined]3 字符串的replace函数
replace() 函数用于在字符串中用一些字符替换另一些字符语法格式如下
var result 123456.replace(123, abc)// 得到的 result 的值为字符串 abc4564 多次replace
var str div{{name}}今年{{ age }}岁了/div
var pattern /{{\s*([a-zA-Z])\s*}}/var patternResult pattern.exec(str)
str str.replace(patternResult[0], patternResult[1])
console.log(str) // 输出 divname今年{{ age }}岁了/divpatternResult pattern.exec(str)
str str.replace(patternResult[0], patternResult[1])
console.log(str) // 输出 divname今年age岁了/divpatternResult pattern.exec(str)
console.log(patternResult) // 输出 null5使用while循环replace
var str div{{name}}今年{{ age }}岁了/div
var pattern /{{\s*([a-zA-Z])\s*}}/var patternResult null
//将匹配的结果赋给 patternResult
while(patternResult pattern.exec(str)) {str str.replace(patternResult[0], patternResult[1])
}
console.log(str) // 输出 divname今年age岁了/div6 replace替换为真值
var data { name: 张三, age: 20 }
var str div{{name}}今年{{ age }}岁了/div
var pattern /{{\s*([a-zA-Z])\s*}}/var patternResult null
while ((patternResult pattern.exec(str))) {str str.replace(patternResult[0], data[ patternResult[1] ])
}
console.log(str) // 输出 div张三今年20岁了/div2、实现简易的模板引擎
1定义模板结构
!-- 定义模板结构 --
script typetext/html idtpl-userdiv姓名{{name}}/divdiv年龄{{ age }}/divdiv性别{{ gender}}/divdiv住址{{address }}/div
/script2预调用模板引擎
script// 定义数据var data { name: zds, age: 28, gender: 男, address: 北京 }// 调用模板函数var htmlStr template(tpl-user, data)// 渲染HTML结构document.getElementById(user-box).innerHTML htmlStr
/script
3封装 template 函数
function template(id, data) {var str document.getElementById(id).innerHTMLvar pattern /{{\s*([a-zA-Z])\s*}}/var pattResult nullwhile ((pattResult pattern.exec(str))) {str str.replace(pattResult[0], data[pattResult[1]])}return str
}4导入并使用自定义的模板引擎
headmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /meta http-equivX-UA-Compatible contentieedge /title自定义模板引擎/title!-- 导入自定义的模板引擎 --script src./js/template.js/script
/head
