列表页通过ajax实现无限加载

来源:互联网 发布:iphone吉他软件删除 编辑:程序博客网 时间:2024/05/16 09:18

前台js代码,使用前需要引用jq。前台布局代码及样式代码这里就不在这里写了,这里主要记录js代码及后台处理代码

前台代码

$(function(){var i=0;$('.industry_type').click(function(){//案例分类条件:行业类型$('.industry_type').removeClass("current");$(this).addClass("current");//当前选项高亮$(".action").html("");//移除原有内容i = 0;loadMeinv();//加载新内容});$('.site_type').click(function(){//案例分类条件:网站类型$('.site_type').removeClass("current");$(this).addClass("current");$(".action").html("");i = 0;loadMeinv();});//url data function dataTypefunction loadMeinv(){i++;var id=16;var it = $('.industry_type.current').attr('value');var st = $('.site_type.current').attr('value');/**   $.get(路径,参数,返回值处理,返回数据类型);* *   m = content 为模型/模块名称 位于phpcms/modules/content*c = index 为控制器名称 位于phpcms/modules/content/index.php*a = lists 为时间名称 位于phpcms/modules/content/index.php 中lists()方法*json 返回数据必须是json格式的数据,注意json是object类型的**/$.get('index.php?m=content&c=index&a=lists',{show:'ok',catid:id,page:i,industry_type:it,site_type:st},function(data){var html = "";console.log(data);for(var r in data){//通过 for in 遍历对象,for循环是遍历数组,跟 for in 是有差别的//console.log(r);html = '<li><a href="'+data[r]['url']+'" ><img src ="'+ data[r]['thumb'] +' " width="270" height="'+data[r]['img_height']+'" >'+data[r]['title']+'</a></li>';getMinUl().append(html);}},'json');}loadMeinv();$(window).scroll(function(){// 当滚动到最底部以上100像素时, 加载新内容if ($(document).height() - $(this).scrollTop() - $(this).height()<200) loadMeinv();});/**/$('.more').on('click',function(){loadMeinv();});function getMinUl(){//每次获取最短的ul,将图片放到其后var $arrUl = $(".action");var $minUl =$arrUl.eq(0);$arrUl.each(function(index,elem){if($(elem).height()<$minUl.height()){$minUl = $(elem);}});return $minUl;}})

后台处理代码

<?php/***新增初始化模型函数 set_modelid 如果该函数在模型文件中有的话就不用增加了 * 初始化模型 * @param $catid */public function set_modelid($catid) {static $CATS;$siteids = getcache('category_content','commons');if(!$siteids[$catid]) return false;$siteid = $siteids[$catid];if ($CATS[$siteid]) {$this->category = $CATS[$siteid];} else {$CATS[$siteid] = $this->category = getcache('category_content_'.$siteid,'commons');}if($this->category[$catid]['type']!=0) return false;$this->modelid = $this->category[$catid]['modelid'];$this->db->set_model($this->modelid);$this->tablename = $this->db->table_name;if(empty($this->category)) {return false;} else {return true;}}public function lists() {/*接受参数*/$catid = $_GET['catid'] = intval($_GET['catid']);$show = $_GET['show'];$industry_type = $_GET['industry_type']= intval($_GET['industry_type']);$site_type = $_GET['site_type']= intval($_GET['site_type']);$page = $_GET['page']?$_GET['page']:1;......if($type==0) {....../*include template('content',$template);  引入模版时加入判断  */if($show=='ok'){if(!$this->set_modelid($catid)) return false;//初始化模型,获取表名等信息if($this->category[$catid]['child']) {$catids_str = $this->category[$catid]['arrchildid'];$pos = strpos($catids_str,',')+1;$catids_str = substr($catids_str, $pos);$sql = "status=99 AND catid IN ($catids_str)";} else {$sql = "status=99 AND catid='$catid'";}/*方便数据判断,参数字段添加时要设置为主表字段*/if($industry_type !==0){$sql .=" and industry_type=".$industry_type;}if($site_type !==0){$sql .=" and site_type=".$site_type;}$limitStart=5*($page-1);//开始条数//$this->db->select(条件,字段,$limit=‘开始条数,加载多少条’,排序方式,分组方式,返回数组按键名排序)$return = $this->db->select($sql, '*', $limit=$limitStart.',5', 'id', '', 'id');/*如果需要的话调用附表数据 start*/$ids = array();foreach ($return as $v) {if (isset($v['id']) && !empty($v['id'])) {$ids[] = $v['id'];} else {continue;}}if (!empty($ids)) {$this->db->table_name = $this->db->table_name.'_data';$ids = implode('\',\'', $ids);$sql = "`id` IN ('$ids') ";$r = $this->db->select($sql, '*', '', '', '', 'id');if (!empty($r)) {foreach ($r as $k=>$v) {if (isset($return[$k])) $return[$k] = array_merge($v, $return[$k]);}}}/*如果需要的话调用附表数据 end*/echo json_encode($return);//返回数据转换为json格式}else{include template('content',$template);}......}}?>
0 0
原创粉丝点击