Ajax：表单 & 模板引擎
form 表单在HTML中，可以通过<form>创建一个表单，收集用户信息。而收罗到的信息想要发送给后端，此时就要与Ajax进行配合。
form 属性
在原生HMTL表单中，包含四个根本属性：
属性功能值action向何处提交表单内的数据urlmethod提交表单的方式get、postenctype如何对表单数据编码target打开action url的为止_blank、_self
[*]action
action的属性值通常是后端提供的一个url地址，这个地址接收并处理来自前端的数据。如果<form>没有指定该值，那么默认为当前页面的url。
示例：
<form action="/login">
<input type="account" name="account" />
<input type="password" name="password" />
<button type="submit">提交</button>
</form>
这是一个表单，指定action="/login"。
输出效果：
https://i-blog.csdnimg.cn/direct/b6884a0139234f689966ef884e630b78.gif#pic_center
可以看到，点击提交后，地址变成了/login?account=123456&password=54321，此中/login就是表单提交到的地址，而?后面是表单的参数。
这里有两个细节：
[*]目的地址默认是在当前页面打开
[*]表单的参数追加到了地址的末尾，说明默认是get请求
[*]taget
taget指定在何处打开地址，刚刚打开地址是，是默认在当前页面打开，通过指定target就可以改变打开目的地址的方式。
[*]_blank：在新窗口打开
[*]_self：在当前窗口打开，默认值
[*]method
刚刚发现，表单的提交方式默认为get，如果想要切换表单提交方式，可以通过method属性。
[*]get：以get情势发送请求，默认值
[*]post：以post情势发送请求
示例：
<body>
<form action="/login" method="post" >
<input type="account" name="account" />
<input type="password" name="password" />
<button type="submit">提交</button>
</form>
</body>
此处把表单的提交方式改为post。
提交表单后，检察控制台：
https://i-blog.csdnimg.cn/direct/e032254e5e3a4d89b0038f52162931bb.png#pic_center
这次提交数据后，地址就是/login，表单的数据不再以?的情势追加到地址末尾。而在Payload窗口，可以看到表单数据account和password已经放在了请求的内部。
[*]enctype
enctype用于指定表单数据的编码方式，其有三个可选值：
[*]application/x-www-form-urlencoded：在发送数据前编码所以的字符，默认值
[*]multipart/form-data：不对字符编码，如果表单内上传文件时，必须使用该选项，防止错误编码
[*]text/plain：空格转换为'+'字符，但是不对特别字符编码，几乎不用
原生的HTML表单有许多缺点：
[*]表单提交后，会发生页面跳转
[*]表单提交后，会清空表单原有数据
想要处理这些标题，那就要引入JavaScript和Ajax，JavaScript可以阻止默认行为，禁止页面进行跳转。但是如许也会阻止数据的提交，因此使用Ajax来进行表单数据提交，不再让表单自己提交数据。而且Ajax提交数据，不会清空表单的内容。
Ajax操控表单
事件监听
如果要在用户提交表单时，让Ajax立即响应，代替表单的提交使命，此时就要对表单进行提交事件的事件监听。
只需要调用原先的jQuery接口即可：
$('form').submit(function(){})
$('form').on('submit', function(){})
以上两种方式，都可以实现对表单的提交事件的监听。
阻止默认行为
想要阻止默认提交行为，也很简单：
$('form').on('submit', function (e) {
e.preventDefault()
})
在回调函数中，添加是事件参数e，随后调用preventDefault方法阻止默认行为，这可以同时阻止提交行为和页面跳转。
收集表单数据
现在已经阻止了提交行为，接下来就要通过Ajax代替原先的提交行为了。在提交数据之前，就要先获取到表单的数据，这里jQuery封装了接口，可以一次性获取全部表单内容。
语法：
$('form').serialize()
注意：使用这个方法时，要确保表单的每个栏目都有name属性，否则无法获取到对应的栏目。
示例：
<form action="/login" id="f1">
<input type="account" name="account" />
<input type="password" name="password" />
<button type="submit">提交</button>
</form>
<script>
$(function () {
$('#f1').on('submit', function (e) {
e.preventDefault()
var data = $(this).serialize()
console.log(data)
})
})
</script>
输出效果：
https://i-blog.csdnimg.cn/direct/2bc9d91f0c564ebb8b64b3755a2e3a17.png#pic_center
此时data就已经拿到了表单的内容，最后就可以通过Ajax进行发送了。
模板引擎
当从表单中拿到了大量的数据，此时可能就需要把这些数据重新渲染到页面上，如果对于原生的JavaScript或者jQuery，处理这个都是比力麻烦的，需要进行字符串拼接等操纵，把数据拼接到标签的内部。
假设现在要渲染以下内容：
var data = {
title: '<h3>用户信息</h3>',
name: '张三',
age: 18,
isVIP: true,
regTime: new Date(),
hobby: ['HTML', 'HTTP', 'Linux']
}
渲染为如下结构：
https://i-blog.csdnimg.cn/direct/e2f742ac8fa74fd2bfa9d3f1faf9b4cc.png#pic_center
如果只使用html和jQuery，那么就要从对象提取信息，然后一个一个通过.html方法把信息添加到页面中，对于最后一个hobby数组，还需要通过.each方法进行遍历，追加到页面中。
art-template
这很麻烦，模板引擎可以办理这个标题，以模板的情势，快速渲染大量的信息到网页。此处选用art-template模板引擎，可以到以下网址下载：
http://aui.github.io/art-template/zh-cn/docs/installation.html
只需要把template-web.js（gzip: 6kb）这个文件下载下来，并通过JavaScript的情势引入即可使用。
<script src="./template-web.js"></script>
导入art-template后，全局就会多出一个template方法，这就是模板引擎的核心方法。
示例：
首先，模板引擎的内容要界说在<script>标签内部：
<script type="text/html" id="tpl">
<p>姓名: {{name}}</p>
<p>年龄: {{age}}</p>
</script>
此处要制定type属性和id属性，默认情况下type="text/JavaScript"，表现以JavaScript情势解析<script>内部的内容，此处改为text/html，表现以html情势解析内容。
随后就可以在内部编写html的代码了，在编写代码时，可以使用{变量名}}的情势来引入外部变量，这个变量会直接取对象中的值进行填入。
模板语法：
template('id', 对象)
此处的id是刚才<script>内部的属性id="tpl"，而对象是要添补的对象，最后会返回格式化后的html字符串。
示例：
<script>
var data = { name: '张三', age: 20}
var htmlStr = template('tpl-user', data)
$('#container').html(htmlStr)
</script>
在对象data中，包含name和age两个属性，这刚好和之前指定的{{name}}和{{age}}相匹配。随后调用template('tpl, data)，表现用data这个对象值，去添补模板tpl的内容，此时就会返回一个html格式的字符串，直接把字符串填入目的容器即可。
<div id="container"></div><script type="text/html" id="tpl-user"><p>姓名: {{name}}</p><p>年龄: {{age}}</p></script><script>
var data = { name: '张三', age: 20}
var htmlStr = template('tpl-user', data)
$('#container').html(htmlStr)
</script>
输出效果：
https://i-blog.csdnimg.cn/direct/37a9e24304b24119bd3872dc96e62a4e.png#pic_center
如许就实现了快速渲染对象的内容到html中。
{{}}语法
刚才已经见过{{}}的根本功能了，其实就是把对象中命名相匹配的内容，直接添补到html中，其实它还支持许多种语法格式：
{{value}}
{{obj.key}} // 获取对象值
{{obj['key']}} // 获取对象值
{{a ? b : c}}// 三元表达式
{{a || b}} // 逻辑判断
{{a + b}} // 算数运算
原文输出
如果输出的内容是一个字符串，并且字符串中包含html标签，如果希望这个标签被渲染，需要使用原文输出：
{{@ value}}
在值前面加一个@符号即可。
示例：
<div id="container"></div>
<script type="text/html" id="tpl">
<p>姓名: {{@ name}}</p>
<p>年龄: {{age}}</p>
</script>
<script>
var data = { name: '<li>张三</li>', age: 20}
var htmlStr = template('tpl', data)
$('#container').html(htmlStr)
</script>
输出效果：
https://i-blog.csdnimg.cn/direct/8201998899a843b998d113e8d70e413c.png#pic_center
通过{{@ name}}，<li>标签就被正常解析了。
条件输出
有时候，可能需要在输出时进行条件判断，比如说如果某个用户是VIP，要额外输出VIP的剩余时间。而如果他不是VIP，这个内容就不用输出。对于这种情况，可以使用条件输出来完成。
语法：
{{if value}} 输出内容 {{/if}}
{{if value}} 输出内容1 {{else}} 输出内容2 {{/if}}
{{if value1}} 输出内容1 {{else if value2}} 输出内容2 {{/if}}
示例：
<script type="text/html" id="tpl">
<p>姓名: {{name}}</p>
<p>年龄: {{age}}</p>
{{if isVip}}
<p> VIP剩余时间: {{time}} </p>
{{else}}
<p> 不是VIP </p>
{{/if}}
<hr>
</script>
在模板中，通过{{if isVip}}来判断该用户是不是VIP，并选择差别的输出效果。
填入以下两个对象：
<script>
var zs = {
name: '张三',
age: 20,
isVip: true,
time: 100
}
var ls = {
name: '李四',
age: 25,
isVip: false,
time: null
}
var htmlStr1 = template('tpl', zs)
var htmlStr2 = template('tpl', ls)
$('#container').html(htmlStr1 + htmlStr2)
</script>
示例中，张三是VIP，而李四不是，最后这两者渲染出来的效果就不一样：
https://i-blog.csdnimg.cn/direct/efba98645a5442f0852e73ab30a1ea04.png#pic_center
循环输出
如果输出的目的是一个数组，可以通过循环输出来遍历全部的数组元素。
语法：
{{each arr}}
{{$index}} {{$value}}
{{/each}}
此中arr是被遍历的数组，而$index是下标，$value是元素值。
示例：
<script type="text/html" id="tpl">
<p>姓名: {{name}}</p>
<p>年龄: {{age}}</p>
<ul>
{{each hobby}}
<li> {{$value}} </li>
{{/each}}
</ul>
</script>
在<ul>内部，通过循环遍历全部的hobby，并通过{{$value}}拿到元素值，渲染到li中。
给张三加上hobby属性：
<script>
var zs = {
name: '张三',
age: 20,
hobby: ['HTML', 'HTTP', 'Linux']
}
var htmlStr = template('tpl', zs)
$('#container').html(htmlStr)
</script>
输出效果：
https://i-blog.csdnimg.cn/direct/35b637aa8e934c47874e36758c79918d.png#pic_center
如许就可以快速遍历全部的数组成员了。
过滤器
如果说，对象中的元素并不是直接填写到页面中的，而是要经过一定的处理之后在填入。比如说商品代价，可能要乘以某个值后，以打折的代价表现在页面中，这就需要引入过滤器。
{{value | filterName }}
此中value是要处理的值，这个值会交给filterName 函数处理，函数返回值会最为终极效果填入模板。
过滤器函数并不是直接就可以调用原生的函数，而是要导入到模板中：
template.defaults.imports.filterName = function(value){ 函数体 }
现在张三对象内容如下：
var zs = {
name: '张三',
age: 20,
hobby: ['HTML', 'HTTP', 'Linux'],
startYear: 2023
}
此处的startYear表现入学年份，终极渲染到页面中时，希望输出学年: 入学年份 ~ 毕业年份，此时可以交给一个过滤器处理：
template.defaults.imports.graduate = function(value){
return value + " ~ " + (value + 4)
}
过滤器graduate 会进行一个字符串拼接，虽然value是数字类型，但是中间的" ~ "是一个字符串，终极整个返回值就是一个字符串，毕业年份是入学年份的四年后。
在模板中，把startYear 输入到过滤器：
<script type="text/html" id="tpl">
<p>姓名: {{name}}</p>
<p>年龄: {{age}}</p>
<ul>
{{each hobby}}
<li> {{$value}} </li>
{{/each}}
</ul>
<p>
学年: {{ startYear | graduate }}
</p>
</script>
此处{{ startYear | graduate }}就是在处理数据。
输出效果：
https://i-blog.csdnimg.cn/direct/c07680432fd24371ba6c4d43e9566e90.png#pic_center
原理
其实模板引擎的原理非常简单，就是正则表达式匹配，随后替换元素值即可。
以art-template为例，其全部占位符格式都是{{}}，那么正则就可以写为：
let pattern = /{{(+)}}/
首先通过最外层的{{}}进行占位符得到匹配，内层一个()进行分组匹配，提取出具体的信息，+表现提取任意多个字母。
比如对于字符串<div>{{name}}</div>，通过以上正则就可以得到name这个值。
var str = '<div>{{name}}</div>'
var pattern = /{{(+)}}/
var result = pattern.exec(str)
console.log(result)
输出效果：
https://i-blog.csdnimg.cn/direct/25bb0c63e9a745d181e066806e978b29.png#pic_center
可以看到，最后正则返回一个数组，第一个元素是匹配成功的字符串，第二个元素是提取出来的分组值。
当提取到变量名后，就要去对象中拿到对于的变量，并替换原先的占位符，替换通过replace方法完成：
'string'.replace('子串', '替换值')
比如说"helloworld".replace("world", "linux")，就会返回字符串"hellolinux"。
let obj = {
name: "张三"
}
var str = '<div>{{name}}</div>'
var pattern = /{{(+)}}/
var patternResult = pattern.exec(str)
str = str.replace(patternResult, obj])
console.log(str)
patternResult是被匹配的字符串，也就是{{name}}，patternResult是提取到的分组，也就是name。只需要把原字符串str的{{name}}替换为obj['name']即可，也就是str.replace(patternResult, obj])。
输出效果：
https://i-blog.csdnimg.cn/direct/3603f0b14eb045ac8dea6b32159e30b6.png#pic_center
如许就完成了元素的替换。
当整个字符串中有多个{{xxx}}，可以使用一个循环进行匹配：
let patternResult = null;
while (patternResult = pattern.exec(str)) {
str = str.replace(patternResult, obj])
}
当pattern.exec匹配不到{{}}时，就会返回一个null，循环就会结束，整个模板字符串被完全替换为对象的值，最后得到一个可以直接渲染的html字符串。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]