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中查询出需要返回的 ...
随机推荐
- 笔记-git-基础使用
笔记-git-基础使用 1. git相关概念 工作区(Working Directory): 就是在电脑里能看到的目录,init后的当前目录就是一个工作区: 版本库(Repository): ...
- PHP.31-TP框架商城应用实例-后台7-商品会员修改-页面优化，多表数据更新
商品表修改功能 1.页面优化,类似添加页面 <layout name="layout" /> <div class="tab-div"> ...
- Struts2---配置文件讲解及简单登录示例
bean 用于创建一个JavaBean实例 constant 用于Struts2默认行为标签 <!-- 配置web默认编码集,相当于HttpServletRequest.setChartacte ...
- 2.ifconfig
转载http://www.cnblogs.com/peida/archive/2013/02/27/2934525.html 许多windows非常熟悉ipconfig命令行工具,它被用来获取网络接口 ...
- PKUWC 2018 彻底滚粗记
PKUWC 2018 彻底滚粗记 如果你们有看到我又在颓, 请以这篇文章让我回忆起这不堪回首的往事. day -3 据说我们要参加PKUWC? 谢总要求我们练习面试,写个稿子. 不知道为什么,有一种不 ...
- Java课程目录
Java课程目录 1 年前 大家收藏一下这篇文章,这是所有课程的目录. 第一周: 第一课:进制及计算机表示 第二课:进制习题课,进一步介绍进制的知识 第三节课:Java语言的品味(一),通过stati ...
- 【Neural Network】林轩田机器学习技法
首先从单层神经网络开始介绍 最简单的单层神经网络可以看成是多个Perception的线性组合,这种简单的组合可以达到一些复杂的boundary. 比如,最简单的逻辑运算AND OR NOT都可以由多 ...
- window.parent 、window.top及window.self 详解
在应用有frameset或者iframe的页面时,parent是父窗口,top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe),self是当前窗口. 1. window.self ...
- bat批处理 批量导出多个APK的AAPT信息(含python实现)
产品APP因架构调整,将一个APK拆分成了十几个APK,这样每次打ROM前,都要一个个核对APK的AAPT信息 一个个APK去敲命令很繁琐,想到可以用BAT批处理调用AAPT命令一次将十几个APK的A ...
- 板载raid 安装Ubuntu 黑屏
最近有碰到过产线反馈supermicro x10主板板载raid安装ubuntu桌面版 ,出现安装完成后黑屏,现象是能正常识别faker raid 但是第一次重启,就会出现黑屏,只有左上角广光标在闪, ...