php+ajax+jquery分页并显示数据
参考https://www.helloweba.com/view-blog-195.html
html页面
<div class="weui-cells" id="more">
<!-- 把class="sin"的页面数据追加append到id=“more”里面 -->
</div>
<div>
<button></button>
</div>
上面的第一个div是显示帖子列表的地方，包括帖子的标题，作者昵称。
第二个div是个按钮，显示下一页。
jquery
我们先声明变量，后面的代码要用到以下变量。
var curPage = 1; //当前页码
var total,pageSize,totalPage;
接下来，我们自定义一个函数：getData()，用来获取当前页数据。函数中，我们利用$.ajax()向后台list_1test.php发送POST异步请求，将当前页码以JSON格式传递给后台。
function getData(page){
$.ajax({
type: "post",
url: "list_1test.php",
dataType:"json",
data: {'pageNum':page-},
success: function(data) {
console.log(data);
total = data.num; //总记录数
pageSize = data.fnum; //每页显示条数
curPage = page; //当前页
totalPage = data.$pagenum; //总页数
var html = '';//定义html变量，他就是每次要加的代码
for (var i = ; i < data.length; i++) {//在php后台我定义的每页有5条帖子，data.length=5
html += '<div class="sin">' +
'<a class="weui-cell weui-cell_access" href="aritle.php?id='+data[i]['postid']+'">' +
//'<div class="postid">' +data[i]['postid']+ '</div>' +
'<div class="weui-cell__bd">' +
'<p class="title">' + data[i]['title'] + '</p>' +
'</div>' +
'<div class="weui-cell__ft">' +
'<div class="nickname">'+data[i]['nickname']+'</div>' +
'</div>' +
'</a>' +
'</div>';
}
$('#more').append(html);//追加
},
complete:function(){ //点击得到下一页
getPageBar();
},
});
}
主要是获取下一页，rel的值
function getPageBar(){
pageStr = "";
pageStr += "<span><a href='javascript:void(0)' rel='"+(parseInt(curPage)+)+"'>点击加载更多</a>";
$("button").html(pageStr);
}
当页面第一次加载时，我们加载第一页数据即getData(1)，当点击分页条中的下一页按钮时，调用getData(page)加载对应页码的数据。我们通过getPageBar()函数已预先在翻页连接的属性rel中在埋入了数字页码。
$(function(){
getData();
$("button span a").live('click',function(){
var rel = $(this).attr("rel");
if(rel){
getData(rel);
}
});
});
php
<?php
require ("mysql_class.php");
$db = new Mysql("localhost", "root", "", "userdb");
define("TABLENAME", "user_post");
$select = $db -> selectsql(TABLENAME);
$num = $db -> num($select);//总记录数
$fnum = ;//每页显示条数
$pagenum = ceil($num / $fnum);//总页数
$tmp = intval($_POST['pageNum']);//html页面传过来的，当前页数-1
//防止恶意翻页
if ($tmp+ > $pagenum)
echo "<script>window.location.href='list_1test.php'</script>";
//计算分页起始值
if ($tmp == ) {
$num1 = ;
} else {
$num1 = $tmp * $fnum; }
$query=mysql_query("SELECT * FROM user_post ORDER BY id DESC LIMIT " . $num1 . ",$fnum");// user_post帖子数据库
while($row=mysql_fetch_array($query)){
$userid = $row['user_id'];
$result = mysql_query("select * from user_nickname where user_id='$userid'");//存有用户昵称的数据库user_nickname
$roww = mysql_fetch_array($result);
$data[] = array(
'title'=>$row['title'],
'nickname'=>$roww['nickname'],
'postid'=>$row['id']
); } die(json_encode($data));
?>
点击帖子之后显示文章的aritle.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
文章
</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<link rel="stylesheet" href="https://weui.io/weui.css" />
</head>
<body>
</body>
</html>
<?php
//$id=$_GET['id']; require ("mysql_class.php");
$db = new Mysql("localhost", "root", "", "userdb");
//$id1 = intval($_GET['id']);
$postid = intval($_GET['id']);//list_1.html传过来的帖子数据库里的帖子的id
define("TABLENAME", "user_post");
$select = $db -> selectsql(TABLENAME);
$num = $db -> num($select);
for ($i = ; $i < $num; $i++) {
$row = $db -> arr($select);
$id = $row['id'];
$title = $row['title'];
$aritle = $row['aritle'];
if ($id == $postid) {
echo '<article class="weui-article">
<h1>' . $title . '</h1>
<section>
<section>
<p>' . $aritle . '</p>
</section>
</section>
</article>';
} }
?>
最后汇总
要在谷歌浏览器中显示，否则一些样式不管用。
1.list_1.html
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>
帖子列表
</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<link rel="stylesheet" href="https://weui.io/weui.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.more.js"></script>
<script src="https://weui.io/zepto.min.js"></script>
<script type="text/javascript">
var curPage = ; //当前页码
var total,pageSize,totalPage;
//$(document).ready(function() {
function getData(page){
$.ajax({
type: "post",
url: "list_1test.php",
dataType:"json",
data: {'pageNum':page-},
success: function(data) {
console.log(data);
total = data.num; //总记录数
pageSize = data.fnum; //每页显示条数
curPage = page; //当前页
totalPage = data.$pagenum; //总页数
var html = '';
for (var i = ; i < data.length; i++) {
html += '<div class="sin">' +
'<a class="weui-cell weui-cell_access" href="aritle.php?id='+data[i]['postid']+'">' +
//'<div class="postid">' +data[i]['postid']+ '</div>' +
'<div class="weui-cell__bd">' +
'<p class="title">' + data[i]['title'] + '</p>' +
'</div>' +
'<div class="weui-cell__ft">' +
'<div class="nickname">'+data[i]['nickname']+'</div>' +
'</div>' +
'</a>' +
'</div>';
}
$('#more').append(html); },
complete:function(){ //点击得到下一页
getPageBar();
},
});
} function getPageBar(){
pageStr = "";
pageStr += "<span><a href='javascript:void(0)' rel='"+(parseInt(curPage)+)+"'>点击加载更多</a>";
$("button").html(pageStr);
} $(function(){
getData();
$("button span a").live('click',function(){
var rel = $(this).attr("rel");
if(rel){
getData(rel);
}
});
});
</script> </head> <body>
<div class="weui-cells__title">
帖子列表
</div> <div class="weui-cells" id="more">
<!-- 把class="sin"的页面数据追加append到id=“more”里面 -->
</div>
<div>
<button></button>
</div> </body> </html>
2.list_1test.php
<?php
require ("mysql_class.php");
$db = new Mysql("localhost", "root", "", "userdb");
define("TABLENAME", "user_post");
$select = $db -> selectsql(TABLENAME);
$num = $db -> num($select);//总记录数
$fnum = ;//每页显示条数
$pagenum = ceil($num / $fnum);//总页数
$tmp = intval($_POST['pageNum']);//html页面传过来的，当前页数-1
//防止恶意翻页
if ($tmp+ > $pagenum)
echo "<script>window.location.href='list_1test.php'</script>";
//计算分页起始值
if ($tmp == ) {
$num1 = ;
} else {
$num1 = $tmp * $fnum; }
$query=mysql_query("SELECT * FROM user_post ORDER BY id DESC LIMIT " . $num1 . ",$fnum");
while($row=mysql_fetch_array($query)){
$userid = $row['user_id'];
$result = mysql_query("select * from user_nickname where user_id='$userid'");
$roww = mysql_fetch_array($result);
$data[] = array(
'title'=>$row['title'],
'nickname'=>$roww['nickname'],
'postid'=>$row['id']
); } die(json_encode($data));
?>
3.aritle.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
文章
</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<link rel="stylesheet" href="https://weui.io/weui.css" />
</head>
<body>
</body>
</html>
<?php
//$id=$_GET['id']; require ("mysql_class.php");
$db = new Mysql("localhost", "root", "", "userdb");
//$id1 = intval($_GET['id']);
$postid = intval($_GET['id']);
define("TABLENAME", "user_post");
$select = $db -> selectsql(TABLENAME);
$num = $db -> num($select);
for ($i = ; $i < $num; $i++) {
$row = $db -> arr($select);
$id = $row['id'];
$title = $row['title'];
$aritle = $row['aritle'];
if ($id == $postid) {
echo '<article class="weui-article">
<h1>' . $title . '</h1>
<section>
<section>
<p>' . $aritle . '</p>
</section>
</section>
</article>';
} }
?>
4.mysql_class.php
<?php
header("content-type:text/html;charset=utf-8");
class Mysql {
private $host;
//服务器地址
private $root;
//用户名
private $password;
//密码
private $database;
//数据库名 //通过构造函数初始化类
function Mysql($host, $root, $password, $database) {
$this -> host = $host;
$this -> root = $root;
$this -> password = $password;
$this -> database = $database;
$this -> connect();
} function connect() {
$this -> conn = mysql_connect($this -> host, $this -> root, $this -> password);
// if($this->conn){
// echo "连接mysql成功";
// }else{
// echo "连接mysql失败";
// }
// $this->conn=
mysql_select_db($this -> database, $this -> conn);
// if($this->conn){
// echo "连接db成功";
// }else{
// echo "连接db失败";
// }
mysql_query("set names utf8");
} function dbClose() {
mysql_close($this -> conn);
} function query($sql) {
return mysql_query($sql);
} function row($result) {
return mysql_fetch_row($result); } function arr($result) {
return mysql_fetch_array($result);
}
function ass($result) {
return mysql_fetch_assoc($result);
}
function num($result) {
return mysql_num_rows($result);
} function select($tableName, $condition) {
return $this -> query("SELECT COUNT(*) FROM $tableName $condition");
} function selectsql($tableName) {
return $this -> query("SELECT * FROM $tableName");
} function selectcon($tableName, $condition) {
return $this -> query("SELECT * FROM $tableName $condition");
} function insert($tableName, $fields, $value) {
$this -> query("INSERT INTO $tableName $fields VALUES$value");
} }
?>
l两个数据表
帖子发布的数据表
存有用户昵称的数据表
两个表中的user_id是外键。主键user_id在user_register里面。自行设置。也可以只做一个表。把mysql语句改了就行。
php+ajax+jquery分页并显示数据的更多相关文章
- ECharts, PHP, MySQL, Ajax, JQuery 实现前后端数据可视化
ECharts 下载js代码 工作原理浅析 在项目中引入ECharts 后台处理 数据库端MySQL PHP端 JQuery Ajax处理 ECharts 端处理 前端全部代码 演示结果 总结 最近要 ...
- 百度分享 ajax 或分页后显示不出问题解决方案
自从用了AJAX后,JS重新加载问题就如家常便饭般层出不穷啊.没有系统学习过js感觉亚历山大. 百度后,还是找到了解决办法. 百度分享创建了一个全局对象window._bd_share_main.通过 ...
- php+ajax+jquery 定时刷新页面数据
testajax.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
- ajax的分页查询（不刷新页面）
既然是分页查询,那么就要有张数据很多的表,可以让它进行分页显示,用普通的方法进行分页查询必然是要刷新页面的,这里要实现不刷新页面进行分页显示数据,就要用到ajax方式.进行编写代码 (1)先写个显示数 ...
- ajax的分页查询
(1)先写个显示数据的页面,分页查询需要那几个部分呢? 1.首先是查询的文本框输入,还有查询按钮,那么就开始写代码吧 1 2 3 4 <div> <input type=" ...
- jquery ajax json简单的分页，模拟数据，没有封装，只显示原理
简单的分页,模拟数据,没有封装,显示原理,大家有兴趣可以自己封装,这里只是个原理过程,真正的分页也差不多是这个原理,只是请求数据不太一样,html部分: <!TOCTYPE HTML> & ...
- 利用Linq + Jquery + Ajax 异步分页的实现
在Web显示的时候我们经常会遇到分页显示,而网上的分页方法甚多,但都太过于消耗带宽,所以我想到了用Ajax来分页,利用返回的Json来处理返回的数据, 大大简化了带宽的压力. 先说下思路,无非就是异步 ...
- Datatables插件1.10.15版本服务器处理模式ajax获取分页数据实例解析
一.问题描述 前端需要使用表格来展示数据,找了一些插件,最后确定使用dataTables组件来做. 后端的分页接口已经写好了,不能修改.接口需要传入页码(pageNumber)和页面显示数据条数(pa ...
- Struts2+Jquery实现ajax并返回json类型数据
来源于:http://my.oschina.net/simpleton/blog/139212 摘要 主要实现步骤如下: 1.JSP页面使用脚本代码执行ajax请求 2.Action中查询出需要返回的 ...
随机推荐
- 【文件处理】xml 文件 DOM解析
一.Java解析xml.解析xml四种方法.DOM.SAX.JDOM.DOM4j.XPath 此文针对其中的DOM方法具体展开介绍及代码分析 sax.dom是两种对xml文档进行解析的方法(没有具体实 ...
- 用for循环计算(1-3+5-7...99)的结果(两种方法)
1) sum=0 count=1 for i in range(1,100,2): if count % 2==0: sum = sum - i else: sum = sum + i count = ...
- 绑定host域名 修改手机hosts域名
windows: C:\Windows\System32\drivers\etc\hosts # 在这儿输入你需要绑定的 hosts 116.31.72.421129 bro-user.flyme.c ...
- 是时候用Coffeescript了
CoffeeScirpt是什么? CoffeeScript是一门小巧的语言脚本语言,会编译为JavaScript,并且CoffeeScript产生的JavaScript是可以通过JavaScript ...
- MVC4.0 bug 神奇的是事情 bool 值变成了 onclick ,非常奇怪的
foreach (var item in ViewBag.PhotoGroupList) { // 这里很奇怪 item.IS_DISPLAY 是布尔值 如果直接写 @item.IS_DISPLAY ...
- LINQ to Entities 不识别方法“System int string 转换的问题
这个问题困扰了挺久,网上找了挺多方法 都太好使. 分几种情况. 1.如果查询结果 转换,那比较容易. var q = from c in db.Customers where c.Country == ...
- WebIDE
1 1 1 WebIDE 是什么? WebIDE 是 一款在线集成开发环境( Integrated Development Environment ). 开发者只需要一个浏览器就可以编写代码,并在We ...
- 【bzoj1511】[POI2006]OKR-Periods of Words KMP-next数组
原文地址:http://www.cnblogs.com/GXZlegend/p/6827027.html 题目描述 一个串是有限个小写字符的序列,特别的,一个空序列也可以是一个串. 一个串P是串A的前 ...
- 项链 [FFT]
题面 思路 这题很像bzoj4827礼物 还是一样的思路,我们把$y$倍长,$y[i+k]=y[i]+n$ 然后令$f(s,c)$表示从$y$的第$s$个开始匹配,位置偏移量为$c$的答案 可以得到$ ...
- BZOJ2594 [Wc2006]水管局长数据加强版 【LCT维护最小生成树】
题目 SC省MY市有着庞大的地下水管网络,嘟嘟是MY市的水管局长(就是管水管的啦),嘟嘟作为水管局长的工作就是:每天供水公司可能要将一定量的水从x处送往y处,嘟嘟需要为供水公司找到一条从A至B的水管的 ...