php+ajax+jquery分頁並顯示數據
阿新 • • 發佈：2017-08-23
我們 nic 定義 防止 initial etc turn on() mysq
參考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語句改了就行。
php+ajax+jquery分頁並顯示數據