所属分类:PHP实例-Ajax,JSON
使用方法:
载入必要CSS
<link rel="stylesheet" type="text/css" href="style.css" />
载入jQuery库文件
<script type="text/javascript" src="http://ajax.useso.com/ajax/libs/jquery/1.7.2/jquery.min.js">script>
插件初始化、配置
<script type="text/javascript">i = 1; //设置当前页数 $(function() {var totalpage = 6; //总页数,防止超过总页数继续滚动var winH = $(window).height(); //页面可视区域高度 $("#lists").scroll(function() { if (i < totalpage) { // 当滚动的页数小于总页数的时候,继续加载var pageH = $(document.body).height(); var scrollT = $(window).scrollTop(); //滚动条top var aa = (pageH - winH - scrollT) / winH; if (aa < 0.01) { getJson(i) } } else { //否则显示无数据 showEmpty(); } }); getJson(0); //加载第一页});function getJson(page) {var msg_list = $('#lists');if (msg_list.height() + msg_list[0].scrollTop >= msg_list[0].scrollHeight - 60) { $(".nodata").show().html(""); $.getJSON("ajax.php", {page: i}, function(json) { if (json) { var str = ""; $.each(json, function(index, array) { var str = ""; var str = str + "" + array['id'] + "、" + array['title'] + ""; $("#lists").append(str); }); $(".nodata").hide() } else { showEmpty(); } }); i++; } }function showEmpty() { $(".nodata").show().html("别滚动了,已经到底了。。。"); }script>
HTML部分,也就是加载内容的容器
<div id="lists" style='height:490px;overflow: auto'>div>
数据部分(sql.sql为数据库备份,直接导入数据库)
在ajax.php中配置数据库连接
$host = "localhost"; $db_user = "root";//数据库用户帐号$db_pass = "";//数据库用户密码$db_name = "demo";//数据库名称