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 的行为,叫做表单的同步提交。

表单同步提交的缺点#

  1. <form>表单同步提交后,整个页面会发生跳转,跳转到 action URL 所指向的地址,用户体验很差。
  2. <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页面

模板引擎的好处#

  1. 减少了字符串的拼接操作
  2. 使代码结构更清晰
  3. 使代码更易于阅读和维护

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的使用步骤#

  1. 导入art-template
  2. 定义数据
  3. 定义模板
  4. 调用template函数
  5. 渲染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)
posted @   shumild  阅读(159)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
点击右上角即可分享
微信分享提示
主题色彩