什么是表单
表单在网页中主要负责数据采集功能
。HTML 中的标签,就是用于采集用户输入的信息,并通过标签的提交操作,把采集到的信息提交到服务器端进行处理。
< form>标签的属性
action
action属性用来规定当提交表单时,向何处发送表单数据
。
action属性的值应该是后端提供的一个URL地址,这个URL地址专i负责接收表单提交过来的数据。当表单在未指定action属性值的情况下,action 的默认值为当前页面的URL地址。
注意
:当提交表单后,页面会立即跳转到action属性指定的URL地址
target
target属性用来规定在何处打开action URL
。
它的可选值有5个,默认情况下,target 的值是_ self
, 表示在相同的框架中打开action URL。
method
method属性用来规定以何种方式
把表单数据提交到action URL.
它的可选值有两个,分别是get和post.
默认情况下,method 的值为get,示通过URL地址的形式,把表单数据提交到action URL.
注意
:
get方式适合用来提交少量的、简单的数据。
post
方式适合用来提交大量的
、复杂的
、或包含文件上传
的数据。
enctype
enctype属性用来规定在发送表单数据之前如何对数据进行编码
。
它的可选值有三个,默认情况下,enctype 的值为application/x www -form- urlencoded,表示在发送前编码所有的字符。
什么是表单的同步提交
通过点击submit按钮,触发表单提交的操作,从而使页面跳转到action URL的行为,叫做表单的同步提交。
表单同步提交的缺点
① 表单同步提交后,整个页面会发生跳转,跳转到action URL所指向的地址
,用户体验很差。
② 表单同步提交后,页面之前的状态和数据会丢失
。
解决方案
:表单只负责采集数据,Ajax 负责将数据提交到服务器。
通过Ajax提交表单数据
监听表单提交事件
在jQuery中,可以使用如下两种方式,监听到表单的提交事件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/jquery.js"></script>
</head>
<body>
<form action="/login" id="f1">
<input type="text" name="user_name" />
<input type="password" name="password" />
<button type="submit">提交</button>
</form>
<script>
$(function () {
// 第一种方式
// $('#f1').submit(function () {
// alert('监听到了表单的提交事件')
// })
// 第二种方式
$('#f1').on('submit', function () {
alert('监听到了表单的提交事件2')
})
})
</script>
</body>
</html>
阻止表单默认提交行为
当监听到表单的提交事件以后,可以调用事件对象的event.preventDefault()
函数,来阻止表单的提交和页面的跳转,示例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/jquery.js"></script>
</head>
<body>
<form action="/login" id="f1">
<input type="text" name="user_name" />
<input type="password" name="password" />
<button type="submit">提交</button>
</form>
<script>
$(function () {
// 第一种方式
// $('#f1').submit(function (e) {
// alert('监听到了表单的提交事件')
// e.preventDefault()
// })
// 第二种方式
$('#f1').on('submit', function (e) {
alert('监听到了表单的提交事件2')
e.preventDefault()
})
})
</script>
</body>
</html>
快速获取表单中的数据
serialize
(函数)
为了简化表单中数据的获取操作, jQuery提供了serialize( 函数,其语法格式如下:
serialize0函数的好处:可以一次性获取到表单中的所有的数据
。
注意
:在使用serialize0函数快速获取表单数据时,必须为每个表单元素添加name属性
!
什么是模板引擎
模板引擎,顾名思义,它可以根据程序员指定的模板结构
和数据
,自动生成一个完整的HTML页面。
模板引擎的好处
①减少了字符串的拼接操作
②使代码结构更清晰
③使代码更易于阅读与维护
art-template简介
art-template是一个简约、 超快的模板引擎。中文官网首页为http://aui.github.io/art-template/zh-cn/index.html
art-template的安装
在浏览器中访问
http://aui.github.io/art-template/zh-cn/docs/installation.html
页面,找到下载链接后,鼠标右键,选择“链接另存为”,将art-template下载到本地,然后,通过
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./js/template.js"></script>
</head>
<body>
<div id="user-box"></div>
<script type="text/html" id="tpl-user">
<div>姓名:{{name}}</div>
<div>年龄:{{ age }}</div>
<div>性别:{{ gender}}</div>
<div>住址:{{address }}</div>
</script>
<script>
// 定义数据
var data = { name: 'zs', age: 28, gender: '男', address: '北京顺义马坡' }
// 调用模板引擎
var htmlStr = template('tpl-user', data)
// 渲染HTML结构
document.getElementById('user-box').innerHTML = htmlStr
</script>
</body>
</html>
模板引擎常用语法和过滤器的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 1. 导入模板引擎 -->
<!-- 在 window 全局,多一个函数,叫做 template('模板的Id', 需要渲染的数据对象) -->
<script src="./lib/template-web.js"></script>
<script src="./lib/jquery.js"></script>
</head>
<body>
<div id="container"></div>
<!-- 3. 定义模板 -->
<!-- 3.1 模板的 HTML 结构,必须定义到 script 中 -->
<script type="text/html" id="tpl-user">
<h1>{{name}} ------ {{age}}</h1>
{{@ test}}
<div>
{{if flag === 0}}
flag的值是0
{{else if flag === 1}}
flag的值是1
{{/if}}
</div>
<ul>
{{each hobby}}
<li>索引是:{{$index}},循环项是:{{$value}}</li>
{{/each}}
</ul>
<h3>{{regTime | dateFormat}}</h3>
</script>
<script>
// 定义处理时间的过滤器
template.defaults.imports.dateFormat = function (date) {
var y = date.getFullYear()
var m = date.getMonth() + 1
var 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.基本语法
exec
(函数用于检索字符串
中的正则表达式的匹配。
如果字符串中有
匹配的值,则返回该匹配值
,否则返回null.
示例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
var str = 'hello'
var pattern = /x/
var result = pattern.exec(str)
console.log(result)
</script>
</body>
</html>
分组
正则表达式中()
包起来的内容表示一个分组, 可以通过分组来提取自己想要的内容
,示例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
var str = '<div>我是{{name}}</div>'
var pattern = /{{([a-zA-Z]+)}}/
var result = pattern.exec(str)
console.log(result)
</script>
</body>
</html>
字符串的replace函数
replace0函数用于在字符串中用一些字符替换另一些字符, 语法格式如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
var str = '<div>我是{{name}}</div>'
var pattern = /{{([a-zA-Z]+)}}/
var patternResult = pattern.exec(str)
// console.log(patternResult)
str = str.replace(patternResult[0], patternResult[1])
console.log(str)
</script>
</body>
</html>
字符串的多次replace操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
var str = '<div>{{name}}今年{{ age }}岁了</div>'
var pattern = /{{\s*([a-zA-Z]+)\s*}}/
// 第一次匹配
var res1 = pattern.exec(str)
str = str.replace(res1[0], res1[1])
console.log(str)
// 第二次匹配
var res2 = pattern.exec(str)
str = str.replace(res2[0], res2[1])
console.log(str)
// 第三次匹配
var res3 = pattern.exec(str)
console.log(res3)
</script>
</body>
</html>
使用while循环进行replace操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
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)
</script>
</body>
</html>
replace替换为真值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
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)
</script>
</body>
</html>