本文详细介绍了如何使用模板引擎art-Template进行数据渲染，包括原生和简洁语法的模板编写，以及XMLHttpRequest异步对象设置请求超时的方法。同时，讲解了FormData在表单数据获取和文件上传中的应用，包括文件上传进度监听。最后，通过示例展示了Ajax结合FormData动态生成数据结构的过程。
模板引擎的使用
作用：渲染数据时 代替 拼接字符串的操作
art-Template模板引擎
简介：artTemplate 是新一代 javascript 模板引擎，它采用预编译方式让性能有了质的飞跃，并且充分利用 javascript 引擎特性，使得其性能无论在前端还是后端都有极其出色的表现。
引入js插件：（以下选择其一即可）
1、template_native.js ： 只能使用原生的方法书写模板代码
2、template.js ： 只能使用简洁语法书写模板代码
3、template-web.js ： 原生和简洁语法均支持
artTemplate 原生 js 模板语法
逻辑表达式: <% 与 %> 符号包裹起来的语句则为模板的逻辑表达式
原生写法：
<% 需要循环或判断的代码 %>
<%= 需要替换的属性名称 %>
注：<% / <%= 中间不能有任何的非js代码 %>
实例：
artTemplate核心方法
template(模板id,数据对象)：返回动态生成的页面结构
使用原生模板引擎动态渲染页面案例
html代码如下：
<header>
<div class="page-header container">
<h1>王者荣耀 <small>英雄管理器</small></h1>
</div>
</header>
<div class="container hero-list">
<table class="table table-hover">
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>性别</th>
<th>头像</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
js代码如下：
<!--
动态渲染：发送请求 分析数据 创建模板 调用模板引擎 填充到指定位置
-->
<!-- 下面创建页面动态结构所需要的模板 -->
<!--type属性就是规范了里面的代码以何种语法进行解析 ，script默认的type为text/javascript,script有默认的type,如果设置类型为text/template，那么浏览器知道这不是js,也不会按js语法进行解析，同时它还知道这是一个模板结构，所以会按模板结构的语法处理 -->
<!-- 添加模板结构 -->
<script type="text/template" id="userTemp">
<!-- 添加输出表达式，目的是为了数据的替换，意味着我们应该在模板结构中标记到底数据应该要如何进行替换
原生写法：
<% 需要循环或判断的代码 %>
<%= 需要替换的属性名称 %>
注：<% / <%= 中间不能有任何的非js代码 %>
-->
<% for(let i=0;i < data.length;i++) { %>
<tr>
<td><%=i+1%></td>
<td><%=data[i].name%></td>
<td><%=data[i].gender%></td>
<td><img src="http://127.0.0.1:3002/images/<%=data[i].img%>"></td>
<td>
<a href="#">查看</a>
<a href="javascript:;">修改</a>
<a href="javascript:;">删除</a>
</td>
</tr>
<%}%>
</script>
<script>
$(function () {
$.ajax({
url: 'http://127.0.0.1:3002/getalldata',
dataType: 'json',
success: function (res) {
console.log(res);
if (res.code == 200) {
// template('模板id', 数据对象)
let src = template('userTemp', res);
$('#tbody').html(src)
}
}
})
})
</script>
artTemplate 简洁语法
逻辑表达式：{{ 与 }} 符号包裹起来的语句则为模板的逻辑表达式
<!-- 简介语法:循环遍历表达式 -->
<!--
{{each data value index}}
循环 数组 元素值 下标
{{/each}}
{{each data}}
如果不给元素值和下标，则可以默认为value和index，不过要在前面加上$符号，$value,$index
{{each data v i}}
给了元素值为v，下标为i，则直接用v可得元素值，i可得下标，v,i
-->
<!-- 简介语法:条件表达式 -->
<!--
{{if 条件}} ------{{if}}开头
<p>内容</p>
{{else if 条件}}
<p>内容</p>
{{else}}
<p>内容!</p>
{{/if}} -------{{/if}}结束
-->
<!-- 简介语法:输出表达式 -->
<!-- 编码可以防止数据中含有 HTML 字符串，避免引起 XSS 攻击-->
<!--
- 对内容编码输出：{{content}}
- 不编码输出： {{#content}}
-->
artTemplate核心方法
template(模板id,数据对象)：返回动态生成的页面结构
使用模板引擎简洁语法动态渲染页面案例
html代码如下：
<header>
<div class="page-header container">
<h1>王者荣耀 <small>英雄管理器</small></h1>
</div>
</header>
<div class="container hero-list">
<table class="table table-hover">
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>性别</th>
<th>头像</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
js代码如下：
<!-- 下面创建页面动态结构所需要的模板 -->
<!--type属性就是规范了里面的代码以何种语法进行解析 ，script默认的type为text/javascript,script有默认的type,如果设置类型为text/template，那么浏览器知道这不是js,也不会按js语法进行解析，同时它还知道这是一个模板结构，所以会按模板结构的语法处理 -->
<!-- 添加模板结构 -->
<script type="text/template" id="userTemp">
{{each data}}
{{if $index%2 == 0}}
<tr style="background-color:#ccc">
{{else}}
<tr style="background-color:#666">
{{/if}}
<!-- <tr> -->
<td>{{$index+1}}</td>
<td>{{$value.name}}</td>
<td>{{$value.gender == '男'?'男生':'女生'}}</td>
<td><img src="http://127.0.0.1:3002/images/{{$value.img}}"></td>
<td>
<a href="#">查看</a>
<a href="javascript:;">修改</a>
<a href="javascript:;">删除</a>
</td>
</tr>
{{/each}}
</script>
<script>
$(function () {
$.ajax({
url: 'http://127.0.0.1:3002/getalldata',
dataType: 'json',
success: function (res) {
console.log(res);
if (res.code == 200) {
let src = template('userTemp', res);
$('#tbody').html(src)
}
}
})
})
</script>
XMLHttpRequest异步对象设置请求超时
设置超时
a)、设置超时 xhr.timeout
b)、监听超时事件 xhr.ontimeout = function () {// code}
当请求超时，此事件就会被触发
FormData
new Formdata() 可用于管理表单数据
- 首先要获取一个表单元素form
- 然后在实例化时 new FormData(form)，将表单元素form传进去
- 会返回一个对象，此对象可以直接做为xhr.send(formData)的参数
此时我们的数据就是以二进制形式传递了
注意:
a) 这里只能以post形式传递
b) 在使用formdata获取表单数据时，不能设置请求头，否则会报错，因为formdata内部会进行数据参数的处理
使用formdata实现表单数据获取案例
html代码如下：
<form action="" class="myform">
用户名：<input type="text" name='username' class="uname"> <br>
密码：<input type="text" name="password" class="upass"> <br>
手机号码：<input type="text" name="phone" class="uphone"> <br>
<input type="button" value="注册" class="btn">
</form>
js代码如下：
<script>
document.querySelector('.btn').onclick = function () {
let xhr = new XMLHttpRequest();
// 获取表单
let myform = document.querySelector('.myform');
// 使用FormData获取表单数据
let formdata = new FormData(myform);
xhr.open('post', 'http://127.0.0.1:3002/addUser');
//注意：在使用formdata获取表单数据时，不能设置请求头，否则会报错，因为formdata内部会进行数据参数的处理
// xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// 响应请求
xhr.send(formdata);
xhr.onload = function () {
console.log(xhr.response);
}
}
</script>
使用formdata实现文件上传
// a) 我们上传文件是以二进制形式传递的
// b) 我们可以通过表单<input type="file">获取到一个文件对象
// c) 然后file.files[0]可以获取文件信息
// d) 然后再利用var formData = new FormData() 实例化
// e) 然后再利用formData.append(‘upload’, file.files[0])将文件转成二进制
// f) 最后将 formData 做为xhr.send(formData)的参数
文件上传进度监听
上传进度监听
a) 利用XMLHttpRequest我们可以实现文件的上传
b) 并且我们可以通过xhr.upload.onprogress = function (ev) {// code}，监听上传的进度
c) 这时我们上传的进度信息会保存在事件对象ev里
d) ev.loaded 表示已上传的大小，ev.total表示文件整体的大小
e) var percent = ev.loaded / ev.total
案例
html代码如下:
<form action="">
<input type="file" name="img" id="img" class="myimg"> <br>
<img src="" alt="" class="myphoto">
<div></div>
<input type="button" value="单击上传文件" class="btn">
</form>
js代码如下：
<script>
// a) 我们上传文件是以二进制形式传递的
// b) 我们可以通过表单<input type="file">获取到一个文件对象
// c) 然后file.files[0]可以获取文件信息
// d) 然后再利用var formData = new FormData() 实例化
// e) 然后再利用formData.append(‘upload’, file.files[0])将文件转成二进制
// f) 最后将 formData 做为xhr.send(formData)的参数
document.querySelector('.btn').onclick = function () {
let xhr = new XMLHttpRequest();
//收集文件数据
// 获取当前用户所选择的文件对象--不是文件名称，而是文件数据
// files可以获取当前用户所选择的所有文件对象，它是一个伪数组，我们现在只选择了一个所有要使用[0]来获取用户当前所选择的文件对象
// let myform = document.querySelector('.myimg').files
let myfiles = document.querySelector('.myimg').files[0];
console.log(myfiles);
let formdata = new FormData();
// 一个很重要的方法：append,它可以让我们在formdata中追加参数：append(key,value),value可以是任意格式
// append：把文件数据追加到formdata中
formdata.append('img', myfiles);
xhr.open('post', 'http://127.0.0.1:3002/uploadFile');
// 监听文件上传进度
// xhr.upload.onprogress = function (event) {
// console.log(event)
// var pecent = event.loaded / event.total * 100 + '%'
// document.querySelector('div').style.width = pecent
// }
// 注意不用自己来设置请求头，况且如果自己设置了反而会出错--请求不再发送
// xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(formdata);
xhr.onload = function () {
let res = JSON.parse(xhr.response);
console.log(res);
// 将获取到的文件输出到页面中
document.querySelector('.myphoto').src = 'http://127.0.0.1:3002/images/' + res.img;
}
}
</script>
Ajax结合FormData实现动态生成数据结构
html代码如下;
<form action="">
<input type="file" name="img" id="img" class="myimg"> <br>
</form>
js代码如下：
<script>
$(function () {
// 用户一选择文件就立刻进行文件的上传
// change：当用户选择好文件后就立即触发
$('.myimg').on('change', function () {
// 收集数据--获取文件数据，还是使用formdata收集数据，它是原生方式
// 第一个[0]：将jq对象转换为dom元素
// 第二个[0]：获取用户所选择的文件列表中的第一个文件
let file = $('.myimg')[0].files[0];
let formdata = new FormData();
formdata.append('img', file);
$.ajax({
type: 'post',
url: 'http://127.0.0.1:3002/uploadFile',
// ajax支持三种格式的参数：key=value&key=value | {key:value} | formdata
data: formdata,
dataType: 'json',
contentType: false,
processData: false,
success: function (res) {
console.log(res);
}
})
})
})
</script>
1618
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
