首页 » 前端技术 » 手机端ajax点击无限加载数据

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

高蒙 2015/12/17 19:51 3.5k浏览 0评论 jQuery/js


在工作中做手机端遇到一些点击加载的效果。本来我们想的处理方式是。在手机端用手上下的滑动,可以实现上下的加载数据。于是就在网上找了一个插件,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点击无限加载的代码,这里主要说了思路和部分核心的代码,其他扩展可根据上面的思路自行处理。




相关文章

我有话说

站长昵称:(*)

输入内容:

选个头像:

评论列表

    ...

    高蒙

    男, PHP程序猿

    文章

    487

    标签

    42

    热度

    10w+

    南京, 江苏, 中国

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