php+ajax+jquery分页并显示数据
生活随笔
收集整理的這篇文章主要介紹了
php+ajax+jquery分页并显示数据
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
?
參考https://www.helloweba.com/view-blog-195.html
?
html頁面
1 <div class="weui-cells" id="more"> 2 <!-- 把class="sin"的頁面數(shù)據(jù)追加append到id=“more”里面 --> 3 </div> 4 <div> 5 <button></button> 6 </div>上面的第一個(gè)div是顯示帖子列表的地方，包括帖子的標(biāo)題，作者昵稱。
第二個(gè)div是個(gè)按鈕，顯示下一頁。
?
jquery
我們先聲明變量，后面的代碼要用到以下變量。
var curPage = 1; //當(dāng)前頁碼var total,pageSize,totalPage;?
接下來，我們自定義一個(gè)函數(shù)：getData()，用來獲取當(dāng)前頁數(shù)據(jù)。函數(shù)中，我們利用$.ajax()向后臺(tái)list_1test.php發(fā)送POST異步請(qǐng)求，將當(dāng)前頁碼以JSON格式傳遞給后臺(tái)。
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; //總記錄數(shù) 10 pageSize = data.fnum; //每頁顯示條數(shù) 11 curPage = page; //當(dāng)前頁 12 totalPage = data.$pagenum; //總頁數(shù) 13 var html = '';//定義html變量，他就是每次要加的代碼 14 for (var i = 0; i < data.length; i++) {//在php后臺(tái)我定義的每頁有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(){ //點(diǎn)擊得到下一頁 31 getPageBar(); 32 }, 33 }); 34 }?
主要是獲取下一頁，rel的值
1 function getPageBar(){ 2 pageStr = ""; 3 pageStr += "<span><a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>點(diǎn)擊加載更多</a>"; 4 $("button").html(pageStr); 5 }?
當(dāng)頁面第一次加載時(shí)，我們加載第一頁數(shù)據(jù)即getData(1)，當(dāng)點(diǎn)擊分頁條中的下一頁按鈕時(shí)，調(diào)用getData(page)加載對(duì)應(yīng)頁碼的數(shù)據(jù)。我們通過getPageBar()函數(shù)已預(yù)先在翻頁連接的屬性rel中在埋入了數(shù)字頁碼。
?
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);//總記錄數(shù) 7 $fnum = 5;//每頁顯示條數(shù) 8 $pagenum = ceil($num / $fnum);//總頁數(shù) 9 $tmp = intval($_POST['pageNum']);//html頁面?zhèn)鬟^來的，當(dāng)前頁數(shù)-1 10 //防止惡意翻頁 11 if ($tmp+1 > $pagenum) 12 echo "<script>window.location.href='list_1test.php'</script>"; 13 //計(jì)算分頁起始值 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帖子數(shù)據(jù)庫 21 while($row=mysql_fetch_array($query)){ 22 $userid = $row['user_id']; 23 $result = mysql_query("select * from user_nickname where user_id='$userid'");//存有用戶昵稱的數(shù)據(jù)庫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 ?>?
點(diǎn)擊帖子之后顯示文章的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傳過來的帖子數(shù)據(jù)庫里的帖子的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; //當(dāng)前頁碼 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; //總記錄數(shù) 27 pageSize = data.fnum; //每頁顯示條數(shù) 28 curPage = page; //當(dāng)前頁 29 totalPage = data.$pagenum; //總頁數(shù) 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(){ //點(diǎn)擊得到下一頁 48 getPageBar(); 49 }, 50 }); 51 } 52 53 function getPageBar(){ 54 pageStr = ""; 55 pageStr += "<span><a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>點(diǎn)擊加載更多</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"的頁面數(shù)據(jù)追加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);//總記錄數(shù) 7 $fnum = 5;//每頁顯示條數(shù) 8 $pagenum = ceil($num / $fnum);//總頁數(shù) 9 $tmp = intval($_POST['pageNum']);//html頁面?zhèn)鬟^來的，當(dāng)前頁數(shù)-1 10 //防止惡意翻頁 11 if ($tmp+1 > $pagenum) 12 echo "<script>window.location.href='list_1test.php'</script>"; 13 //計(jì)算分頁起始值 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 //服務(wù)器地址 6 private $root; 7 //用戶名 8 private $password; 9 //密碼 10 private $database; 11 //數(shù)據(jù)庫名 12 13 //通過構(gòu)造函數(shù)初始化類 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兩個(gè)數(shù)據(jù)表
帖子發(fā)布的數(shù)據(jù)表
存有用戶昵稱的數(shù)據(jù)表
兩個(gè)表中的user_id是外鍵。主鍵user_id在user_register里面。自行設(shè)置。也可以只做一個(gè)表。把mysql語句改了就行。
?
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/tanyongli/p/7418546.html
總結(jié)
以上是生活随笔為你收集整理的php+ajax+jquery分页并显示数据的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： （转载）HTTP与RPC的区别
- 下一篇： 控制器及其中$scope