php+ajax+jquery分页并显示数据

参考https://www.helloweba.com/view-blog-195.html

html页面

1         <div class="weui-cells" id="more">
2             <!--  把class="sin"的页面数据追加append到id=“more”里面        -->
3         </div>
4         <div>
5             <button></button>
6         </div>

上面的第一个div是显示帖子列表的地方，包括帖子的标题，作者昵称。

第二个div是个按钮，显示下一页。

jquery

我们先声明变量，后面的代码要用到以下变量。

 var curPage = 1; //当前页码
 var total,pageSize,totalPage;

接下来，我们自定义一个函数：getData()，用来获取当前页数据。函数中，我们利用$.ajax()向后台list_1test.php发送POST异步请求，将当前页码以JSON格式传递给后台。

 1                  function getData(page){ 
 2                     $.ajax({
 3                         type: "post",
 4                         url: "list_1test.php",
 5                         dataType:"json",
 6                         data: {'pageNum':page-1},
 7                         success: function(data) {
 8                             console.log(data);
 9                             total = data.num; //总记录数
10                             pageSize = data.fnum; //每页显示条数
11                             curPage = page; //当前页
12                             totalPage = data.$pagenum; //总页数
13                             var html = '';//定义html变量，他就是每次要加的代码
14                             for (var i = 0; i < data.length; i++) {//在php后台我定义的每页有5条帖子，data.length=5
15                                 html += '<div class="sin">' +
16                                     '<a class="weui-cell weui-cell_access" href="aritle.php?id='+data[i]['postid']+'">' +
17                                     //'<div class="postid">' +data[i]['postid']+ '</div>' +
18                                     '<div class="weui-cell__bd">' +
19                                     '<p class="title">' + data[i]['title'] + '</p>' +
20                                     '</div>' +
21                                     '<div class="weui-cell__ft">' +
22                                     '<div class="nickname">'+data[i]['nickname']+'</div>' +
23                                     '</div>' +
24                                     '</a>' +
25                                     '</div>';
26                             }
27                             $('#more').append(html);//追加
28 
29                         },
30                         complete:function(){ //点击得到下一页
31                             getPageBar();
32                         },
33                     });    
34             }

主要是获取下一页，rel的值

1 function getPageBar(){
2                 pageStr = "";
3                 pageStr += "<span><a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>点击加载更多</a>";
4                 $("button").html(pageStr);
5             }

当页面第一次加载时，我们加载第一页数据即getData(1)，当点击分页条中的下一页按钮时，调用getData(page)加载对应页码的数据。我们通过getPageBar()函数已预先在翻页连接的属性rel中在埋入了数字页码。

1            $(function(){
2                 getData(1);
3                 $("button  span a").live('click',function(){
4                     var rel = $(this).attr("rel");
5                     if(rel){
6                         getData(rel);
7                     }
8                 });
9             });

php

 1 <?php
 2 require ("mysql_class.php");
 3 $db = new Mysql("localhost", "root", "201122", "userdb");
 4 define("TABLENAME", "user_post");
 5 $select = $db -> selectsql(TABLENAME);
 6 $num = $db -> num($select);//总记录数
 7 $fnum = 5;//每页显示条数
 8 $pagenum = ceil($num / $fnum);//总页数
 9 $tmp = intval($_POST['pageNum']);//html页面传过来的，当前页数-1
10 //防止恶意翻页
11 if ($tmp+1 > $pagenum)
12     echo "<script>window.location.href='list_1test.php'</script>";
13 //计算分页起始值
14 if ($tmp == 0) {
15     $num1 = 0;
16 } else {
17     $num1 = $tmp * $fnum;
18     
19 }
20 $query=mysql_query("SELECT *  FROM  user_post ORDER BY id DESC LIMIT " . $num1 . ",$fnum");// user_post帖子数据库
21 while($row=mysql_fetch_array($query)){
22     $userid = $row['user_id'];
23     $result = mysql_query("select * from user_nickname where user_id='$userid'");//存有用户昵称的数据库user_nickname
24     $roww = mysql_fetch_array($result);
25     $data[] = array(
26         'title'=>$row['title'],
27         'nickname'=>$roww['nickname'],
28         'postid'=>$row['id']
29       );
30       
31   
32 }
33 
34      die(json_encode($data));
35 ?>

点击帖子之后显示文章的aritle.php

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>
 6             文章
 7         </title>
 8         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
 9         <link rel="stylesheet" href="https://weui.io/weui.css" />
10     </head>
11     <body>
12     </body>
13 </html>
14 <?php
15 //$id=$_GET['id'];
16 
17 require ("mysql_class.php");
18 $db = new Mysql("localhost", "root", "201122", "userdb");
19 //$id1 = intval($_GET['id']);
20 $postid = intval($_GET['id']);//list_1.html传过来的帖子数据库里的帖子的id
21 define("TABLENAME", "user_post");
22 $select = $db -> selectsql(TABLENAME);
23 $num = $db -> num($select);
24 for ($i = 0; $i < $num; $i++) {
25     $row = $db -> arr($select);
26     $id = $row['id'];
27     $title = $row['title'];
28     $aritle = $row['aritle'];
29     if ($id == $postid) {
30         echo '<article class="weui-article">
31             <h1>' . $title . '</h1>
32             <section>
33                 <section>
34                     <p>' . $aritle . '</p>
35                 </section>
36             </section>
37         </article>';
38     }
39 
40 }
41 ?>

最后汇总

要在谷歌浏览器中显示，否则一些样式不管用。

1.list_1.html

  1 <!DOCTYPE html>
  2 <html>
  3 
  4     <head>
  5         <meta charset="UTF-8">
  6         <title>
  7             帖子列表
  8         </title>
  9         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
 10         <link rel="stylesheet" href="https://weui.io/weui.css" />
 11         <script type="text/javascript" src="jquery.min.js"></script>
 12         <script type="text/javascript" src="jquery.more.js"></script>
 13         <script src="https://weui.io/zepto.min.js"></script>
 14         <script type="text/javascript">
 15             var curPage = 1; //当前页码
 16             var total,pageSize,totalPage;
 17             //$(document).ready(function() { 
 18             function getData(page){ 
 19                     $.ajax({
 20                         type: "post",
 21                         url: "list_1test.php",
 22                         dataType:"json",
 23                         data: {'pageNum':page-1},
 24                         success: function(data) {
 25                             console.log(data);
 26                             total = data.num; //总记录数
 27                             pageSize = data.fnum; //每页显示条数
 28                             curPage = page; //当前页
 29                             totalPage = data.$pagenum; //总页数
 30                              var html = '';
 31                             for (var i = 0; i < data.length; i++) {
 32                                 html += '<div class="sin">' +
 33                                     '<a class="weui-cell weui-cell_access" href="aritle.php?id='+data[i]['postid']+'">' +
 34                                     //'<div class="postid">' +data[i]['postid']+ '</div>' +
 35                                     '<div class="weui-cell__bd">' +
 36                                     '<p class="title">' + data[i]['title'] + '</p>' +
 37                                     '</div>' +
 38                                     '<div class="weui-cell__ft">' +
 39                                     '<div class="nickname">'+data[i]['nickname']+'</div>' +
 40                                     '</div>' +
 41                                     '</a>' +
 42                                     '</div>';
 43                             }
 44                             $('#more').append(html);
 45 
 46                         },
 47                         complete:function(){ //点击得到下一页
 48                             getPageBar();
 49                         },
 50                     });    
 51             }
 52             
 53             function getPageBar(){
 54                 pageStr = "";
 55                 pageStr += "<span><a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>点击加载更多</a>";
 56                 $("button").html(pageStr);
 57             }
 58             
 59             $(function(){
 60                 getData(1);
 61                 $("button  span a").live('click',function(){
 62                     var rel = $(this).attr("rel");
 63                     if(rel){
 64                         getData(rel);
 65                     }
 66                 });
 67             });
 68         </script>
 69         
 70     </head>
 71 
 72     <body>
 85         <div class="weui-cells__title">
 86             帖子列表
 87         </div>
 88 
 89         <div class="weui-cells" id="more">
 90             <!--  把class="sin"的页面数据追加append到id=“more”里面        -->
 91         </div>
 92         <div>
 93             <button></button>
 94         </div>
 95             
 96         
 97      
 98     </body>
 99 
100 </html>
101 
102 
103 104 
105

2.list_1test.php

 1 <?php
 2 require ("mysql_class.php");
 3 $db = new Mysql("localhost", "root", "201122", "userdb");
 4 define("TABLENAME", "user_post");
 5 $select = $db -> selectsql(TABLENAME);
 6 $num = $db -> num($select);//总记录数
 7 $fnum = 5;//每页显示条数
 8 $pagenum = ceil($num / $fnum);//总页数
 9 $tmp = intval($_POST['pageNum']);//html页面传过来的，当前页数-1
10 //防止恶意翻页
11 if ($tmp+1 > $pagenum)
12     echo "<script>window.location.href='list_1test.php'</script>";
13 //计算分页起始值
14 if ($tmp == 0) {
15     $num1 = 0;
16 } else {
17     $num1 = $tmp * $fnum;
18     
19 }
20 $query=mysql_query("SELECT *  FROM  user_post ORDER BY id DESC LIMIT " . $num1 . ",$fnum");
21 while($row=mysql_fetch_array($query)){
22     $userid = $row['user_id'];
23     $result = mysql_query("select * from user_nickname where user_id='$userid'");
24     $roww = mysql_fetch_array($result);
25     $data[] = array(
26         'title'=>$row['title'],
27         'nickname'=>$roww['nickname'],
28         'postid'=>$row['id']
29       );
30       
31      
32 }
33 
34      die(json_encode($data));
35 ?>

3.aritle.php

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>
 6             文章
 7         </title>
 8         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
 9         <link rel="stylesheet" href="https://weui.io/weui.css" />
10     </head>
11     <body>
12     </body>
13 </html>
14 <?php
15 //$id=$_GET['id'];
16 
17 require ("mysql_class.php");
18 $db = new Mysql("localhost", "root", "201122", "userdb");
19 //$id1 = intval($_GET['id']);
20 $postid = intval($_GET['id']);
21 define("TABLENAME", "user_post");
22 $select = $db -> selectsql(TABLENAME);
23 $num = $db -> num($select);
24 for ($i = 0; $i < $num; $i++) {
25     $row = $db -> arr($select);
26     $id = $row['id'];
27     $title = $row['title'];
28     $aritle = $row['aritle'];
29     if ($id == $postid) {
30         echo '<article class="weui-article">
31             <h1>' . $title . '</h1>
32             <section>
33                 <section>
34                     <p>' . $aritle . '</p>
35                 </section>
36             </section>
37         </article>';
38     }
39 
40 }
41 ?>

4.mysql_class.php

 1 <?php
 2 header("content-type:text/html;charset=utf-8");
 3 class Mysql {
 4     private $host;
 5     //服务器地址
 6     private $root;
 7     //用户名
 8     private $password;
 9     //密码
10     private $database;
11     //数据库名
12 
13     //通过构造函数初始化类
14     function Mysql($host, $root, $password, $database) {
15         $this -> host = $host;
16         $this -> root = $root;
17         $this -> password = $password;
18         $this -> database = $database;
19         $this -> connect();
20     }
21 
22     function connect() {
23         $this -> conn = mysql_connect($this -> host, $this -> root, $this -> password);
24         //        if($this->conn){
25         //            echo "连接mysql成功";
26         //        }else{
27         //            echo "连接mysql失败";
28         //        }
29         //        $this->conn=
30         mysql_select_db($this -> database, $this -> conn);
31         //        if($this->conn){
32         //            echo "连接db成功";
33         //        }else{
34         //            echo "连接db失败";
35         //        }
36         mysql_query("set names utf8");
37     }
38 
39     function dbClose() {
40         mysql_close($this -> conn);
41     }
42 
43     function query($sql) {
44         return mysql_query($sql);
45     }
46 
47     function row($result) {
48         return mysql_fetch_row($result);
49 
50     }
51 
52     function arr($result) {
53         return mysql_fetch_array($result);
54     }
55     function ass($result) {
56         return mysql_fetch_assoc($result);
57     }
58     function num($result) {
59         return mysql_num_rows($result);
60     }
61 
62     function select($tableName, $condition) {
63         return $this -> query("SELECT COUNT(*) FROM $tableName $condition");
64     }
65 
66     function selectsql($tableName) {
67         return $this -> query("SELECT * FROM $tableName");
68     }
69 
70     function selectcon($tableName, $condition) {
71         return $this -> query("SELECT * FROM $tableName $condition");
72     }
73 
74     function insert($tableName, $fields, $value) {
75         $this -> query("INSERT INTO $tableName $fields VALUES$value");
76     }
77 
78     
79 
80 }
81 ?>

l两个数据表

帖子发布的数据表

存有用户昵称的数据表

两个表中的user_id是外键。主键user_id在user_register里面。自行设置。也可以只做一个表。把mysql语句改了就行。