手机端ajax点击无限加载数据

 jQuery/js   高蒙   阅读(3068)   评论(1)   2015-12-17 19:51:03    无限加载 手机端无限加载 ajax 


在工作中做手机端遇到一些点击加载的效果。本来我们想的处理方式是。在手机端用手上下的滑动,可以实现上下的加载数据。于是就在网上找了一个插件,iscroll.js。看了一些网上的教程,实际的操作中,遇到了一些问题,不能得到想要的效果。

于是,我就改变之前的思路,这里直接有点击加载的方式,展示无线加载数据,那么下面我们就来看看怎么写。

 

QQ图片20151217190149.png

 

第一:我们的模块模板内容都是放在一个页面之内,直接是用手去滑动然后显示数据的,那么我们在请求数据的时候,一定要加上特定的参数,这样才能返回我们想要的值。

处理,首先我们在前端html的时候,就要想到给特定的参数,在jQuery中获取到特定的参数,经过处理之后在提交后台,返回数据。

第二:根据上面的想法,我们就实际的操作一下。

    1)、我们设置 两个div。一个是记录当前的分页值,一个是点击事件。

     2)、我们将div(load_cp)设置一个data属性,记录分页的值。当我点击加载的时候,给div(load_cp)里面data属性值加1,page++;

     3)、在php页面的处理,我们直接用foreach遍历数据,直接组装成html字符串,然后返回到前台。通过append()直接追加到元素里面。

第三、说了半天,代码才是王道,下面就是相关的代码。

html代码:

<div class="load_cp" data="2"></div>

<div onclick="ajax_article('cp',3187)">加载更多</div>

jQuery代码:

function ajax_article(a,b){

var a;
 var b;
var act = '.load_'+a;
var page = $(act).attr('data');    $.ajax({
                type: "POST",
                url:'index.php?moduleid=21',
                data:{page:page,catid:b,act:'load'},
                dataType:'html',
                success: function(data) {
                if(data.length){
$(act).append(data);      // 追加到指定的div元素中去
         page++;
        $(act).attr('data',page);  // 这里重新的将分页数加1
          }else{
                $('.button_gengduo_jz').text('亲,没有更多内容了!');
                }
                }
            });
}

php代码:

$page = $_POST['page'];
$offset = ($page-1)*10;
$sql = "select * from table  limit {$offset},10 ";
$list = $db->getAll($sql);
$html = '';
foreach($list as $v){
  $html .= "
     <li><a href='index.php?itemid=".$v['id']."'>".$v['title']."</a></li>  ";
}
echo $html;exit; 

// 这里要特别的注意了。 如果在用到destoon等 面向过程式程序的时候,一定要结束。不然的话当ajax请求的话,返回值的时候会出现许多其他的代码。

以上就是手机ajax点击无限加载的代码,这里主要说了思路和部分核心的代码,其他扩展可根据上面的思路自行处理。




相关文章



我要评论


站长昵称:(*)

输入内容:


评论列表


高蒙

男,程序猿一枚

 

人生要是没有理想, 那跟一条咸鱼有什么分别。


关于我

  http://www.shuchengxian.com

高蒙个人博客是以PHP技术为主的程序员个人博客。博客主要发布php开发中遇到的问题以及解决办法,同时个人博客也分享网站模板素材,jquery插件等方面素材。


站点声明:相关侵权、举报、投诉及建议等,请发E-mail:936594075#qq.com(#替换成@)。

Copyright © 2018, www.shuchengxian.com, All rights reserved. 个人博客皖公网安备 34152302000022号 皖ICP备15015490号

关键词:个人博客,PHP博客,PHP博客程序,高蒙博客,高蒙个人博客,php程序员博客,程序员个人博客