1.生成HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.item {
640px;
/* height: 452px; */
background-color: #eee;
margin-top: 50px;
border-radius: 5px;
overflow: hidden;
}
.item .cover {
display: block;
}
.item .cover img {
display: block;
}
.item .bottom {
height: 35px;
position: relative;
}
.item .bottom a {
text-decoration: none;
line-height: 35px;
font-family: '微软雅黑';
margin-left: 20px;
color: gray;
}
.item .bottom .rightBox {
position: absolute;
top: 0px;
right: 0px;
height: 100%;
}
.item .bottom .rightBox span {
line-height: 35px;
margin: 0 20px;
font-size: 15px;
/* font-family: "微软雅黑"; */
color: gray;
}
.item .bottom .rightBox span::before {
margin-right: 10px;
color: #dd5a64;
}
.getMore {
100px;
height: 100px;
border: none;
background-color: skyblue;
position: fixed;
right: 100px;
top: 50%;
margin-top: -50px;
}
</style>
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
</head>
<body>
<h1>使用jq写的页面</h1>
<input type="button" value="加载更多" class='getMore'>
<div class="container">
<div class="item">
<a href="#" class='cover'><img src="images/vol.859.jpg" alt=""></a>
<div class="bottom">
<a href="#">vol.847 用一首歌来想象你</a>
<div class='rightBox'>
<span class='icon-heart'>18554</span>
<span class='icon-comment'>292</span>
</div>
</div>
</div>
</div>
</body>
</html>
<!-- 导入js插件 模板插件-->
<script type="text/javascript" src='js/template-native.js'></script>
<!-- 导入jq -->
<script type="text/javascript" src='js/jquery.min.js'></script>
<!-- 定义模板 -->
<script type="text/template" id='template'>
<%for(var i=0;i<items.length;i++){%>
<div class="item">
<a href="#" class='cover'><img src="<%=items[i].path%>" alt=""></a>
<div class="bottom">
<a href="#">
<%=itmes[i].name%>
</a>
<div class='rightBox'>
<span class='icon-heart'><%=itmes[i].star%></span>
<span class='icon-comment'><%=itmes[i].message%></span>
</div>
</div>
</div>
<%}%>
</script>
<!-- 自己的代码 -->
<script type="text/javascript">
// 使用jq 绑定点击事件
$(function() {
$(".getMore").click(function() {
// 使用 jq 发送 ajax请求
$.ajax({
url: '02.getMore.php',
type: 'get',
success: function(data) {
// console.log(data);
// 转化为 js对象 数组
var oneObj = JSON.parse(data);
// 包装为 js对象
var obj = {
items: [oneObj]
};
// 调用模板引擎的方法 填充数据
var resultStr = template('template', obj);
// 添加到界面上
$('.container').append(resultStr);
}
});
})
})
</script>
2.引入json文件
[
{
"path":"images/vol.859.jpg",
"name":"vol.859 那阳光，灿烂到心底",
"star":"6977",
"message":"188"
},{
"path":"images/vol.858.jpg",
"name":"vol.858 守望者",
"star":"9012",
"message":"188"
},{
"path":"images/vol.857.jpg",
"name":"vol.857 日落黄昏时",
"star":"9012",
"message":"188"
},{
"path":"images/vol.856.jpg",
"name":"vol.856 生命中不能承受之轻",
"star":"9012",
"message":"188"
},{
"path":"images/vol.855.jpg",
"name":"vol.855 尽是多情之意",
"star":"9012",
"message":"188"
},{
"path":"images/vol.854.jpg",
"name":"vol.854 摇滚的孩子不会老去",
"star":"9012",
"message":"188"
},{
"path":"images/vol.853.jpg",
"name":"vol.853 散落的光阴",
"star":"9012",
"message":"188"
},{
"path":"images/vol.852.jpg",
"name":"vol.852 夜色正迷离",
"star":"9012",
"message":"188"
},{
"path":"images/vol.851.jpg",
"name":"vol.851 The Party Is Not Over",
"star":"9012",
"message":"188"
},{
"path":"images/vol.850.jpg",
"name":"vol.850 因为短暂 所以永恒",
"star":"9012",
"message":"188"
},{
"path":"images/vol.849.jpg",
"name":"vol.849 时代挽歌",
"star":"9012",
"message":"188"
},{
"path":"images/vol.848.jpg",
"name":"vol.848 夜漫长",
"star":"9012",
"message":"188"
},{
"path":"images/vol.847.jpg",
"name":"vol.847 用一首歌来想象你",
"star":"9012",
"message":"188"
},{
"path":"images/vol.846.jpg",
"name":"vol.846 说给你听",
"star":"9012",
"message":"188"
},{
"path":"images/vol.845.jpg",
"name":"vol.845 The L World",
"star":"9012",
"message":"188"
},{
"path":"images/vol.844.jpg",
"name":"vol.844 江湖",
"star":"9012",
"message":"188"
},{
"path":"images/vol.843.jpg",
"name":"vol.843 回家",
"star":"9012",
"message":"188"
},{
"path":"images/vol.842.jpg",
"name":"vol.842 故人难却",
"star":"9012",
"message":"188"
},{
"path":"images/vol.841.jpg",
"name":"vol.841 总有片刻的悲伤和欢愉",
"star":"9012",
"message":"188"
},{
"path":"images/vol.840.jpg",
"name":"vol.840 停下来看看世界的风景",
"star":"9012",
"message":"188"
}
]
3.后台调用数据 返回到
<?php
// 读取json文件 str
$str = file_get_contents('data/info.json');
// 转化为 php中的数组 str->php arr
$arr = json_decode(json)($str);
// 从数组中 获取 某一个元素 array_rand(arr,1); 随机的index
$randomKey = array_rand($arr,1);
// 讲 获取到的单个 元素 返回给浏览器
$oneObj = $arr[$randomKey]; // 获取的是 php对象
// 因为 如果直接 $oneObj返回 发回的格式 是 php中的 对象 并不是 json格式字符串
// print_r($oneObj); // 直接将 对象 返回给 浏览器 不能直接使用echo
// 所以 我们需要 使用 json_encode 进行转化 obj ->str json 格式 字符串
echo json_encode($oneObj);
?>