ajax表单提交、art-template模板引擎

表单

作用：提供用户可以输入数据的组件，采集用户输入的数据提交到服务器
组成：1.表单标签：供用户输入的，如input、textarea、select
2.表单域：form标签，包含表单标签，让若干个表单标签形成一个整体
3.表单按钮：提交按钮、重置按钮

form标签的常用属性：
1.action：url地址，数据提交的地址；默认为当前页面的url地址；
2.target：规定在何处打开url地址 _blank 在新的标签页打开； _self 在当前标签页打开；
3.method：提交数据的方式；
get – 少量数据、数据无需隐藏的提交方式；
post – 大量数据、需要隐藏所提交的数据时的提交方式；
4.enctype：发送数据的编码格式；
application/x-www-form-urlencoded 在发送数据前对数据进行编码；
multipart/form-data 不对数据进行编码(上传文件必须使用该方式)；
text/plain 不对数据进行编码，将空额转化为+；

表单提交数据的缺点
1.会发生页面跳转；
2.页面之前的状态和数据会丢失；

解决方式：使用ajax提交表单数据：
1.js代码监听表单提交事件
2.在提交事件触发时，通过事件对象阻止浏览器默认行为

form标签.onsubmit = function(e){
	e.preventDefault();
}

3.使用js代码收集表单数据

// jQuery方法
$(form标签).seialize();  // 注意：这个方法只收集form标签中有name属性的表单标签的值

// 原生js方法
// 通过标签名称获取value值

4.使用ajax把数据提交到服务器

art-template模板引擎

使用步骤：
1.在页面中引入js文件
2.定义将来要写入页面中的数据
3.定义模板：将来要和数据一起生成的html结构（模板字段写在script标签里，将script标签的type属性设置为text/html）；

<script type="text/html" id="tem">
        <ul>
            <li>{{name}}</li>
            <li>{{age|forMat}}</li>
            <li>{{fav}}</li>
        </ul>
        <div>{{@ HTMLstr}}</div>
        <div>
            {{if flag === 0}}
            flag de zhi shi 0
            {{else if true}}
            flag de zhi bu shi 0
            {{/if}}
        </div>
        <ul>
            {{each hobby}}
            <li>{{$index}}</li>
            <li>{{$value}}</li>
            {{/each}}
        </ul>
        <div>{{date|getDate}}</div>
    </script>

4.调用template函数

var htmlStr = template(模板id,数据); // 注意模板id不写#
// template函数的返回值是将数据注入模板之后生成的字符串；

5.渲染html结构

DOM对象.innerHTML = htmlStr;

模板语法：
1.{{}} 标准语法 （将值对应的名称写在{{}}里，template会识别并替换数据）；
2.常规输出 （变量、对象属性、三元表达式、逻辑或、加减乘除等）

{{value}}、{{obj.key}}、{{obj['key']}}、{{a?b:c}}、{{a||b}}、{{a+b}}

3.原文输出 {{@value}}
需要把包含的html格式的字符串识别为标签时，使用该方式
4.条件输出

{{if value1}}
    输出内容
{{else if value2}}
    输出内容
{{/if}}

5.循环输出

{{each arr}}
	{{$index}} // 索引
	{{$value}} // 值、数据
{{/each}}

6.过滤器

{{value | filterName1 | filterName2}} // 上一个过滤器的输出会作为下一个过滤器的输入
// 定义过滤器：
template.defaults.imports.filterName = function (value) {
    // value表示从上一个输出接受到的数据
	return // 结果
}

模板引擎的实现原理

1.基本语法
exec() 函数用于检索字符串中的正则表达式的匹配。
如果字符串中有匹配的值，则返回该匹配值，否则返回 null。

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

2. 分组
正则表达式中 ( ) 包起来的内容表示一个分组，可以通过分组来提取自己想要的内容，示例代码如下：

 var str = '<div>我是{{name}}</div>';
 var pattern = /{{([a-zA-Z]+)}}/;
 var patternResult = pattern.exec(str);
 console.log(patternResult);
 // 得到 name 相关的分组信息
// ["{{name}}", "name", index: 7, input: "<div>我是{{name}}</div>", groups: undefined]

3.字符串的replace函数
replace() 函数用于在字符串中用一些字符替换另一些字符，语法格式如下：

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

4.使用while循环replace

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) // 输出  <div>张三今年20岁了</div>