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中查询出需要返回的 ...
随机推荐
- 使用perl发邮件
如果你使用的是 window 系统,没有 sendmail 工具.这时你就可以使用 perl 的 MIME:Lite 模块作为邮件客户端来发送邮件. 这里我们直接用 cpan 来安装(需要 root ...
- spark练习--mysql的读取
前面我们一直操作的是,通过一个文件来读取数据,这个里面不涉及数据相关的只是,今天我们来介绍一下spark操作中存放与读取 1.首先我们先介绍的是把数据存放进入mysql中,今天介绍的这个例子是我们前两 ...
- 15，Flask-Script
Flask-Script 从字面意思上来看就是 Flask 的脚本 是的,熟悉Django的同学是否还记得Django的启动命令呢? python manager.py runserver 大概是这样 ...
- [Jenkins]持续集成环境下fingbug插件的安装使用与配置
参考:https://wiki.jenkins.io/display/JENKINS/FindBugs+Plugin 突然,天降杂事.我是想安安静静的做个美丽的测试...但是事与愿违,项目经理叫我帮忙 ...
- P1395 会议（求树的重心）
P1395 会议 题目描述 有一个村庄居住着n个村民,有n-1条路径使得这n个村民的家联通,每条路径的长度都为1.现在村长希望在某个村民家中召开一场会议,村长希望所有村民到会议地点的距离之和最小,那么 ...
- HEXO next live2d插件删除问题
title: HEXO next live2d插件删除问题 date: 2018-03-06 13:09:12 updated: tags: [hexo,next,建站,学习,前端技术,疑问] des ...
- 如何使用API创建OpenStack虚拟机？
在安装时OpenStack会加载配置信息.有不同的虚拟机模板而且与在Amazon EC2以及其他平台上看到的完全一样.这些配置是内存.vCPU.磁盘容量等的组合,定义了虚拟机的大小及容量.可以使用如下 ...
- python - web自动化测试 - 元素操作 - 鼠标键盘
# -*- coding:utf-8 -*- ''' @project: web学习 @author: Jimmy @file: 鼠标操作.py @ide: PyCharm Community Edi ...
- day01--python基础1
# 01讲 - Windows下执行程序,必须加 PYTHON.在LINUX下,可以不指明是PYTHON.但是,执行钱许给予hello.py执行权限. - 其次,只要变成可执行程序,必须第一行事前 ...
- 放映PPT幻灯片演示文稿如何让演讲者备注不投影到屏幕上(转载)
ps files/ps.rar 放映PPT幻灯片演示文稿如何让演讲者备注不投影到屏幕上 如题,在PPT幻灯片的演示文稿中加入演讲者备注(使用PPT讲座时苦于有时会忘记一些要讲的数字,文字等),但是在 ...