无刷新分页

最新推荐文章于 2022-04-13 21:47:06 发布
最新推荐文章于 2022-04-13 21:47:06 发布
阅读量1k 收藏
点赞数
分类专栏： ASP.NET 文章标签： xmlhttprequest function url string null class
无刷新，利用客户端的XMLHttpRequest对象发起请求到服务器，服务器响应后发回数据再由客户端进行接收，由于XMLHttpRequest对象发起的请求与响应是异步方式，而不是产生中断，因而其数据处理过程能在页面中呈现出无刷新的效果。
进一步了解XMLHttpRequest对象，包括如下属性：
onreadystatechange：每次状态改变所触发事件的事件处理程序。
responseText：从服务器进程返回数据的字符串形式。
responseXML：从服务器进程返回的DOM兼容的文档数据对象。
status：从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）
status Text：伴随状态码的字符串信息。
readyState：状态值0、未初始化，对象已建立，但是尚未初始化（尚未调用open方法）
1、初始化，对象已建立，尚未调用send方法
2、发送数据，send方法已调用，但是当前的状态及http头未知
3、数据传送中，已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误
4、完成，数据接收完毕，此时可以通过通过responseXml和responseText获取完整的响应数据

先看一个简单的URL请求：

//创建XMLHttpRequest，不同浏览器调用的创建方法不一样
function XmlHttpRequest(){
    var requestObj = null;
    if(window.XMLHttpRequest){
        requestObj = new XMLHttpRequest();
    }else{
        try{
            requestObj = new ActiveXObject('MSXML2.XMLHTTP.4.0');
        }catch(e){
            try{
                requestObj = new ActiveXObject('MSXML2.XMLHTTP.3.0');
            }catch(e){
                try{
                    requestObj = new ActiveXObject('MSXML2.XMLHTTP.2.6');
                }catch(e){
                    try{
                        requestObj = new ActiveXObject('MSXML2.XMLHTTP');
                    }catch(e){
                        try{
                            requestObj = new ActiveXObject('Microsoft.XMLHTTP');
                        }catch(e){}
                    }
                }
            }
        }
    }

    if(requestObj == null){
        alert('The browser does not surport XMLHTTP.');
    }

    return requestObj;
}

//发起POST请求并接收响应数据
function GetData(){
    var xmlhttp = XmlHttpRequest();
    if(!xmlhttp){
        alert('创建xmlhttp对象异常！');
        return;
    }

    var url = 'AjaxHandler/ProcPager.aspx';
    xmlhttp.open('POST', url, false);
    xmlhttp.onreadystatechange = function(){  
        if(xmlhttp.readyState == 4){
            document.getElementById('divPager').innerHTML = '数据加载中，请稍候...';
            if(xmlhttp.status == 200){
                document.getElementById('divPager').innerHTML = xmlhttp.responseText;
            }
        }
    }

    xmlhttp.send();
}

看看C#的分页，C#中用于分页的承载控件有很多，DataList、GridView、Repeater等。DataList、GridView天然支持分页，Repeater只能承载数据，没有分页功能，但利用PagedDataSource对象可让其实现分页功能。
对于分页方式，可以通过Sql每次读取指定条数的记录，或者读取出所有记录，在内存中进行分页，下面是两种分页方式的实现：  

//分页存储过程
CREATE PROCEDURE [dbo].[PROC_PAGER] 
    @TABLE_NAME  VARCHAR(2048),    --表名或视图表 
    @COLUMNS VARCHAR(1024),    --欲选择字段列表
    @WHERE VARCHAR(2000),    --查询条件
    @ORDER_BY VARCHAR(1000),    --排序表达式
    @PAGE_INDEX INT,        --页号,从1开始
    @PAGE_SIZE INT,        --页尺寸
    @RECORD_COUNT INT OUTPUT
AS 
BEGIN
    IF @COLUMNS IS NULL OR LTRIM(RTRIM(@COLUMNS)) = ''
    BEGIN
        SET @COLUMNS = '*'
    END
    
    DECLARE @SQL_RECORD NVARCHAR(2000)
    SET @SQL_RECORD = 'SELECT @RECORD_COUNT = COUNT(0) FROM [' + @TABLE_NAME + '] WHERE 1 = 1 ' + @WHERE
    EXEC SP_EXECUTESQL @SQL_RECORD, N'@RECORD_COUNT INT OUTPUT', @RECORD_COUNT OUTPUT

    SET @ORDER_BY = ' ORDER BY ' + @ORDER_BY
    IF @PAGE_INDEX < 1
    BEGIN
        SET @PAGE_INDEX = 1
    END

    IF @PAGE_SIZE < 1
    BEGIN
        SET @PAGE_SIZE = 10
    END

    DECLARE @SQL_TEXT VARCHAR(MAX)
    SET @SQL_TEXT = 'SELECT ' + @COLUMNS +', ROWNUMBER 
    FROM (
        SELECT ' + @COLUMNS + ', ROW_NUMBER() OVER(' + @ORDER_BY + ') AS ROWNUMBER 
        FROM [' + @TABLE_NAME + '] 
        WHERE 1 = 1 ' + @WHERE + '
    ) AS T 
    WHERE ROWNUMBER BETWEEN ' + STR(((@PAGE_INDEX - 1)* @PAGE_SIZE+1)) + ' AND ' + STR(@PAGE_INDEX * @PAGE_SIZE)

    SET NOCOUNT ON
    EXECUTE(@SQL_TEXT)
    SET NOCOUNT OFF
 
    RETURN @@RowCount
END

/// <summary>
/// DataTable分页
/// </summary>
public static DataTable DataTablePager(DataTable dt, int pageSize, int currentPage)
{
    DataTable dtRet = dt.Clone();
    int records = dt.Rows.Count;
    int start = pageSize * (currentPage - 1);
    int end = pageSize * currentPage;
    if (end > records)
    {
    end = records;
    }

    DataRowCollection drc = dt.Rows;
    for (int i = start; i < end; i++)
    {
    dtRet.ImportRow(drc[i]);
    }

    return dtRet;
}

了解原理后，可以就分页功能进行实施，思路如下：
1、Web页中定义分页数据的承载区域，用于显示分页输出。
2、建立专用ASPX页，只输出分页内容及导航。
3、建立JS分页对象，用于发起Ajax请求（请求地址为专用的分页ASPX页面），将获取到的内容加载到承载区域进行呈现。

看看具体的实现，为Repeater实现分页功能，我们自己实现一个分页的自定义控件，主要功能就是根据总页数、当前页、每页大小计算出分页导航并输出，同时将PagedDataSource与页面中的Repeater进行绑定，再利用Ajax进行无刷新分页，原理简单，计算稍微麻烦，不多做解释，自己看代码：  

/// <summary>
/// Repeater分页控件
/// </summary>
[ToolboxData("<{0}:FMPager runat=\"server\" />")]
public class FMPager : WebControl, INamingContainer
{
    protected static readonly string navigateClassFmt = "<div class=\"pageClass\">{0}</div>";
    protected static readonly string navigatePageTotalFmt = "<div class=\"pagetotal\">总记录：<strong>{0}</strong>   页码：<span>{1}</span>/{2}</div>";
    protected static readonly string navigateAjaxlinkFmt = "<li><a href=\"javascript:;\" οnclick=\"{0}('{1}');\" class=\"{3}\">{2}</a></li>";
    protected static readonly string navigateDisableLinkFmt = "<li><a href=\"#\">{0}</a></li>";
    protected static readonly string navigateGotoFmt = "<div class=\"fr\">转到第 <input type=\"text\" style=\"width: 40px;\" value=\"{1}\" οnblur=\"{0}(this.value);\"> 页</div>";
    private PagedDataSource pagedDataSource = null;

    public FMPager()
    {
        pagedDataSource = new PagedDataSource();
    }

    public override void DataBind()
    {
        base.DataBind();
        if (string.IsNullOrEmpty(repeaterId))
        {
            return;
        }

        Control repeater = FindRepeater(Page);
        if (repeater == null || !(repeater is Repeater))
        {
            return;
        }

        ChildControlsCreated = false;

        Repeater finalRepeater = repeater as Repeater;
        pagedDataSource.CurrentPageIndex = currentPageIndex;
        pagedDataSource.PageSize = pageSize;
        pagedDataSource.VirtualCount = recordCount;
        pagedDataSource.DataSource = DataSource;
        finalRepeater.DataSource = pagedDataSource;
        finalRepeater.DataBind();
    }

    /// <summary>
    /// 把数据内容传递到客户端
    /// </summary>
    protected override void Render(HtmlTextWriter output)
    {
        if (Site != null && Site.DesignMode)
        {
            CreateChildControls();
        }

        output.Write(OutputNavigate());
        base.Render(output);
    }

    /// <summary>
    /// 输出导航
    /// </summary>
    protected virtual string OutputNavigate()
    {
        //总页码数
        int pageCount = recordCount / pageSize;
        if (recordCount % pageSize != 0)
        {
            pageCount += 1;
        }

        if (currentPageIndex > pageCount)
        {
            currentPageIndex = pageCount;
        }

        StringBuilder sbNavigate = new StringBuilder();

        //输出跳转到
        sbNavigate.AppendFormat(navigateGotoFmt, pagerJs, currentPageIndex);

        //获取第一页、上一页
        sbNavigate.Append("<ul>");
        if (currentPageIndex > 1 && pageCount > 1)
        {
            sbNavigate.AppendFormat(navigateAjaxlinkFmt, pagerJs, 1, "第一页", "");
            sbNavigate.AppendFormat(navigateAjaxlinkFmt, pagerJs, currentPageIndex - 1, "上一页", "");
        }
        else
        {
            sbNavigate.Append(string.Format(navigateDisableLinkFmt, "第一页"));
            sbNavigate.Append(string.Format(navigateDisableLinkFmt, "上一页"));
        }

        //获取数字页
        int navigateCount = 10;   //每10页进行导航
        int navigateTotal = pageCount / navigateCount;  //总计能生成多少个数字导航
        int pageInNavigate = ((currentPageIndex - 1) / navigateCount) + 1; //当前在第几个数字导航中

        //计算数字导航开始页序及结束页序
        int startIndex = (pageInNavigate - 1) * navigateCount + 1;     //数字导航开始页序
        int endIndex = startIndex + navigateCount - 1;   //数字导航结束页序
        if (endIndex > pageCount)
        {
            endIndex = pageCount;
        }

        string currentPageClass = "";
        for (int i = startIndex; i <= endIndex; i++)
        {
            currentPageClass = "";
            if (i == currentPageIndex)
            {
                currentPageClass = "pageactive";
            }

            sbNavigate.AppendFormat(navigateAjaxlinkFmt, pagerJs, i, i, currentPageClass);
        }

        //获取下一页、最后页
        if (currentPageIndex != pageCount && pageCount > 1)
        {
            sbNavigate.AppendFormat(navigateAjaxlinkFmt, pagerJs, currentPageIndex + 1, "下一页", "");
            sbNavigate.AppendFormat(navigateAjaxlinkFmt, pagerJs, pageCount, "最后页", "");
        }
        else
        {
            sbNavigate.AppendFormat(navigateDisableLinkFmt, "下一页");
            sbNavigate.AppendFormat(navigateDisableLinkFmt, "最后页");
        }

        sbNavigate.Append("</ul>");

        //输出总页数、当前页
        sbNavigate.AppendFormat(navigatePageTotalFmt, recordCount, currentPageIndex, pageCount);

        return string.Format(navigateClassFmt, sbNavigate.ToString());
    }

    /// <summary>
    /// 查找输出Repeater
    /// </summary>
    private Control FindRepeater(Control ctrl)
    {
        Control retCtrl = ctrl.FindControl(repeaterId);
        if (retCtrl != null)
        {
            return retCtrl;
        }

        foreach (Control childCtrl in Page.Controls)
        {
            retCtrl = childCtrl.FindControl(repeaterId);
            if (retCtrl != null)
            {
                return retCtrl;
            }

            FindRepeater(retCtrl);
        }

        return null;
    }

    /// <summary>
    /// 绑定数据源
    /// </summary>
    public IEnumerable DataSource
    {
        get;
        set;
    }

    [Description("当前页")]
    public int CurrentPageIndex
    {
        get
        {
            currentPageIndex = HTMLHelper.QueryStringInt("p");
            if (currentPageIndex <= 0)
            {
                currentPageIndex = 1;
            }

            return currentPageIndex;
        }
        set
        {
            currentPageIndex = value;
        }
    }
    private int currentPageIndex = 0;

    [Description("分页控件ID")]
    public string RepeaterId
    {
        get
        {
            return repeaterId;
        }
        set
        {
            repeaterId = value;
        }
    }
    private string repeaterId = "";

    [Description("每页显示记录数")]
    public int PageSize
    {
        get
        {
            return pageSize;
        }
        set
        {
            pageSize = value;
        }
    }
    private int pageSize = 20;

    [Description("总记录数")]
    public int RecordCount
    {
        get
        {
            return recordCount;
        }
        set
        {
            recordCount = value;
        }
    }
    private int recordCount = 0;

    [Description("JS分页函数")]
    public string PagerJs
    {
        get
        {
            return pagerJs;
        }
        set
        {
            pagerJs = value;
        }
    }
    private string pagerJs = "pagerObj.Page";
}

定义一个输出控件，继承自FMPager，用于输出具体的分页的内容： 

/// <summary>
/// 存储过程分页
/// </summary>
public class ProcPager : FMPager
{
    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);
        FM.Business.ProcPager inf = new Business.ProcPager();
        int recordCount = 0;
        DataSet ds = inf.GetProcList("TEST", "ID, NAME, VAL", "", "ID", this.CurrentPageIndex, this.PageSize, ref recordCount);
        this.RecordCount = recordCount;
        this.DataSource = ds.Tables[0].DefaultView;
        base.DataBind();
    }
}

在专用ASPX页中调用，全部内容如下，没有HTML开始结束标识，只有输出内容： 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ProcPager.aspx.cs" Inherits="AjaxHandler_ProcPager" %>
<asp:Repeater ID="rpList" runat="server">
    <HeaderTemplate>
        <table class="tb1" cellspacing="2">
            <tr class="tr_bg">
                <td style="width: 80%;">名称</td>
                <td>值</td>
            </tr>
    </HeaderTemplate>
    <ItemTemplate>
        <tr class="tr_bg2">
            <td><%# Eval("NAME") %></td>
            <td><%# Eval("VAL") %></td>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>
<ctrl:ProcPager ID="pagerTest" RepeaterId="rpList" PageSize="2" runat="server" />

最后是JS分页函数： 

/*
JS分页对象
参数：
containerId：载体的容器ID
url：分页数据地址
callbackFn：分页数据加载完成后的回调函数
*/
function PagerObj(containerId, url, callbackFn){
    var obj = new Object;
    obj.Page = page;

    function page(currentIndex){
        var finalUrl = url;
        if(finalUrl.indexOf('?') == -1){
            finalUrl += '?';
        }
        
        finalUrl += '&p=' + currentIndex;
        finalUrl += '&clearBuffer=' + RandomKey();  //消除浏览器缓存
        var xmlhttp = XmlHttpRequest();
        if(!xmlhttp){
            alert('创建xmlhttp对象异常！');
            return;
        }

        xmlhttp.open('POST', finalUrl, false);
        xmlhttp.onreadystatechange = function(){  
            if(xmlhttp.readyState == 4){
                document.getElementById(containerId).innerHTML = '数据加载中，请稍候...';
                if(xmlhttp.status == 200){
                    document.getElementById(containerId).innerHTML = xmlhttp.responseText;
                    if(callbackFn != null){
                        callbackFn();
                    }
                }
            }
        }

        xmlhttp.send();
    }

    return obj;
}

Web页面的输出： 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>
<!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 runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="divPager" style="float: left; width: 100%;">分页数据的承载区域</div>
</form>
<script type="text/javascript">
var pagerObj = null;

window.onload = function(){
    LoadInfo();
}

function LoadInfo(){
    var url = 'AjaxHandler/ProcPager.aspx';
    pagerObj = new PagerObj('divPager', url, LoadInfoCallback);
    pagerObj.Page(1);
}

function LoadInfoCallback(){
//    alert('测试用回调函数');
}

//创建XMLHttpRequest，不同浏览器调用的创建方法不一样
function XmlHttpRequest(){
    var requestObj = null;
    if(window.XMLHttpRequest){
        requestObj = new XMLHttpRequest();
    }else{
        try{
            requestObj = new ActiveXObject('MSXML2.XMLHTTP.4.0');
        }catch(e){
            try{
                requestObj = new ActiveXObject('MSXML2.XMLHTTP.3.0');
            }catch(e){
                try{
                    requestObj = new ActiveXObject('MSXML2.XMLHTTP.2.6');
                }catch(e){
                    try{
                        requestObj = new ActiveXObject('MSXML2.XMLHTTP');
                    }catch(e){
                        try{
                            requestObj = new ActiveXObject('Microsoft.XMLHTTP');
                        }catch(e){}
                    }
                }
            }
        }
    }

    if(requestObj == null){
        alert('The browser does not surport XMLHTTP.');
    }

    return requestObj;
}

function PagerObj(containerId, url, callbackFn){
    var obj = new Object;
    obj.Page = page;

    function page(currentIndex){
        var finalUrl = url;
        if(finalUrl.indexOf('?') == -1){
            finalUrl += '?';
        }
        
        finalUrl += '&p=' + currentIndex;
        finalUrl += '&clearBuffer=' + RandomKey();  //消除浏览器缓存
        var xmlhttp = XmlHttpRequest();
        if(!xmlhttp){
            alert('创建xmlhttp对象异常！');
            return;
        }

        xmlhttp.open('POST', finalUrl, false);
        xmlhttp.onreadystatechange = function(){  
            if(xmlhttp.readyState == 4){
                document.getElementById(containerId).innerHTML = '数据加载中，请稍候...';
                if(xmlhttp.status == 200){
                    document.getElementById(containerId).innerHTML = xmlhttp.responseText;
                    if(callbackFn != null){
                        callbackFn();
                    }
                }
            }
        }

        xmlhttp.send();
    }

    return obj;
}

//生成随机数，用于消除页面缓存
function RandomKey(){
    var hex = new Array('0','1','2','3','4','5','6','7','8', '9','a','b','c','d','e','f');
    var t = '';
    for(var i = 0; i<32; i++){
        t += hex[Math.floor(Math.random() * 16)];
    }

    return t.toUpperCase();
}
</script>
</body>
</html>

整个功能实施完毕，最后推荐使用jQuery，它封装了Ajax相关方法，我们不再需要自己实现XmlHttpRequest对象，只需利用jQuery进行异步请求即可，下面是利用jQuery实现的JS分页对象： 

function PagerObj(op){
    var obj = new Object;
    obj.Page = page;

    var settings = $.extend({
        containerId: 'divPager',    //容器编号
        url: '', //分页请求URL地址
        extendParams: '', //URL地址扩展参数
        callbackFn: null  //加载完毕后的回调函数
    }, op);

    function page(currentIndex){
        var finalUrl = settings.url;
        if(finalUrl.indexOf('?') == -1){
            finalUrl += '?';
        }
        
        finalUrl += '&p=' + currentIndex;
        finalUrl += '&clearBuffer=' + RandomKey();  //消除浏览器缓存
        $.ajax({
            type: "POST",
            url: finalUrl,
            data: settings.extendParams,
            success: function(html){ 
                pageCallback(html);
            } 
        }); 
    }

    function pageCallback(html){
        $('#' + settings.containerId).html(html);
        if(settings.callbackFn != null){
            settings.callbackFn();
        }
    }

    return obj;
}

调用方法： 

function LoadInfo(){
    var url = 'AjaxHandler/ProcPager.aspx';
    pagerObj = new PagerObj({
        url: url,
        callbackFn: LoadInfoCallback
    });
    pagerObj.Page(1);
}

顺带一提，利用上面的JS分页对象可以实现同一页中的多个分页列表： 

var pagerObj = null;
var pagerTestObj = null;

$(function(){
    LoadInfo();
    LoadTestInfo();
})

function LoadInfo(){
    var url = 'AjaxHandler/ProcPager.aspx';
    pagerObj = new PagerObj({
        url: url
    });
    pagerObj.Page(1);
}

function LoadTestInfo(){
    var url = 'AjaxHandler/TestPager.aspx';
    pagerTestObj = new PagerObj({
        containerId: 'divTestPager',
        url: url
    });
    pagerTestObj.Page(1);
}

最终效果：


zhanzkw
关注
专栏目录
Java Ajax 无刷新分页实例（完整版）
05-10
使用ajax 实现无刷新分页，指定页码跳转等……内置sql！适合练习参考……
jquery 动态查询，无刷新分页
xLiGan的专栏
11-17 2575
写好长没保存，还要重新写了。。。。。。。。。。首先要从service层得到一个基础对象(包含一个List属性和其他所需属性)，然后把基础对象包装成jsonObject代码如下：JSONObject jsonObject=new  JSONObject(reportBase,false);reportBase就是这个基础对象引用，然后转换成字符串发送到客户端   return toCli
PHP中的AJAX无刷新分页
长江某菜鸟的博客
02-07 1887
test.html dfsdfsf function cgpage(obj){ var goal=$(obj).attr('href'); sendurl(goal); } function sendurl(url) { console.log(url); $.ajax({ url:url, dataType:'json'
java ajax无刷分页_ajax无刷新分页的简单实现
weixin_35753291的博客
02-28 159
这篇文章主要为大家详细介绍了ajax无刷新分页的简单实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下本文实例为大家分享了ajax无刷新分页的具体代码，供大家参考，具体内容如下html页table{ border:solid 1px #444; background-color:Aqua;}table td{border:solid 1px #444;}$(function () {var...
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
10-15
在本文中，我们将深入探讨如何使用ThinkPHP5.1框架和Ajax技术来实现无刷新分页功能，这是一种优化用户体验的有效方法，可以显著提升网站性能。首先，我们要理解无刷新分页的基本原理，它通过在不重新加载整个页面的...
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
10-19
无刷新分页是一种提升用户体验的方法，它允许用户在不重新加载整个页面的情况下浏览多页内容，从而减少等待时间，提高互动性。 首先，理解无刷新分页的基本原理。这种技术的核心是Ajax（Asynchronous JavaScript ...
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
12-18
本文讲解内容为： Ajax 实现无刷新分页、实现原理、代码展示、代码下载。 这里需要说明一些知识： 1、Ajax 无刷新页面的好处：提供良好的客户体验，通过 Ajax 在后台从数据库中取得数据并展示，取缔了等待加载页面而...
tp3.2+ajax无刷新分页
11-18
"tp3.2+ajax无刷新分页" 指的是使用ThinkPHP 3.2框架结合Ajax技术实现的无刷新分页功能。ThinkPHP 3.2是一个广泛使用的PHP开发框架，它提供了丰富的MVC（Model-View-Controller）架构支持，便于开发者构建Web应用。...
AjaxPro展示一下无刷新分页的原理
12-09
我的网址：www.0379zd.com欢迎光临。代码很简单，只是展示一下基本原理。 数据库更简单，表ttest id (int,自增) 单位编号(varchar(20)) 3 00101 4 00103 5 00105 6 00106
“舔狗日记” 小程序附
03-18
作者留言：忘了是从哪个大佬的源码里找的接口了，一共有三个接口 https://api.ixiaowai.cn/tgrj/index.php https://v1.alapi.cn/api/dog?format=text 我只用了前两个，因为最后一个请求的数据自动带日期，我懒得去日期就直接不用它了 然后请求的是随机的一个接口小程序有域名要求，我也不会整后台，所以就用了小程序 自带的云开发整的接口整体思路就是用canvas，把接口返回是文字和本地的图片生成 一个新图片新图片可以保存到本地（保存本地需要小程序的文件保存权限）当表情用， 也可以直接复制文字云函数的接口文件和小程序源码都在打包文件里了。 ps：源码是用的原生的小程序写的，本来是打算用uni-app搞的，但是那个搞云开发 还得整实名认证啥的，懒得弄索性就直接用原生了大致是这个样子的
Ajax无刷新分页偷懒版（该例子写于YII框架下，其他框架请自行修改部分代码）
忆浅曦
03-30 1827
首先，我们来说一下，什么样的操作才叫无刷新，就是页面小部分需要修改的内容被替换，整体页面框架不动的一种操作。那么，我们已经知道了只有部分页面内容会被替换，与其在一个页面里死磕代码，不如把这个页面拆成两个部分页面，一部分用来显示页面不刷新的内容，一部分用来显示页面需要刷新的内容，两个页面拼凑起来就达到我们的效果了。既然这样的话，还做什么无刷新分页，直接把普通的分页提出来自成一个页面，然后让它自己刷去，
页面无刷新分页
zh666jing的专栏
04-06 421
分页：页面无刷新源代码(由下面三部分组成) 一、前台代码                     $(function () {             $('#txtpagesize').val('5');             var pageindex = 0;             //获取总页数             function GetCoun
jQueryUI Repeater 无刷新获取分页数据 - JQueryElement [6]
weixin_33804582的博客
08-25 105
这回带来的是 jquery ui 的 Repeater, 在 JQueryElement 最新发布的 3.1 版本中, 对 Repeater 进行了增强, 除了获取数据还实现了更新删除和新建行的功能. 因为篇幅和时间的关系, 本次先介绍一个无刷新获取分页数据的例子. 在例子中, 页面通过 ajax 调用 WebService 方法 Fill 获取分页后的学生数据并绑定. 本次的例子只有一个页面...
jQuery ajax(无刷新分页)
m0_62033415的博客
04-13 864
目录 1,ajax(无刷新分页) 2,导入jar包&js库 3,方法&实体类 1,ajax(无刷新分页) 获取数据库中大量的信息显示在页面上，必然要使用到分页查询；若不使用Ajax，而是用其他的方法，肯定是要刷新页面的，用户体检很不好，所以最好使用Ajax的方法写分页查询； 2,导入jar包&js库 3,方法&实体类 public class Goods { private int gid; // 商品编号 private Strin...
javascript项目实战---ajax实现无刷新分页
weixin_30707875的博客
10-13 330
分页： limit 偏移量，长度; limit 0,7; 第一页 limit 7,7; 第二页 limit 14,7; 第三页 每页信息条数：7 信息总条数：select count(*) from table 信息总页数：ceil向上取整(总条数/每页条数) 分页类具体使用 <?php class ...
ajax无刷新加载原理
xuxuechao6的博客
11-11 4218
ajax （ajax开发） AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。 AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实
基于ajax的异步分页技术实现
荒漠老翁
07-06 2184
1、Ajax 无刷新页面的好处：提供良好的客户体验，通过 Ajax 在后台从数据库中取得数据并展示，取缔了等待加载页面而出现的空白状态； 2、那么，Ajax 无刷新页面是运行在动态页面（.PHP）？还是静态页面（.html/.htm/.shtml）？答案是：静态页面； 3、实现原理：通过前端 js 脚本程序与 Ajax 相结合取得从动态页面返回的数据，并显示。 好了，下面进行代码
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值