form表单与模板引擎
form表单的基本使用
什么是表单#
表单在网页中主要负责数据采集功能。HTML中的<form>
标签,就是用于采集用户输入的信息,并通过<form>
标签的提交操作,把采集到的信息提交到服务器端进行处理。
表单的组成部分#
<from>
<input type = "text" name = "email_or_mobile" />
<input type = "password" name = "password" />
<input type = "checkbox" name = "remember_me" checked />
<button type = "submit" >提交</button>
</from>
表单由三个部分组成:
- 表单标签
- 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
- 表单按钮
< form >标签的属性#
<form>
标签用来采集数据,<form>
标签的属性是用来规定如何把采集到的信息发送到服务器。
属性 | 值 | 描述 |
---|---|---|
action | URL地址 | 规定当提交表单时,向何处发送表单数据 |
method | get或post | 规定以何种方式把表单数据提交到 action URL |
enctype | application/x-www-form-urlencoded multipart/form-data text/plain |
规定在发送表单数据之前如何对其进行编码 |
target | _____blank _____self _____parent _____top framename |
规定在何处打开 action URL |
action#
action 属性用来规定当提交表单时,向何处发送表单数据。
action 属性的值应该是后端提供的一个 URL 地址,这个 URL 地址专门负责接收表单提交过来的数据。
当 <from>
表单在未指定 action 属性值的情况下,action 的默认值为当前页面的 URL 地址。
注意:当提交表单后,页面会立即跳转到 action 属性指定的 URL 地址
target#
target 属性用来规定在何处打开 action URL。
它的可选值有5个,默认情况下,target 的值是 _self,表示在相同的框架中打开 action URL。
值 | 描述 |
---|---|
_blank | 在新窗口中打开。 |
_self | 默认。在相同的框架中打开。 |
_parent | 在父框架集中打开。(很少用) |
_top | 在整个窗口中打开。(很少用) |
framename | 在指定的框架中打开。(很少用) |
method#
method 属性用来规定以何种方式把表单数据提交到 action URL。
它的可选值有两个,分别是 get 和 post 。
默认情况下,method 的值为 get ,表示通过URL地址的形式,把表单数据提交到 action URL。
注意:
get 方式适合用来提交少量的、简单的数据。
post 方式适合用来提交大量的、复杂的、或包含文件上传的数据。
在实际开发中,
<form>
表单的 post 提交方式用的最多,很少用 get。例如登录、注册、添加数据等表单操作,都需要使用 post 方式来提交表单。
enctype#
enctype 属性用来规定在发送表单 数据之前如何对数据进行编码。
它的可选值有三个,默认情况下,enctype 的值为 application/x-www-form-urlencoded,表示在发送前编码所有的字符。
值 | 描述 |
---|---|
application/x-www-form-urlencoded | 在发送前编码所有字符(默认) |
multipart/form-data | 不对字符编码。在使用包含文件上传控件的表单时,必须使用该值。 |
text/plain | 空格转换为 “+” 加号,但不对特殊字符编码。(很少用) |
注意:
在涉及到文件上传的操作时,必须将 enctype 的值设置为 multipart/form-data
如果表单的提交不涉及到上传操作,则直接将 enctype 的值设置为 application/x-www-form-urlencoded 即可
表单的同步提交及缺点#
什么是表单的同步提交#
通过点击 submit 按钮,触发表单提交的操作,从而使页面跳转到 action URL 的行为,叫做表单的同步提交。
表单同步提交的缺点#
<form>
表单同步提交后,整个页面会发生跳转,跳转到 action URL 所指向的地址,用户体验很差。<form>
表单同步提交后,页面之前的状态和数据会丢失。
解决表单同步提交的缺点#
解决方案:表单只负责采集数据,Ajax负责将数据提交到服务器
通过Ajax提交表单数据
监听表单提交事件#
在jQuery中,可以使用如下两种方式,监听到表单的提交事件:
$('#form').submit(function(e){
alert('监听到了表单的提交事件')
})
$('#form').on('submit',function(e){
alert('监听到了表单的提交事件')
})
阻止表单默认提交行为#
当监听到表单的提交事件以后,可以调用事件对象的 event.preventDefault()
函数,来阻止表单的提交和页面的跳转:
$('#form').submit(function(e){
//阻止表单的提交和页面的跳转
e.preventDefault()
})
$('#form').on('submit',function(e){
//阻止表单的提交和页面的跳转
e.preventDefault()
})
快速获取表单中的数据#
serialize() 函数#
为了简化表单中数据的获取操作,jQuery提供了 serialize()
函数,其语法格式如下:
$(selector).serialize()
serialize()
函数的好处:可以一次性获取到表单中的所有的数据
serialize() 函数示例#
<form id="form">
<input type = "text" name = "username" />
<input type = "password" name = "password" />
<button type = "submit" >提交</button>
</form>
$('#form').serialize()
// 调用的结果:
// username = 用户名的值 & password = 密码的值
注意:在使用
serialize()
函数快速获取表单数据时,必须为每个表单元素添加 name 属性
模板引擎的基本概念
渲染UI结构时遇到的问题#
var rows=[]
$.each(res.data,function (i,item){ //循环拼接字符串
rows.push('<li class="list-group-item">'+item.content+'<span class="badge cmt-date">评论时间:'+item.time+'</span><span class="badge cmt-date">评论人:'+item.username+'</span></li>')
})
$('#cmt-list').empty().append(rows.join('')) //渲染列表的UI结构
以上代码是通过字符串拼接的形式,来渲染UI结构。
如果UI结构比较复杂,则拼接字符串的时候需要格外注意引号之前的嵌套。且一旦需求发生变化,修改起来也非常麻烦。
什么是模板引擎#
模板引擎能根据程序员指定的模板结构和数据,自动生成一个完整的HTML页面
模板引擎的好处#
- 减少了字符串的拼接操作
- 使代码结构更清晰
- 使代码更易于阅读和维护
art-template模板引擎
art-template是一个简约、超快的模板引擎。中文官网首页为art-template (aui.github.io)
art-template的安装#
在浏览器中访问安装 - art-template (aui.github.io)
找到下载链接后,鼠标右键,选择另存为,将art-template下载到本地,通过<scrip>
标签加载到网页上使用。
art-template模板引擎的基本使用#
使用传统方式渲染UI结构#
<body>
<div id="title"></div>
<div>姓名:<span id="name"></span></div>
<div>年龄:<span id="age"></span></div>
<div>会员:<span id="isVIP"></span></div>
<div>注册时间:<span id="regTime"></span></div>
<div>
爱好:
<ul id="hobby">
<li>爱好1</li>
<li>爱好2</li>
</ul>
</div>
<script>
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(''))
})
</script>
</body>
art-template的使用步骤#
- 导入art-template
- 定义数据
- 定义模板
- 调用template函数
- 渲染HTML结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--1. 导入模板引擎-->
<!--在windows全局,多一个函数,叫做 template(‘模板的Id’,需要渲染的数据对象)-->
<script src="../public/js/template-web.js"></script>
<script src="../public/js/jquery.js"></script>
</head>
<body>
<div id="container"></div>
<!--3. 定义模板-->
<!--3.1 模板的 HTML 结构,必须定义到 script 中-->
<script type="text/html" id="tpl-user">
<h1>{{name}}</h1>
</script>
<script>
//2. 定义需要渲染的数据
var data = { name:'zs'}
//4. 调用 template 函数
var htmlStr = template('tpl-user',data)
console.log(htmlStr)
//5. 渲染 HTML 结构
$('#container').html(htmlStr)
</script>
</body>
</html>
art-template标准语法#
什么是标准 语法#
art-template 提供了{{ }}
这种语法格式,在{{ }}
内可以进行变量输出,或循环数组等操作,这种{{ }}
语法在art-template中被称为标准语法。
标准语法 — 输出#
{{value}}
{{obj.key}}
{{obj['key']}}
{{a?b:c}}
{{a||b}}
{{a + b}}
在{{}}
语法中,可以进行变量的输出、对象属性的输出、三元表达式输出、逻辑或输出、加减乘除等表达式输出。
标准语法 — 原文输出#
{{@ value}}
如果要输出的value值中,包含了HTML标签结构,则需要使用原文输出语法,才能保证HTML标签被正常渲染。
标准语法 — 条件输出#
如果要实现条件输出,则可以在{{}}
中使用if…else if…/if的方式,按需输出。
{{if value}} 按需输出的内容 {{/if}}
{{if vl}} 按需输出的内容 {{else if v2}} 按需输出的内容 {{/if}}
标准语法 — 过滤器#
过滤器的本质是一个 function 处理函数
{{value|filterName}}
过滤器语法类似管道操作符,它的上一个输出作为下一个输入。
定义过滤器的基本语法如下:
template.defaults.imports.filterName = function(value){/*return 处理结果*/}
<div>注册时间:{{regTime|dateFormat}}</div>
定义一个格式化的过滤器 dateFormat 如下:
template.defaults.imports.dateFormat = function(date){
var y = date.getFullYear()
var m = date.getMonth() + 1
var d = date.getDate()
return y + '-' + m + '-' + d //注意:过滤器最后一定要return一个值
}
模板引擎的实现原理
正则与字符串操作#
基本语法#
exec()
函数用于字符串中的正则表达式的匹配。
如果字符串中有匹配的值,返回该匹配值,否则返回null。
RegExpObject.exec(string)
示例代码如下:
var str = 'hello'
var pattern = /o/
// 输出的结果["o",index:4,input:"hello",groups:undefined]
console.log(pattern.exec(str))
分组#
正则表达式中()
包含起来的内容表示一个分组,可以通过分组来提取自己想要的内容,示例:
var str = '<div> 我是{{name}} </div>'
var pattern = /{{([a-zA-Z]+)}}/
var patternResult = pattern.exec(str)
console.log(patternResult)
//得到 name 相关的分组信息
//["{{name}}","name",index:7,input:"<div>我是{{name}}</div>",groups:undefined]
字符串的replace函数#
replace()函数用于在字符串中用一些字符替换另一些字符,语法格式如下:
var result = '123456'.replace('123','abc') // 得到的 result 的值为字符串 ‘abc456’
示例:
var str = '<div>我是{{name}}</div>'
var pattern = /{{([a-zA-Z]+)}}/
var patternResult = pattern.exec(str)
str = str.replace(patternResult[0],patternResult[1])
//replace 函数返回值为替换后的新字符串
//输出的内容:<div>我是name</div>
console.log(str)
多次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)//输出 <div>name今年{{age}}岁了</div>
patternResult = pattern.exec(str)
str = str.replace(patternResult[0],patternResult[1])
console.log(str)// 输出 <div>name今年age岁了</div>
patternResult = pattern.exec(str)
console.log(patternResult)// 输出 null
使用while循环replace#
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],patternResult[1])
}
console.log(str) //输出 <div>name今年age岁了</div>
replace替换为真值#
var data = {name:'zhangsan',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)
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性