php+ajax+jquery分页并显示数据
Posted 讨厌麻烦
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 ->以上是关于php+ajax+jquery分页并显示数据的主要内容，如果未能解决你的问题，请参考以下文章在前台将AJAX回调函数里面的数组用Jquery进行分页并写在相对应的DIV中