通过ajax实现简单的数据交互（模板引擎）
最后的结果是这样的，样式什么的自己调节，本节主要内容是ajax。
思路：
1，对ajax进行封装
2，调用ajax获取数据
3，在ajax获取成功的函数中进行操作
3.1，模板的书写
将需要改变的数据全部使用{# demo #}这样的格式书写，以便替换里面的数据
3.2，将模板里的数据替换成.json里的数据
3.2.1 创建一个模板格式化函数
使用正则表达式提取出数据，例如提取出{# demo #}里的demo
利用提取出的数据在.json查找，并返回数据。例如data[‘demo’]
3.3 ,遍历数据
即每一个.json里的数据，都是一个模板，只是数据不同
4，将遍历后的数据输出到页面上
结果大概就是下面这个样子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>前后端实现简单的数据交互</title>
<style>
* {
margin: 0;
padding: 0;
}
.product {
width: 150px;
height: 200px;
float: left;
border: 1px solid #000;
padding: 10px;
}
.product img {
width: 90%;
height: 100px;
display: block;
margin: 1% auto;
}
.layer>p:first-child,
.middle>p:first-child,
.bottom>p:first-child {
float: left;
}
.layer>p:last-child,
.middle>p:last-child,
.bottom>p:last-child {
float: right;
}
.layer,
.middle,
.bottom {
overflow: hidden;
}
</style>
<!-- 3，显示的模板 -->
<script type="text/template" id="app_tpl">
<div class="product">
<img src="{#img#}" alt="">
<div class="layer">
<p>找同款</p>
<p>找相似</p>
</div>
<div class="middle">
<p class="price-text">￥{#price#}</p>
<p class="sales">{#sales#}人付款</p>
</div>
<p class="title">{#title#} </p>
<div class="bottom">
<p class="store-text">{#store#}</p>
<p class="address">{#address#}</p>
</div>
</div>
</script>
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
// 1,对ajax进行封装
var Util = {
getId: function (idname) {
return document.getElementById(idname);
},
ajax: function (obj) {
obj = obj || {};
obj.type = obj.type || "GET"
obj.url = obj.url || '';
obj.data = obj.data || null;
obj.async = obj.async || true;
obj.success = obj.success || function () {}
obj.error = obj.error || function () {}
//如果传递参数的话：数据data字符串，以&隔开，即后缀
var param = [];
for (var key in obj.data) {
param.push(key + '=' + obj.data[key]);
}
var sendData = param.join("&");
var xhr = new XMLHttpRequest();
//当为GET/POST方式发送请求
if (obj.type.toUpperCase() === "GET") {
xhr.open(obj.type, obj.url + "?" + sendData, obj.async);
xhr.send();
} else {
xhr.open(obj.type, obj.url, obj.async);
xhr.setRequestHeader("Content-type",
"application/x-www-form-urlencoded;charset=utf-8"); //设置头部信息
xhr.send(sendData);
}
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
obj.success && obj.success(JSON.parse(xhr.responseText));
} else {
obj.error && obj.error(JSON.parse(xhr.responseText));
}
}
}
}
}
// 格式话模板功能
function formatTpl(data, str) {
// 寻找 {##}内的数据，并返回何其相关的数据
return str.replace(/\{#(\w+)#\}/g, function (match, $1) {
return data[$1]
})
}
var html = '';
var tplInner = Util.getId('app_tpl').innerHTML;
// 2，通过ajax获取数据
Util.ajax({
url: 'data.json',
success: function (data) {
// console.log(data.data.user);
// console.log(Util.getId('app_tpl').innerHTML);
// 遍历所需要的数据组成的数组并输出至页面上
var dataList = data.data.user;
for (var i = 0; i < dataList.length; i++) {
// console.log(formatTpl(dataList[i],tplInner));
html += formatTpl(dataList[i],tplInner);
}
Util.getId('app').innerHTML = html
}
})
</script>
</body>
</html>
<!--
思路：
1，封装ajax
2，通过ajax获取数据
3，显示的模板
4，将模板上的数据替换成json上的数据
5，显示在页面上
-->
data.json数据
{
"status": {
"errno": "0",
"errmsg": ""
},
"data": {
"user": [
{"img":"img/pic_1.png","price":"1.00","title":"标题1","sales":"10","store":"店铺1","address":"广东 广州"},
{"img":"img/pic_2.png","price":"2.00","title":"标题2","sales":"12","store":"店铺2","address":"广东 广州"},
{"img":"img/pic_3.png","price":"3.00","title":"标题3","sales":"13","store":"店铺3","address":"广东 广州"},
{"img":"img/pic_4.png","price":"4.00","title":"标题4","sales":"14","store":"店铺4","address":"广东 广州"},
{"img":"img/pic_5.png","price":"5.00","title":"标题5","sales":"15","store":"店铺5","address":"广东 广州"},
{"img":"img/pic_6.png","price":"6.00","title":"标题6","sales":"16","store":"店铺6","address":"广东 广州"},
{"img":"img/pic_7.png","price":"7.00","title":"标题7","sales":"71","store":"店铺7","address":"广东 广州"},
{"img":"img/pic_8.png","price":"8.00","title":"标题8","sales":"81","store":"店铺8","address":"广东 广州"},
{"img":"img/pic_9.png","price":"9.00","title":"标题9","sales":"81","store":"店铺9","address":"广东 广州"},
{"img":"img/pic_10.png","price":"10.00","title":"标题10","sales":"41","store":"店铺10","address":"广东 广州"},
{"img":"img/pic_11.png","price":"11.00","title":"标题11","sales":"14","store":"店铺11","address":"广东 广州"},
{"img":"img/pic_12.png","price":"12.00","title":"标题12","sales":"21","store":"店铺12","address":"广东 广州"},
{"img":"img/pic_13.png","price":"13.00","title":"标题13","sales":"21","store":"店铺13","address":"广东 广州"},
{"img":"img/pic_14.png","price":"14.00","title":"标题14","sales":"21","store":"店铺14","address":"广东 广州"},
{"img":"img/pic_15.png","price":"15.00","title":"标题15","sales":"14","store":"店铺15","address":"广东 广州"},
{"img":"img/pic_16.png","price":"16.00","title":"标题16","sales":"51","store":"店铺16","address":"广东 广州"},
{"img":"img/pic_17.png","price":"17.00","title":"标题17","sales":"61","store":"店铺17","address":"广东 广州"},
{"img":"img/pic_18.png","price":"18.00","title":"标题18","sales":"71","store":"店铺18","address":"广东 广州"},
{"img":"img/pic_19.png","price":"19.00","title":"标题19","sales":"17","store":"店铺19","address":"广东 广州"}
]
}
}
