手机网站前端设计ajax 无限加载

手机网站为了提高前端设计体验的时候，我们都会给前端加些比较好的交互式体验，下面就来说说如何用ajax无限加载分页，这是几年前做的笔记了，是帝国cms列表页无刷新加载，不会用的朋友可以留言，或者到我们的”厦门网站设计“网站技术栏目找，这里一般都是我们几个老技术员的经验笔记，还有很多关于PC、手机网站前端设计加体验的好技术文档。话不多说了下面就贴上代码给大家看看。

第一步网页引入JQ库

<script type="text/javascript" src="/js/jquery.js"></script>

第二步：

在网页内添加：<div id="more">（这个主要用于JQ加载数据把内容添加这个ID后面）

第三步：添加下面的JS

<script>“
jQuery(function() {
var pg=1;
$('.tip-txt').click(function(){ 
$.getJSON("/extend/clmore.php",{page:pg,cd:1},function(json){ 
if(json){ 
var str = ""; 
$.each(json,function(index,array){ 
var str="<div class=\\\\\"item\\\\\"><a href=\\\\""+array['url']+"/\\\\">"+array['title']+"</a></div>";
$("#more").append(str); 
}); 
pg++;
}
else{ 
$(".tip").show().html("已经到底了..."); 
return false; 
} 
}); 
} );
});
</script>

第四步：二次开发建立一个clmore.php文件生成json数据

<?php
require('../../class/connect.php'); //引入数据库配置文件和公共函数文件
require('../../class/db_sql.php'); //引入数据库操作文件
$link=db_connect(); //连接MYSQL
$empire=new mysqlquery(); //声明数据库操作类
$editor=1; //声明目录层次

$page = intval($_GET['page']);  //获取请求的页数 
$cla = intval($_GET['cd']);  //获取请求的页数 
$start = $page*6; 
$sql=$empire->query("select * from {$dbtbpre}ecms_news order by newstime desc limit $start,6");
while($r=$empire->fetch($sql)){
$pic=$r[titlepic]?$r[titlepic]:'/e/data/images/notimg.gif';
$sayList[] = array('url'=>$url, 'title'=>$r['title']); 
}
echo json_encode($sayList); 
db_close(); //关闭MYSQL链接
$empire=null; //注消操作类变量
?>

第五步：完成上面四步，执行成功。