一、点击加载更多有点像分页获取数据类似，下面是本人写的一个简单的小例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="viewport" content="width=device-width" />

    <meta name="viewport" content="initial-scale=1.0,user-scalable=no" />

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link href="~/Content/Phone/css/list_css.css" rel="stylesheet" />

    <title>新闻列表</title>

</head>

<body>

    <div id="list-new">

    </div>

    <!--加载更多按钮-->

    <div class="js-load-more">加载更多</div>

<script src="~/Content/Phone/js/zepto.min.js"></script>

<script>

$(function(){

    /*初始化*/

    var counter = ; /*计数器*/

    var pageStart = ; /*offset*/

    var pageSize = ; /*size*/

    /*首次加载*/

    getData(pageStart, pageSize);

    /*监听加载更多*/

    $(document).on('click', '.js-load-more', function () {

        pageStart++

        getData(pageStart, pageSize);

    });

    function getData(offset,size){

        $.ajax({

            type: 'GET',

            url: '/PhoneManage/Notice/listJson?pageSize=' + size + '&pageIndex=' + offset, //这里offset,size无作用，仅方便调试

            dataType: 'json',

            success: function(reponse){

                var data = reponse;

                var sum = reponse.length;

                var result = '';

                /************业务逻辑块：实现拼接html内容并append到页面*****************/

                //console.log(offset , size, sum);

                for (var i = (offset -) * size; i < sum; i++) {

                    result += '<a href="/PhoneManage/Notice/text?id=' + data[i].F_Id + '"><div class="list"><div class="text"><h3>' + data[i].F_Title + '</h3><p>'

                            + data[i].F_CreatorTime + '</p></div><div class="back"><img src="/Content/Phone/images/back1.png" width="32" /></div></div></a>';

                }

                $('#list-new').append(result);

                /*******************************************/

                /*隐藏more*/

                if ((offset * size) > sum) {

                    $(".js-load-more").hide();

                }else{

                    $(".js-load-more").show();

                }

            },

            error: function(xhr, type){

                alert('Ajax error!');

            }

        });

    }

});

</script>

</body>

</html>

二、点击加载更多，需要注意是在原来数据的基础上加载出来新的数据，所以拼接html是关键

Jquery点击加载更多的更多相关文章

  1. jquery 点击加载更多

    html部分 <ul class="bill moreadd"> <div class="total"><span>-< ...

  2. jQuery+php+Ajax文章列表点击加载更多功能

    jQuery+php+Ajax实现的一个简单实用的文章列表点击加载更多功能,点击加载更多按钮,文章列表加载更多数据,加载中有loading动画效果. js部分: <script type=&qu ...

  3. PHP+Ajax点击加载更多列表数据实例

    一款简单实用的PHP+Ajax点击加载更多列表数据实例,实现原理:通过“更多”按钮向服务端发送Ajax请求,PHP根据分页参数查询将最新的几条记录,数据以JSON形式返回,前台Query解析JSON数 ...

  4. PHP+Ajax点击加载更多内容 －这个效果好，速度快，只能点击更多加载，不能滚动自动加载

    这个效果好,速度快,只能点击更多加载,不能滚动自动加载 一.HTML部分 <div id="more"> <div class="single_item ...

  5. JS实现点击加载更多效果

    适用场景:后端直接把所有的文章都给你调出来了,但是领导又让做点击加载更多效果...(宝宝心里苦啊)   点击加载更多效果:         第一个和第二个参数分别是btn和ul的DOM(必填)     ...

  6. 基于jQuery点击加载动画按钮特效

    分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  7. tableView中的“点击加载更多”点击不到

    假设当前的tableView是_tableView,则可以这样设置 _tableView.contentInset = UIEdgeInsetsMake(0, 0, 100, 0); 该属性用于设置当 ...

  8. android ListView的上部下拉刷新下部点击加载更多具体实现及拓展

    android ListView的上部下拉刷新下部点击加载更多具体实现及拓展 ListView下拉刷新,上拉自动加载更多 下拉刷新以及加载更多

  9. ajax点击加载更多数据图片（预加载）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. 14.data.js

    dict_data = { "_id":1, name:"王五", age:55, gender:true } db.stu.insert(dict_data) ...

  2. iOS开发系列-NSURLConnection

    概述 NSURLConnection是负责发送请求,建立客户端与服务端的连接.发送数据给服务器,并收集来自服务器的响应数据.其中NSURLRequest类是用来封装一个请求,包含NSURL对象.请求方 ...

  3. 基于Java Properties类设置本地配置文件

    一.Java Properties类介绍 Java中有个比较重要的类Properties(Java.util.Properties),主要用于读取Java的配置文件,各种语言都有自己所支持的配置文件, ...

  4. 使用github作为远程仓库的常见git操作

    [git上传本地代码到github新建仓库]一.建立git本地仓库 1.在本地目标文件夹(Code)中执行命令: git init //初始化本地仓库二.将上传到github的项目文件添加到本地仓库中 ...

  5. Python全栈开发：运算符

    1.算数运算: 2.比较运算: 3.赋值运算: 4.逻辑运算: 5.成员运算:

  6. leetcode 132 Palindrome Pairs 2

    lc132 Palindrome Pairs 2 大致与lc131相同,这里要求的是最小分割方案 同样可以分割成子问题 dp[i][j]还是表示s(i~j)是否为palindrome res[i]则用 ...

  7. UICollectionView入门--使用系统UICollectionViewFlowLayout布局类

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://rainbownight.blog.51cto.com/1336585/13237 ...

  8. java基础温习 -- Thread

    启动线程两种方式: 1. 实现Runnable接口: 2. 继承Thread类. 选用:能使用接口,就不用从Thread类继承.    使用继承的方法不够灵活,从这个类继承了就不能从其他类继承: 实现 ...

  9. mysql之sql优化

    sql的执行顺序: 先看下下面两条多表关联sql,第1条查询到1条记录,第2条查无记录: on 筛选条件在笛卡尔积之前,where筛选条件在笛卡尔积之后执行 先执行from, join的话,左连接,左 ...

  10. spring boot 中 rabbit mq基础例子

    1.先安装ELANG,再按照RabbitMQ 2.打开RabbitMQ控制台:rabbit command prompt 1.设置elang的路径:set ERLANG_HOME=D:\work_pr ...