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下载地址