本文共 12941 字，大约阅读时间需要 43 分钟。

改编自php版本，原文：

jQuery+PHP实现浏览更多内容

这里记录.net 下的实现

一、首先创建数据库表test，并插入一些测试数据：

goif exists (select * from sysobjects where name='test')drop table [test]goCREATE TABLE [test](	[id] [int] IDENTITY(1,1),	[author] [varchar](50),	[content] [varchar](2000),	[createOn] [datetime])declare @index int;set @index = 1;while(@index < 1000)begin    insert into test([author],[content],[createOn])     values     ('author' + cast(@index as varchar(4)),'content' + cast(@index as varchar(4)),DATEADD(DAY,@index,getdate()))    set @index = @index + 1endgo

二、建立一个html文件

                        
   
        
    
            
     
                
      
                
      
                
      
                
      
            
     
            
     
            
     
        
    
        
    ::点击加载更多内容::    
   

三、建立一个一般处理程序data.ashx

<%@ WebHandler Language="C#" Class="data" %>using System;using System.Web;using Microsoft.Practices.EnterpriseLibrary.Data;public class data : IHttpHandler {        public void ProcessRequest (HttpContext context) {        context.Response.ContentType = "text/plain";        int last = Convert.ToInt32(context.Request.Params["last"]); //开始记录数        int amount = Convert.ToInt32(context.Request.Params["amount"]); //单次显示记录数        Database db = DatabaseFactory.CreateDatabase();        这里日期字段createOn先格式一下，否则会生成类似这种格式/Date(1310292162507)/        string sql = string.Format("select id,author,content,convert(varchar(100), createOn, 120) createOn from ( select row_number() over (order by id) as rowNum,* from test) as t "              + " where rowNum>{0} and rowNum<={1}", last, last + amount);        System.Data.DataTable dt = db.ExecuteDataSet(System.Data.CommandType.Text,sql).Tables[0];        context.Response.Write(JSONHelper.DataTableToJSON(dt)); //输出json格式    }       public bool IsReusable {        get {            return false;        }    }}

四、效果：

附：jquery.more.js插件内容

(function( $ ){              var target = null;    var template = null;    var lock = false;    var variables = {        'last'      :    0            }     var settings = {        'amount'      :   '10',                  'address'     :   '',        'format'      :   'json',        'template'    :   '.single_item',        'trigger'     :   '.get_more',        'scroll'      :   'false',        'offset'      :   '100',        'spinner_code':   ''    }        var methods = {        init  :   function(options){            return this.each(function(){                              if(options){                    $.extend(settings, options);                }                template = $(this).children(settings.template).wrap('
   
').parent();                template.css('display','none')                $(this).append('
   
    '+settings.spinner_code+'
   
')                $(this).children(settings.template).remove()                   target = $(this);                if(settings.scroll == 'false'){                                        $(this).find(settings.trigger).bind('click.more',methods.get_data);                    $(this).more('get_data');                }                                else{                    if($(this).height() <= $(this).attr('scrollHeight')){                        target.more('get_data',settings.amount*2);                    }                    $(this).bind('scroll.more',methods.check_scroll);                }            })        },        check_scroll : function(){            if((target.scrollTop()+target.height()+parseInt(settings.offset)) >= target.attr('scrollHeight') && lock == false){                target.more('get_data');            }        },        debug :   function(){            var debug_string = '';            $.each(variables, function(k,v){                debug_string += k+' : '+v+'\n';            })            alert(debug_string);        },             remove        : function(){                        target.children(settings.trigger).unbind('.more');            target.unbind('.more')            target.children(settings.trigger).remove();        },        add_elements  : function(data){            //alert('adding elements')                        var root = target                //   alert(root.attr('id'))            var counter = 0;            if(data){                $(data).each(function(){                    counter++                    var t = template                                        $.each(this, function(key, value){                                                  if(t.find('.'+key)) t.find('.'+key).text(value);                    })                             //t.attr('id', 'more_element_'+ (variables.last++))                    if(settings.scroll == 'true'){                    //    root.append(t.html())                    root.children('.more_loader_spinner').before(t.html())                      }else{                    //    alert('...')                                                    root.children(settings.trigger).before(t.html())                      }                    root.children(settings.template+':last').attr('id', 'more_element_'+ ((variables.last++)+1))                                   })                                            }                        else  methods.remove()            target.children('.more_loader_spinner').css('display','none');            if(counter < settings.amount) methods.remove()                    },        get_data      : function(){              // alert('getting data')            var ile;            lock = true;            target.children(".more_loader_spinner").css('display','block');            $(settings.trigger).css('display','none');            if(typeof(arguments[0]) == 'number') ile=arguments[0];            else {                ile = settings.amount;                          }                        $.post(settings.address, {                last : variables.last,                 amount : ile                            }, function(data){                                $(settings.trigger).css('display','block')                methods.add_elements(data)                lock = false;            }, settings.format)                    }    };    $.fn.more = function(method){        if(methods[method])             return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));        else if(typeof method == 'object' || !method)             return methods.init.apply(this, arguments);        else $.error('Method ' + method +' does not exist!');    }    })(jQuery)

----------------------------------------------

2016.08.23 备注：

---------------------------------------------- 上面只能显示普通的文本字段，假设json数据源为：[{"ImgPath":"images/1.jpg"}]用<span class="ImgPath"></span>显示的结果为<span class="ImgPath">images/1.jpg</span>，怎么自动转化为<img src="images/1.jpg" />呢？经过一翻测试，终于找到解决方法，在jquery.more.js中增加一个参数imgFields数组，如果json数组源的列在这个数组出现，则自动加上img标签等。 1、修改jquery.more.js代码为：

(function ($) {            var target = null;            var template = null;            var lock = false;            var variables = {                'last': 0            }            var settings = {                'amount': '10',                'address': 'comments.php',                'format': 'json',                'template': '.single_item',                'trigger': '.get_more',                'scroll': 'false',                'offset': '100',                'spinner_code': '',                'imgFields': []//图片路径字段设为            }            var methods = {                init: function (options) {                    return this.each(function () {                        if (options) {                            $.extend(settings, options);                        }                        template = $(this).children(settings.template).wrap('
    
').parent();                        template.css('display', 'none')                        $(this).append('
    
     ' + settings.spinner_code + '
    
')                        $(this).children(settings.template).remove()                        target = $(this);                        if (settings.scroll == 'false') {                            $(this).find(settings.trigger).bind('click.more', methods.get_data);                            $(this).more('get_data');                        }                        else {                            if ($(this).height() <= $(this).attr('scrollHeight')) {                                target.more('get_data', settings.amount * 2);                            }                            $(this).bind('scroll.more', methods.check_scroll);                        }                    })                },                check_scroll: function () {                    if ((target.scrollTop() + target.height() + parseInt(settings.offset)) >= target.attr('scrollHeight') && lock == false) {                        target.more('get_data');                    }                },                debug: function () {                    var debug_string = '';                    $.each(variables, function (k, v) {                        debug_string += k + ' : ' + v + '\n';                    })                    alert(debug_string);                },                remove: function () {                    target.children(settings.trigger).unbind('.more');                    target.unbind('.more')                    target.children(settings.trigger).remove();                },                add_elements: function (data) {                    //alert('adding elements')                    var root = target                    //   alert(root.attr('id'))                    var counter = 0;                    var containImgFields = false;//是否包含图片字段                    if (data) {                        $(data).each(function () {                            counter++                            var t = template                            $.each(this, function (key, value) {                                if (t.find('.' + key)) {                                    for (var i = 0; i < settings.imgFields.length; i++) {                                        if (key == settings.imgFields[i]) {                                            containImgFields = true;                                            continue;                                        }                                    }                                    if (containImgFields){                                        t.find('.' + key).html("");                                        containImgFields = false;                                    }else{                                        t.find('.' + key).html(value);                                    }                                                                   }                                                                })                            //t.attr('id', 'more_element_'+ (variables.last++))                            if (settings.scroll == 'true') {                                //    root.append(t.html())                                root.children('.more_loader_spinner').before(t.html())                            } else {                                //    alert('...')                                root.children(settings.trigger).before(t.html())                            }                            root.children(settings.template + ':last').attr('id', 'more_element_' + ((variables.last++) + 1))                        })                    }                    else methods.remove()                    target.children('.more_loader_spinner').css('display', 'none');                    if (counter < settings.amount) methods.remove()                },                get_data: function () {                    // alert('getting data')                    var ile;                    lock = true;                    target.children(".more_loader_spinner").css('display', 'block');                    $(settings.trigger).css('display', 'none');                    if (typeof (arguments[0]) == 'number') ile = arguments[0];                    else {                        ile = settings.amount;                    }                    $.post(settings.address, {                        last: variables.last,                        amount: ile                    }, function (data) {                        $(settings.trigger).css('display', 'block')                        methods.add_elements(data)                        lock = false;                    }, settings.format)                }            };            $.fn.more = function (method) {                if (methods[method])                    return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));                else if (typeof method == 'object' || !method)                    return methods.init.apply(this, arguments);                else $.error('Method ' + method + ' does not exist!');            }        })(jQuery)

2、使用

$(function () {        $('#more').more({ 'address': 'GetDataList', 'imgFields': ['ImgPath'] });  });

转载地址：http://flzrf.baihongyu.com/