ajax 下拉加载更多效果

1.生成HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style type="text/css">
    .item {
        width: 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 {
        width: 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);
 ?>

ajax 下拉加载更多效果

推荐阅读