html代码：

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title></title>
     <script src='__PUBLIC__/jquery-3.0.0.min.js'></script>
 </head>
 <body>
     <div id="list">
        <ul></ul>
    </div>
    <div id="pagecount"></div>
 </body>
 </html>
 <script>
     var curPage = 1; //当前页码
    var total,pageSize,totalPage; //总记录数，每页显示数，总页数
    //获取数据
    function getData(page){  
        $.ajax({
            type: 'POST',
            url: "{:U('Index/ajaxs')}",
            data: {'pageNum':page-1},
            dataType:'json',
            beforeSend:function(){
                $("#list ul").append("<li id='loading'>loading...</li>");//显示加载动画
            },
            success:function(json){
                $("#list ul").empty();//清空数据区
                total = json.total; //总记录数
                pageSize = json.pageSize; //每页显示条数
                curPage = page; //当前页
                totalPage = json.totalPage; //总页数
                var li = "";
                var list = json.list;
                $.each(list,function(index,array){ //遍历json数据列
                    li += "<li><a href='#'>"+array['id']+"</a></li>";
                });
                $("#list ul").append(li);
            },
            complete:function(){ //生成分页条
                getPageBar();
                fun();
            },
            error:function(){
                alert("数据加载失败");
            }
        });
    }
    //获取分页条
    function getPageBar(){
        //页码大于最大页数
        if(curPage>totalPage) curPage=totalPage;
        //页码小于1
        if(curPage<1) curPage=1;
        pageStr = "<span>共"+total+"条</span><span>"+curPage
        +"/"+totalPage+"</span>";
         
        //如果是第一页
        if(curPage==1){
            pageStr += "<span>首页</span><span>上一页</span>";
        }else{
            pageStr += "<span><a href='javascript:void(0)' rel='1'>首页</a></span><span><a href='javascript:void(0)' rel='"+(curPage-1)+"'>上一页</a></span>";
        }
         
        //如果是最后页
        if(curPage>=totalPage){
            pageStr += "<span>下一页</span><span>尾页</span>";
        }else{
            pageStr += "<span><a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'> 下一页</a></span><span><a href='javascript:void(0)' rel='"+totalPage+"'>尾页</a></span>";
        }
        $("#pagecount").html(pageStr);
    }
    
    $(function(){
        getData(1);
    });
    function fun(){
        $("#pagecount span a").on('click',function(){
            var rel = $(this).attr("rel");
            alert(rel)
            if(rel){
                getData(rel);
            }
        });  
    }
 </script>

PHP代码：

<?php
namespace Home\Controller;
use Think\Controller;
class IndexController extends Controller {
    public function index(){
        echo 'ddd';
        $this->display();

exit;
        $result = mysql_query("select id from food");
        $total = mysql_num_rows($result);//总记录数
        $pageSize = 6; //每页显示数
        $totalPage = ceil($total/$pageSize); //总页数
        
        $startPage = $page*$pageSize; //开始记录
        //构造数组
        $arr['total'] = $total;
        $arr['pageSize'] = $pageSize;
        $arr['totalPage'] = $totalPage;
        $query = mysql_query("select id,title,pic from food order by id asc limit  
        $startPage,$pageSize"); //查询分页数据
        while($row=mysql_fetch_array($query)){
             $arr['list'][] = array(
                 'id' => $row['id'],
                'title' => $row['title'],
                'pic' => $row['pic'],
             );
        }
        echo json_encode($arr); //输出JSON数据
    }
    public function ajaxs(){
        $page = intval($_POST['pageNum']); //当前页
         $statistics=M('SearchStatistics');
         $total=$statistics->count();//总记录数
         $pageSize = 6; //每页显示数
         $totalPage = ceil($total/$pageSize); //总页数
         $startPage = $page*$pageSize; //开始记录
         
         //构造数组
        $arr['total'] = $total;
        $arr['pageSize'] = $pageSize;
        $arr['totalPage'] = $totalPage;
        $data=$statistics->limit("$startPage,$pageSize")->select();
        // dump($data);
        $arr['list'] = $data;
        echo json_encode($arr); //输出JSON数据
    }
}

ajax异步请求分页显示的更多相关文章

  1. ajax异步请求

    做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...

  2. ajax异步请求Response.Redirect重定向

    一个ajax异步请求报错->捕获异常->重定向错误提示页面.  一个简单的流程 结果一直搞不定.重定向无效.各种百度之. 后来突然想起 ajax的请求是不能在后台重定向的. 如果硬要重定向 ...

  3. 触碰jQuery：AJAX异步详解

    触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...

  4. html5+php实现文件的断点续传ajax异步上传

    html5+php实现文件的断点续传ajax异步上传 准备知识:断点续传,既然有断,那就应该有文件分割的过程,一段一段的传.以前文件无法分割,但随着HTML5新特性的引入,类似普通字符串.数组的分割, ...

  5. jQuery调用AJAX异步详解[转]

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和X ...

  6. jquery的ajax异步请求接收返回json数据

    http://www.jb51.net/article/51122.htm jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发 ...

  7. 项目中使用的ajax异步读取数据结构设计

    设计稍微复杂了一点,完成ajax读取功能涉及到了很多页面.虽然如此,但感觉比较灵活. 和传统方法唯一的区别在于多了一层数据容器控件,里面提供了显示数据的HTML元素及相应的JS方法. 这样数据控件指生 ...

  8. MVC&WebForm对照学习：ajax异步请求

    写在前面:由于工作需要,本人刚接触asp.net mvc,虽然webform的项目干过几个.但是也不是很精通.抛开asp.net webform和asp.net mvc的各自优劣和诸多差异先不说.我认 ...

  9. art.dialog 与 ajax 异步请求

    上周写了一些代码,涉及到jquery异步请求,这里归纳总结下,希望对刚接触编程的同学有帮助. 主要习惯使用 art.dialog 框架,非常好用,在异步请求上,它提供了很多简便的方法. 加载使用art ...

随机推荐

  1. MVC的优缺点

    MVC的优点 大部分用过程语言比如ASP.PHP开发出来的Web应用,初始的开发模板就是混合层的数据编程.例如,直接向数据库发送请求并用HTML显示,开发速度往往比较快,但由于数据页面的分离不是很直接 ...

  2. yum安装epel后报错

    Loaded plugins: fastestmirror, refresh-packagekit, security Loading mirror speeds from cached hostfi ...

  3. Leetcode:integer_to_roman

    一.     题目 将给定的数字(阿拉伯数字)转化成罗马数字. 数字不会大于3999 二.     分析 首先我们要知道神马是罗马数字,尽管听说过.但事实上我还真没有记住,于是就google了下,具体 ...

  4. (016)给定一个有序数组(递增)，敲代码构建一棵具有最小高度的二叉树(keep it up)

    给定一个有序数组(递增),敲代码构建一棵具有最小高度的二叉树. 因为数组是递增有序的.每次都在中间创建结点,类似二分查找的方法来间最小树. struct TreeNode { int data; Tr ...

  5. C#之正则表达式验证

    /** 匹配身份证号 规则: 15位纯数字或者18位纯数字或者17位数字加一位x */ var regex = new System.Text.RegularExpressions.Regex(@&q ...

  6. vue 父组件如何调用子组件的函数Methods

    答案就是使用ref即可. <countdown ref="countdown"></countdown> beforeDestroy () { // 切换页 ...

  7. OPPO.1107刷机笔记

    手动 转移任意APP为系统APP的方法流程简述 宗旨: 保持和系统原本同目录下的文件各种设置(权限,所有者,SE上下文),目录结构保持一致即可! 从 /data/app/里将对应的APP文件移动到 / ...

  8. Codeforces Round #240 (Div. 1)B---Mashmokh and ACM(水dp)

    Mashmokh's boss, Bimokh, didn't like Mashmokh. So he fired him. Mashmokh decided to go to university ...

  9. 不同的Linux之间copy文件常用方法

    第一种就是ftp,也就是其中一台Linux安装ftp Server,另外一台使用ftp的client程序来进行文件的copy. 第二种方法就是采用samba服务,类似Windows文件copy 的方式 ...

  10. C语言指针解说

    指针是C语言的一种数据类型.类似于C中的其它类型,比如int ,char 等.既然指针是一种类型,当我们定义该类型变量.该类型变量就称为指针变量. C中有了指针就有了指向. 指向:指针变量指向本身保存 ...