# form 表单的基本使用

# 什么是表单

表单是网页中主要负责数据采集功能，HTML 中的 <form> 标签，就是用于采集用户输入信息，并通过 < form > 标签的提交操作，把采集到的数据信息提交到服务器端进行处理

# 表单的组成部分

	<form>
	<input type="text" name="username">
	<input type="passowrd" name="password">
	<button type="submit">提交</button>
	</form>

# <form> 标签的属性

<form> 标签用来采集数据，<form > 标签的属性则是用来规定如何把数据采集的数据发送到服务器

属性	值	描述
action	URL 地址	规定当提交表单时，向何处发送表单数据
method	get 或 post	规定以何种方式把表单数据提交到 action URL
enctype	application/x-www-form-urlencoded multipart/form-data (文件上传时使用)	规定在发送表单数据之前如何对其进行编码
target	_blank 打开新页面 -self 从当前页面打开	规定在何处打开 action URL

# 表单的同步提交及其缺点

# 什么是表单同步提交

通过点击 submit 按钮，触发表单提交的操作，从而使页面跳转到 action URL 的行为，叫做表单的同步提交。

# 表单同步提交的缺点

表单同步提交后，整个页面会发生跳转，跳转到 action URL 所指向的地址，用户体验很差。
表单同步提交后，页面之前的状态和数据会丢失。

# 解决方法

表单只负责采集数据，Ajax 负责将数据提交到服务器

# 通过 Ajax 提交表单数据

# 监听表单提交时间

在 jQuery 中，可以使用如下两种方式，监听表单提交事件

# 阻止表单默认提交行为

当监听到表单提交事件后，可以调用事件对象的 event.prevenDefault () 函数，来阻止表单的提交和页面的跳转

# 快速获取表单中的数据

为了简化表单数据的获取操作，jQuery 提供了 serialize () 函数，可以一次获取所有数据

# 模板引擎的基本概念

# 1. 渲染 UI 结构遇到的问题

上述代码通过字符串拼接形式，渲染 UI 界面，引号嵌套繁琐

# 什么是模板引擎

模板引擎，它可以根据程序员定义的模板结构和数据，自动生成一个完整的 HTML 页面

# 模板引擎的好处

减少了字符串拼接操作
使代码结构更清晰
使代码更容易便于维护

# art-template 模板引擎

# 简介

art-template 是一个简约，超快的模板引擎

# 传统方式渲染 UI 结构

# art-template 模板引擎的基本使用

# 使用步骤

导入 art-template
定义数据
定义模板
调用 template 函数
渲染 HTML 结构

# art - template 标准语法

# 标准语法

art - template 提供了这种语法结构，在内可以进行变量输出，或循环数据等操作，这种 {} 语法在 art-template 中被称为标准语法

# 标准语法 - 输出

在语法中，可以进行变量的输出、对象属性的输出、三元表达式输出、逻辑或输出、加减乘除等表达式输出。

# 标准语法 - 原文输出

如果要输出的 value 值中，包含了 HTML 标签结构，则需要使用原文输出语法，才能保证 HTML 标签被正常渲染。

# 标准语法 - 条件输出

如果要实现条件输出，则可以在中使用 if … else if … /if 的方式，进行按需输出。

# 标准语法 - 循环输出

如果要实现循环输出，则可以在内，通过 each 语法循环数组，当前循环的索引使用 $index 进行访问，当前的循环项使用 $value 进行访问。

# 标准语法 - 过滤器

过滤器语法类似于管道操作符，它的上一个输出作为下一个输入

定义过滤器

定义一个格式化时间的过滤器

# 模板引擎的实现原理

# 正则与字符串操作

# 基本语法

exec () 函数用于检索字符串中的正则表达式的匹配

如果字符串中有匹配的值，则返回该匹配的值，否则返回 null

	var str = 'hello'
	// var pattern = /o/
	// 输出的结果 ["o", index: 4, input: "hello", groups: undefined]
	console.log(pattern.exec(str))

# 分组

正则表达式中 ( ) 包起来的内容表示一个分组，可以通过分组来提取自己想要的内容

# 字符串的 replace 函数

replace () 函数用于在字符串中用一些字符替换另一些字符

var result = '123456'.replace('123', 'abc') // 得到的 result 的值为字符串 'abc456'