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中查询出需要返回的 ...
随机推荐
- 理解JAVA与C的运行机制
1.java的运行机制 java的编译过程,将java的源程序(扩展名为.java的文件),由java编译程序将java的字节码文件(.class文件)在jvm上运行,机器码有cpu运行, jvm编译 ...
- ISCSI网络存储
ISCSI(iSCSI,Internet Small Computer System Interface) iSCSI技术实现了物理硬盘设备与TCP/IP网络协议的相互结合,使得用户可以通过互联网方便 ...
- 15.2，redis发布订阅
发布publish 订阅subscribe Redis 通过 PUBLISH . SUBSCRIBE 等命令实现了订阅与发布模式. 举例1: qq群的公告,单个发布者,多个收听者 发布/订阅 实验 发 ...
- NetCore log4net 集成以及配置日志信息不重复显示或者记录
NetCore log4net 集成,这是一个很常见而且网上大批大批的博文了,我写这个博文主要是为了记录我在使用过程中的一点小收获,以前在使用的过程中一直没有注意但是其实网上说的不清不楚的问题. 官方 ...
- 《数据结构与算法分析：C语言描述》复习——第四章“树”——二叉树
2014.06.14 22:49 简介: 二叉树是学习树结构时接触的第一个概念,其他衍生的表示形式包括N叉树(随便多少叉).二叉链表(土话也叫左孩子右兄弟).由于单纯的二叉树是无序的,能做的事情不太多 ...
- 《Cracking the Coding Interview》——第11章：排序和搜索——题目3
2014-03-21 20:55 题目:给定一个旋转过的升序排序好的数组,不知道旋转了几位.找出其中是否存在某一个值. 解法1:如果数组的元素都不重复,那么我的解法是先找出旋转的偏移量,然后进行带偏移 ...
- 小程序使用Canvas画饼图
先上效果图 -------------------------------------------------------------wxml代码开始------------------------- ...
- python之列表/元组/字典/字符串
一.列表 格式:list = ['xxx','xxx','xxx'] 性质:可以修改列表内容 copy用法: import copy names = ['] names01 = names #直接引用 ...
- css3实现圆角边框渐变
<button class="border">112233</button> 创建button .border{ position: relative; b ...
- httpclient传参类型与响应参数接收
https://blog.csdn.net/qq_26562641/article/details/72817457 https://blog.csdn.net/chenjf0221/article/ ...