js
一般我们使用js来做一些动态的数据处理，比如和后台接口对接获取数据渲染到页面、对一些div的样式进行动态变化等等
在这里我主要记录一下对数据的处理。
ajax
与后台交互非常好用，大致格式为：
$.ajax({
url: '###',
type: 'POST', //或者GET
dataType: 'json',
contentType: 'application/json;charset=UTF-8',
data: JSON.stringify(obj), //obj为一个对象
success: function (data) {
}
});
这是应对与后台需要接受一个json格式的数据的交互方式，在平常使用中较为广泛的使用，返回的data便是接口会返回的数据，如果某个接口并不需要传值我们可以不写data以及dataType等一些与前端传值到后端有关的属性。
XMLHttpRequest
在进行文件下载的时候，并且使用二进制流的形式进行下载，而我们需要使用浏览器下载，也就是服务器将二进制流文件发给浏览器，浏览器出现下载选择文件存放位置的窗口这种效果，ajax提供的交互方式存在一定的问题，这个时候我们就要使用ajax2的方式，大致格式为：
let request = new XMLHttpRequest();
request.open('POST', 这里写文件下载的接口地址已经需要传递的值，例如：localhost:8080/file/download?filename="文件.txt", true);post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
request.responseType = 'blob'
request.setRequestHeader('Cache-Control', 'no-cache');
request.setRequestHeader("Content-type", "application/json");
request.onreadystatechange = function(res) {
if (request.readyState == 4) {
if (request.status == 200) {
//如果浏览器是ie内核的
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(request.response, name);
} else {//如果是chrome、Firefox等
let url = window.URL.createObjectURL(request.response);
let downloadElement = document.createElement("a");
downloadElement.style.display = "none";
downloadElement.href = url;
downloadElement.download = name;
document.body.appendChild(downloadElement);
downloadElement.click();
document.body.removeChild(downloadElement);
window.URL.revokeObjectURL(url);
}
}
}
}
//obj为需要传到后台接口的值所组成的一个对象
request.send(obj);
这个格式只需要修改obj和接口就可以直接使用。
有时候ajax发送后进行处理的方式是一样的，比如我们在做一个后天管理系统的时候，每个菜单点开都会有一个展示所有数据的一个接口，此时我们可以重写ajax方法。
自定义ajaxPost已经ajaxGet方法
// RequestBody接收 async(是否异步)
ajaxPost: function ajaxPost(allData) {
$.ajax({
url: allData.url,
type: "post",
headers: {
Accept: "application/json; charset=utf-8"
},
// async: allData.async,
contentType: "application/json; charset=utf-8",
data: JSON.stringify(allData.data),
success: allData.success,
complete: function (XMLHttpRequest) {
},
error: function (data, status, e) {
alert("错误！请检查数据是否有误！");
}
});
},
使用的时候也比较方便：
ajaxPost({
url : 数据接口,
data : obj, //包含需要传递的值的对象，无需json格式处理
success : function(data) {
}
});
ajaxGet和ajaxPost类似，不在赘述
说完数据接受，接下来就是数据渲染：
jquery
常用的有：
let html=`<tr><th>所属地区</th><td><span>${pname}</span></td></tr>`;
let fmt=`<tr><th>{0}</th><td><span>{1}</span></td></tr>`
for(let i=0;i<wdata.length;i++){
let item=wdata[i];
html+=fmt.replace("{0}",item.ftype).replace("{1}",item.num);
}
$("#aaa").html(html);
这里使用的思想为使用占位，然后使用字符串的replace方法进行渲染，这里要注意的是，pname是该方法中已经声明好了的一个成员变量，但是要在这种渲染中使用就需要加上${}包裹住才可以获取到值，而{0},{1}并不需要包裹，只是个人的编码习惯，写什么都可以因为最后都会被replace
Mustache
这是js的一个模板引擎，使用起来也比较方便。
首先需要在html文件中编写模板：
<!--基本的jquery，js都是要引入的，这里只写需要额外引入的-->
<script src="/mystatic/js/plugins/mustache/mustache.js"></script>
<table id="newsContentFile" class="table table-hover table-bordered text-nowrap">
<tr>
<th>操作</th>
<th>文件名称</th>
<th>文件大小</th>
</tr>
<tbody id="dataTableFile">
</tbody>
</table>
<script id="fileDownload" type="text/html">
{{#list}}
<tr>
<td>
<button type="button" class="btn btn-info btn-sm" >下载</button>
<button type="button" class="btn btn-danger btn-sm">删除</button>
</td>
<td>{{ext}}</td>
<td>{{size}}</td>
</tr>
{{/list}}
</script>
然后再js中使用ajax获取到值，在使用Mustache进行渲染：
var bodyHtmlTemplate = $("#fileDownload").html();
Mustache.parse(bodyHtmlTemplate); // 预编译模板
var bodyHtml = Mustache.render(bodyHtmlTemplate, datas);//datas是已经处理好的一个包含了list对象的一个数组，格式为：
//datas=[list:{ext:,size:}]
$('#dataTableFile').html(bodyHtml);
这样数据就可以渲染进去了，基本上使用这些可以解决很多渲染问题，目前我只接触到了这些方式，后期如果接触了新的再来做记录。
附上Mustache.js下载地址：
Mustache下载地址