目录
1.form表单的基本使用
1.1什么是表单
表单在网页中主要负责数据采集功能。HTML中的<form>标签，就是用于采集用户输入的信息，并通过<form>标签的提交操作，把采集到的信息提交到服务器进行处理。
1.2表单的组成部分
表单由三个基本部分组成：
- 表单标签
- 表单域
- 表单按钮
1.3form标签的属性
<form>标签用来采集数据，<form>标签的属性则是用来规定如何把采集到的数据发送到服务器
| 属性 | 值 | 描述 |
|---|---|---|
| action | URL地址 | 规定当提交表单时，向何处发送表单数据 |
| method | get或post | 规定以何种方式把表单数据提交到action |
| enctype | application/x-www-form-urlencoded multipart/form-data text/plain | 规定在发送表单数据之前如何对其进行编码 |
| target | _blank _self _parent _top framename | 规定在何处打开action URL |
1.4表单的同步提交及缺点
1.4.1什么是表单的同步提交
通过点击submit按钮，触发表单提交的操作，从而使页面跳转action URL的行为，叫作表单的同步提交
1.4.2表单同步提交的缺点
- <form>表单同步提交后，整个页面会发生跳转，跳转到 action URL所指向的地址，用户体验很差。
- <form>表单同步提交后，页面之前的状态和数据会丢失
2.通过Ajax提交表单数据
2.1监听表单提交事件
在jQuery中，可以使用如下两种方式，监听到表单的提交事件：
<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>2.2阻止表单默认提交行为
当监听到表单的提交事件以后，可以调用事件对象的 event.preventDefault() 函数，来阻止表单的提交和页面的跳转，示例代码如下：
<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>2.3快速获取表单中的数据
1. serialize() 函数
为了简化表单中数据的获取操作，jQuery提供了serialize() 函数，其语法格式如下：
$(selector).serialize()serialize() 函数的好处：可以一次性获取到表单中的所有数据
2. serialize() 函数示例：
<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) {
e.preventDefault()
const re = $(this).serialize()
console.log(re)
}) */
// 第二种方式
$('#f1').on('submit', function(e) {
e.preventDefault()
const re = $(this).serialize()
console.log(re)
})
})
</script>
</body>注意：在使用serialize() 函数快速获取表单数据时，必须为每个表单元素添加name属性
3.模板引擎的基本概念
3.1什么是模板引擎
模板引擎，顾名思义，它可以根据程序员指定的模板结构和数据，自动生成一个完整的HTML页面。
3.2模板引擎的好处
- 减少了字符串的拼接操作
- 使代码结构更清晰
- 使代码更易于阅读和维护
4.art-template模板引擎
4.1 art-template 简介
art-template 是一个简约、超快的模板引擎。中文官网首页
4.2 art-template 的安装
在浏览器中访问 http://aui.github.io/art-template/zh-cn/docs/installation.html 页面，找到下载链接之后，鼠标右键选择 “链接另存为”，将art-template 下载到本地，然后通过<script>标签加载到网页上进行使用。
4.3 art-template模板引擎的基本使用
4.3.1传统方式渲染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>
</ul>
</div>
<script>
const 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)
let rows = []
$.each(data.hobby, function(i, item) {
rows.push(`
<li>${item}</li>
`)
})
$('#hobby').html(rows.join(''))
})
</script>
</body>4.3.2 art-template 使用步骤
- 导入 art-template
- 定义数据
- 定义模板
- 调用 template 函数
- 渲染HTML结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
</script>
<script>
// 2.定义数据
const data = {
name: 'zs',
age: 20
}
// 4.调用 template 函数
const htmlStr = template('tpl-user', data)
// console.log(htmlStr)
// 5.渲染 HTML 结构
$('#container').html(htmlStr)
</script>
</body>
</html>4.4 art-template 标准语法
4.4.1什么是标准语法
art-template 提供了 {{ }} 这种语法格式，在 {{ }} 内可以进行变量输出，或循环数组等操作，这种{{}} 语法在 art-template 中被称为标准语法
4.4.2标准语法 - 输出
在{{ }}语法中，可以进行变量的输出、对象属性的输出、三元表达式输出、逻辑或输出、加减乘除表达式输出
{{value}}
{{obj.key}}
{{obj['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}4.4.3标准语法 - 原文输出
如果要输出的value值中，包含了HTML 标签结构，则需要使用原文输出语法，才能保证 HTML 标签被正常渲染。
{{@ value}}4.4.4标准语法 - 条件输出
如果要实现条件输出，则可以在{{ }} 中使用if...else if .../if 的方式，进行按需输出。
{{if value}} 按需输出的内容 {{/if}}
{{if v1}} 按需输出的内容 {{else if v2}} 按需输出的内容 {{/if}}4.4.5标准语法 - 循环输出
如果要实现循环输出，则可以在{{ }} 内，通过each语法循环数组，当前循环的索引使用$index进行访问，当前循环项使用$value进行访问。
{{each arr}}
{{$index}} {{$value}}
{{/each}}4.4.6标准语法 - 过滤器
{{value | filterName}}定义过滤器的基本语法如下：
template.defaults.imports.filterName = function(value) //return处理的结果5.模板引擎的实现原理
5.1正则与字符串操作
5.1.1基本语法
exec() 函数用于检索字符串中正则表达式的匹配
如果字符串中有匹配的值，则返回该匹配值，否则返回null
RegExpObject.exec(string)5.1.2字符串的replace函数
replace() 函数用于在字符串中用一些字符替换另一些字符，语法格式如下：
let re = '123456'.replace('123', 'abc') //re = 'abc456'使用while循环实现多次replace操作
<body>
<script>
var str = '<div>{{name}}今年{{age}}岁了</div>'
var pattern =/{{\s*([a-zA-Z]+)\s*}}/
var patternRe = null
while(patternRe = pattern.exec(str)) {
str = str.replace(patternRe[0], patternRe[1])
}
</script>
</body>replace替换为真值
<body>
<script>
var data = {
name: 'Andy',
age: 20
}
var str = '<div>{{name}}今年{{age}}岁了</div>'
var pattern =/{{\s*([a-zA-Z]+)\s*}}/
var patternRe = null
while(patternRe = pattern.exec(str)) {
str = str.replace(patternRe[0], data[patternRe[1]])
}
console.log(str)
</script>
</body>5.2实现简易的模板引擎
1.实现步骤
- 定义模板结构
- 预调用模板引擎
- 封装template函数
- 导入并使用自定义的模板引擎
206
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
