1.表单的组成部分
①表单标签<form> </form>
②表单域
③表单按钮<button type="submit"> </button>
2.提交表单后会立即跳转到表单被提交到的URL地址
3.form表单的属性
（1）action属性
属性的值是后端提供的一个URL地址，也就是表单提交的地址。
（2）target属性
表示表单提交后的页面在何处打开。默认值是_self。
_blank：在新窗口中打开
_self：在当前窗口打开
_parent：在父框架集中打开
_top：在整个窗口中打开
_framename：在指定的框架中打开
（3）method属性
属性用来规定 以何种方式 把表单数据提交到 action URL地址。
①默认值为get：通过URL地址的形式提交表单数据。适合少量、简单的数据。
②post：适合提交大量的，复杂的，或包含文件上传的数据。
（4）enctype属性
enctype属性用来规定在 发送表单数据之前如何对数据进行编码
①默认值为application/x-www-form-urlencoded，表示在发送前编码的所有字符。
②涉及文件上传操作时，必须把enctype属性值改为multipart/form-data
③text/plain，空格转换为+加号，但不对特殊字符编码。
4.表单的同步提交
通过点击 submit 按钮，触发表单提交的操作，从而使页面跳转到 action URL 的行为，叫做表单的同步提交。
缺点：
①表单同步提交后，整个页面会发生跳转
②表单同步提交后，页面之前的状态和数据会丢失
解决：
表单只复杂采集数据，Ajax负责将数据提交到服务器
二、通过Ajax提交表单数据
1.监听表单提交的事件submit
注意：一定要给form表单添加事件，不是button按钮！！！
$("form").on('submit',function(){
alert('表单被提交了')
})
2.阻止表单默认行为--提交表单
事件对象的e.preventDefault( )方法
3.serialize( )方法
①jQuery提供的serialize( )方法可以快速获取表单的值。
②表单元素必须有name属性。属性值一般是接口的参数。（切记！切记！切记！）
③返回值是一个字符串
④data参数都是以查询字符串的形式提交的。所以，serialize()方法获取的字符串直接赋值给data。
data: $(' form ') .serialize( );
$("form").on('submit',function(e){
e.preventDefault(); //阻止表单提交的默认行为
var data = $(this).serialize();
console.log(data);
});
// username=admin&password=123
4.原生js中，form表单的reset( )方法
重置表单的所有内容。
表单对象.reset( )
$('form')[0].reset();
三、模板引擎
1.http://aui.github.io/art-template/zh-cn/docs/installation.html
打开链接后，将下载链接（template-web.js插件）另存到本地。
2.art-template的使用
（1）页面中引入模板引擎template-web.js
<script src="js/template-web.js"></script>
（2）定义数据
var data = { 属性名1：属性值1...}
（3）定义模板
①模板写到html结构中，用一个<script></script>标签包裹。
②要把<script>标签的type属性改为text/html。
③{{ }}双大括号内部填写属性名。
（4）调用template函数
var str = template(' 模板ID' ，需要渲染的数据对象 ）
注意：函数的返回值就是拼接好的模板字符串。
（5）渲染HTML结构
最后我们需要把template返回的模板字符串设置到页面容器中
<head>
<!-- 1.引入模板引擎template.js -->
<script src="js/template-web.js"></script>
<script>
window.addEventListener('load', function () {
// 过滤器
template.defaults.imports.myDate = function (date) {
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
return year + '-' + month + '-' + day; // 过滤器必须有返回值
};
// 2.定义数据
var data = {
name: '吴磊',
age: 22,
text: '<h3>测试原文输出</h3>',
flag: 0,
arr: [1, 2, 3],
myTime: new Date(),
};
// 4.调用template函数
var str = template('m', data);
// 5.渲染数据
$('.box').html(str);
});
</script>
</head>
<body>
<div class="box"></div>
<!-- 3.定义模板 -->
<script type="text/html" id="m">
<h1>{{name}}</h1>
<h5>{{age}}</h5>
<!-- 原文输出-->
{{@text}}
<!-- 条件输出 -->
<div>
{{if flag == 0}} flag的值是0 {{else if flag == 1}} flag的值是1 {{/if}}
</div>
<!-- 循环输出 -->
<ul>
{{each arr}}
<li>循环项是{{$index}},索引号是{{$value}}</li>
{{/each}}
</ul>
<!-- 过滤器 -->
{{myTime | myDate}}
</script>
</body>
3.art-template标准语法
（1）art-template 提供了 {{}} 这种语法格式，在 {{}} 内可以进行 变量输出 或 循环数组 等操作，这种 {{}} 语法在 art-template 中被称为标准语法。
（2）调用template（）函数时已经传入数据对象了，所以在定义模板时，用到哪个属性就直接写属性名，不要写 对象名.属性名。【谨记！】
4.输出
在 {{}} 语法中，可以进行 变量 的输出，对象属性的输出，三元表达式输出，逻辑或输出，加减乘除等表达式输出
{{value}}
{{obj.key}}
{{obj['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}
5.原文输出
{{ @属性名}}
如果想要解析字符串中的HTML标签，就用原文输出。
// 2.定义数据
var data = { name: '吴磊', age: 22, text: "<h3>测试原文输出</h3>" };
// 3.定义模板
{{@text}} <!-- 测试原文输出-->
6.条件输出
{{ if 条件1}}
输出1
{{ else if 条件2 }}
输出2
{{ /if }}
// 2.定义数据
var data = { name: '吴磊', age: 22, text: "<h3>测试原文输出</h3>",flag: 0 };
// 3.定义模板
<!-- 条件输出 -->
<div>
{{if flag == 0}}
flag的值是0
{{else if flag == 1}}
flag的值是1
{{/if}}
</div>
7.循环输出
如果要实现循环输出，则可以在{{}} 内，通过each语法循环数组，当前循环的索引使用
$index 进行访问，当前循环项使用 $value 进行访问
{{ each 数组名}}
{{$value}}, {{$index}}
{{/each}}
// 2.定义数据
var data = {
name: '吴磊',
age: 22,
text: '<h3>测试原文输出</h3>',
flag: 0,
arr: [1, 2, 3],
};
// 3.定义模板
<!-- 循环输出 -->
<ul>
{{each arr}}
<li>循环项是{{$index}},索引号是{{$value}}</li>
{{/each}}
</ul>
8.过滤器
过滤器本质就是一个 function 函数
①在js中定义过滤器：
template.defaults.imports.过滤器名称 = function (形参){ return 处理结果}
- 形参用来接收待处理的数据。
②使用过滤器：
{{ 待处理数据 | 过滤器名称 }}
// 过滤器
template.defaults.imports.myDate = function (date) {
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
return year + '-' + month + '-' + day; // 过滤器必须有返回值
};
// 2.定义数据
var data = {
name: '吴磊',
age: 22,
text: '<h3>测试原文输出</h3>',
flag: 0,
arr: [1, 2, 3],
myTime: new Date(),
};
// 3.定义模板
<!-- 过滤器 -->
{{myTime | myDate}}
四、模板引擎原理
1.正则表达式的exec( )方法
①exec( )方法可以检测字符串中是否能匹配到正则表达式。
②如果匹配成功，返回第一个匹配到的值（是一个数组，索引为0的元素才是匹配到的值），否则返回Null。
正则表达式.exec( 字符串）
var reg = /a/;
var str = "abc"
console.log(reg.exec(str));
输出结果：
Array(1)
0: "a"
groups: undefined
index: 0
input: "abc"
length: 1
__proto__: Array(0)
2.正则表达式的分组
正则表达式中 （ ） 包起来的内容表示一个分组，可以通过分组来 提取自己想要的内容
var reg = /{{([a-zA-Z]+)}}/
var str = "<div>{{name}}</div>"
console.log(reg.exec(str));
输出结果：
Array(2)
0: "{{name}}"
1: "name"
groups: undefined
index: 5
input: "<div>{{name}}</div>"
length: 2
__proto__: Array(0)
3.正则表达式的字符串替换
字符串的replace(“待替换字符串”，"替换成的字符串" )方法。
replace（）方法每次只能替换第一个匹配的字符。
可以用while循环将字符串中的所有{{name}}替换为name。
// 数据
var data = {name: '吴磊',age: 22,height: "183cm"}
// 正则表达式
var reg = /{{\s*([a-zA-Z]+)\s*}}/
// 字符串
var str = "<div>{{name}}今年{{ age }}岁了，高{{ height }}</div>"
// 获取分组：name
// var result = reg.exec(str);
// 用name替换{{name}}
// var newStr = str.replace(result[0],result[1]);
// console.log(newStr);
// 用while循环实现replace替换
var result = null;
while(result = reg.exec(str)){
// str = str.replace(result[0],result[1]); //替换成属性名
str = str.replace(result[0],data[result[1]]); //替换成属性值
}
console.log(str); //<div>name今年age岁了，高height公分</div>
4.自定义模板引擎函数
function template(id, data) {
// 获取模板
var str = document.getElementById(id).innerHTML;
// 正则表达式
var reg = /{{\s*([a-zA-Z]+)\s*}}/;
// 用while循环实现replace替换,将模板里的占位符替换成data数据
var result = null;
while ((result = reg.exec(str))) {
// str = str.replace(result[0],result[1]); //替换成属性名
str = str.replace(result[0], data[result[1]]); //替换成属性值
}
// 返回模板字符串
return str;
}
