Ajax(二)

什么是表单

1. 表单主要功能就是：数据采集。一般在HTML里，用 标签提交submit到服务器。

2. form标签有一些自己的很多属性，比如：可以设置表单action发送到的地址并跳转到那个地址、target规定在哪打开页面_self是当前 _blank是新页面、method指提交方法：地址栏展示会有所不同， get是通过url地址形式提交—?数据=值&数据=值。post是通过formdata形式，地址栏看不见，更安全，更常用。enctype用来规定发送表单前对数据进行编码，文件上传必须设为multipart/form-data，其他设为application/x-www-form-urllencoded即可。

3. 表单默认行为

监听到提交事件后阻止表单默认提交：e.preventDefalut()

4. 同步提交的缺点：页面会跳转 用户体验差、页面之前的状态会丢失。

5. 解决：表单只用来负责采集数据，Ajax负责将数据提交到服务器。

通过Ajax提交表单数据

表单只负责采集数据，所以先阻止它默认提交的行为，再用Ajax提交。也就是获取表单中数据，再去用Ajax发送。表单.serialize()函数就能获得表单所有数据，但是要把每个表单元素加name属性，否则获取不到。

模板引擎

• 就是模板结构和数据 {{数据}}

• 好处：减少字符串拼接、结构更清晰、便于阅读和维护。

• {{ }}相当于占位符，里面可以写：变量、对象属性、三元表达式、逻辑或、加减乘除表达式。 如果前面加@，代表原文输出，一般是用在要输出的值里包含HTML标签时使用。

还可以写if循环等，也可使用过滤器 {{值|过滤器}}

模板引擎实现原理

1. 正则与字符串操作

exec函数：检索字符串，有匹配值就返回值，否则返回null

用法：要匹配的值.exec(被检测字符串)

2. 分组

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

如：要匹配的值是/ {{ ( [a-zA-Z+]) }}/ .exec (被检测字符串{{ abc }}) ——结果是abc相关的信息

3. 字符串的replace函数

作用：用一些字符替换另一些字符

4. 实现简易模板引擎

定义模板结构—预调用模板引擎—封装template函数—导入并使用自定义模板引擎