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. C# socket编程 使用udp实现单对单的连接对话

    ipLocalPoint = new IPEndPoint(IPAddress.Parse("192.168.31.122"), 5000); //定义网络类型,数据连接类型和网络 ...

  2. 使用node.js 文档里的方法写一个web服务器

    刚刚看了node.js文档里的一个小例子,就是用 node.js 写一个web服务器的小例子 上代码 (*^▽^*) //helloworld.js// 使用node.js写一个服务器 const h ...

  3. jq时间戳转化为可视化时间

    //2016年5月21日 23:12:07 function getDateTimeToDate(dt){ var dateTime = new Date(dt); var date = dateTi ...

  4. 使用BMap.Label给百度地图的BMap.Marker上加上数字序号

    marker = new BMap.Marker(pointList[i]) marker.setLabel(getNumberLabel(i)); function getNumberLabel(n ...

  5. Atitit.提升api兼容性的方法 v3 q326

    Atitit.提升api兼容性的方法 v3 q326 1. Atitit.兼容性的“一加三”策略1 2. 2. 扩展表模式1 3. 3. 同时运行模式1 3.1. 3.1. 完美的后向兼容性2 3.2 ...

  6. Atitit. atiJavaExConverter4js  新的特性

    Atitit. atiJavaExConverter4js  新的特性 1.1. V1新特性1 1.2. V2 新特性1 2. Keyword1 3. Catch1 4. Convert n Thro ...

  7. JavaScript之变量、作用域和内存问题

    js中的变量可能包含2种数据类型,基础数据类型和引用数据类型. 一般而言,基本数据类型是数据段,引用数据类型是对象. 保存方式的不同: 基本类型可以直接操作保存在变量中的值:而引用类型真实的值是保存在 ...

  8. 使用Crypto++库编译出错 解决办法

    错误信息: >------ 已启动生成: 项目: testCrypto++, 配置: Debug Win32 ------ >正在编译... >main.cpp >正在链接.. ...

  9. JPA动态查询封装

    一.定义一个查询条件容器 /** * 定义一个查询条件容器 * * @param <T> */ public class Criteria<T> implements Spec ...

  10. Struts2 异常处理

    Struts提供了一个更简单的方式来处理未捕获的异常,并将用户重定向到一个专门的错误页面.您可以轻松地Struts配置到不同的异常有不同的错误页面. Struts的异常处理所使用的“exception ...