当滚动条滚动的底部的时候通过ajax异步获取json数据demo实例
index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax下拉获取数据</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style type="text/css">
/*简单样式重置*/
* {margin: 0;padding: 0;}
body {font-size: 12px;}
p {margin: 5px;}
.box {padding: 10px;}
.loading{
height: 60px;
line-height: 60px;
text-align: center;
}
</style>
</head>
<body>
<p>往下拉</p>
<div id="resText">
</div>
<div class="loading">
<img src="http://game.9g.com/rank/img/loading.gif" />
正在玩命加载 ..
</div>
<!-- 引入jQuery -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function() {
// 开始加载几条，第一次从第几条开始加载 每次需要加载5条内容
var num=10,st=0;
// 判断是否还有数据
var swit=true;
var len=0;
// 绑定页面滚动事件
$(window).bind('scroll', function() {
if(swit){
show()
}
});
function show() {
// 是否到达页面底部
if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
ajaxRead();
}
}
// ajax获取数据
function ajaxRead() {
var html = "";
$.ajax({
type: 'get',
dataType: 'json',
url: 'data.json',
beforeSend: function() {
console.log('loading...')
$('.loading').show();
},
success: function(data) {
var item=data.items;
// 定义替换变量
var num1=num;
len=item.length;
// 判断是否有数据
if(st<=len){
// 判断是否是最后几条
if(parseInt((len-st)/num)<1){
num1=len%num;
}
for(var i=st;i<st+num1;i++){
html += '<div class="box">';
html += '<h1>' + item[i].title + '</h1>';
html += '<a hreft="' + item[i].link + '"><img src="' + item[i].media.m + '"/></a>'
html += '<div>' + item[i].tags + '</div>';
html += '</div>';
}
st+=num;
$("#resText").append($(html));
}else{
$("#resText").append($("<p>已经没有数据了。。。</p>"));
// 关闭开关
swit=false;
}
},
complete: function() {
console.log('mission acomplete.')
$('.loading').hide();
}
});
}
// 执行
ajaxRead();
})
</script>
</body>
</html>
用来测试的data.json文件
{"items":[
{
"title":"北京上海微信测试",
"link":"http://www.baidu.com",
"media":{"m":"http://placehold.it/260x120"},
"tags":"这是一个测试"
},
{
"title":"深圳上海微信测试",
"link":"http://www.baidu.com",
"media":{"m":"http://placehold.it/260x120"},
"tags":"这是一个测试"
},
{
"title":"合肥上海微信测试",
"link":"http://www.baidu.com",
"media":{"m":"http://placehold.it/260x120"},
"tags":"这是一个测试"
},
{
"title":"北京上海微信测试",
"link":"http://www.baidu.com",
"media":{"m":"http://placehold.it/260x120"},
"tags":"这是一个测试"
},
{
"title":"上海上海微信测试",
"link":"http://www.baidu.com",
"media":{"m":"http://placehold.it/260x120"},
"tags":"这是一个测试"
},
{
"title":"深圳上海微信测试",
"link":"http://www.baidu.com",
"media":{"m":"http://placehold.it/260x120"},
"tags":"这是一个测试"
},
{
"title":"合肥上海微信测试",
"link":"http://www.baidu.com",
"media":{"m":"http://placehold.it/260x120"},
"tags":"这是一个测试"
},
{
"title":"北京上海微信测试",
"link":"http://www.baidu.com",
"media":{"m":"http://placehold.it/260x120"},
"tags":"这是一个测试"
},
{
"title":"上海上海微信测试",
"link":"http://www.baidu.com",
"media":{"m":"http://placehold.it/260x120"},
"tags":"这是一个测试"
},
{
"title":"深圳上海微信测试",
"link":"http://www.baidu.com",
"media":{"m":"http://placehold.it/260x120"},
"tags":"这是一个测试"
},
{
"title":"合肥上海微信测试",
"link":"http://www.baidu.com",
"media":{"m":"http://placehold.it/260x120"},
"tags":"这是一个测试"
},
{
"title":"南京上海微信测试",
"link":"http://www.baidu.com",
"media":{"m":"http://placehold.it/260x120"},
"tags":"这是一个测试"
},
{
"title":"六安上海微信测试",
"link":"http://www.baidu.com",
"media":{"m":"http://placehold.it/260x120"},
"tags":"这是一个测试"
},
{
"title":"芜湖上海微信测试",
"link":"http://www.baidu.com",
"media":{"m":"http://placehold.it/260x120"},
"tags":"这是一个测试"
},
{
"title":"杭州上海微信测试",
"link":"http://www.baidu.com",
"media":{"m":"http://placehold.it/260x120"},
"tags":"这是一个测试"
},
{
"title":"苏州上海微信测试",
"link":"http://www.baidu.com",
"media":{"m":"http://placehold.it/260x120"},
"tags":"这是一个测试"
},
{
"title":"成都上海微信测试",
"link":"http://www.baidu.com",
"media":{"m":"http://placehold.it/260x120"},
"tags":"这是一个测试"
}
]}
发表评论：