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中查询出需要返回的 ...
随机推荐
- 笔记-python-多线程-深入-1
笔记-python-多线程-深入-1 1. 线程池 1.1. 线程池:控制同时存在的线程数量 threading没有线程池,只能自己控制线程数量. 基本有两种方式: 每间隔一段时间创建 ...
- TouTiao开源项目 分析笔记7 加载数据的过程
1.以新闻页中的段子数据显示为例 1.1.首先执行InitApp==>SplashActivity. 因为在AndroidManifest.xml中定义了一个<intent-filter& ...
- Android 本应用数据清除管理器DataCleanManager
1.整体分析 1.1.源代码先给出了,可以直接Copy. /** * 本应用数据清除管理器 */ public class DataCleanManager { /** * * 清除本应用内部缓存(/ ...
- PHP.24-TP框架商城应用实例-后台1-添加商品功能、钩子函数、在线编辑器、过滤XSS、上传图片并生成缩略图
添加商品功能 1.创建商品控制器[C] /www.test.com/shop/Admin/Controller/GoodsController.class.php <?php namespace ...
- 3 网格 landing page
0.大框架 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...
- P3817 小A的糖果（洛谷月赛）
P3817 小A的糖果 题目描述 小A有N个糖果盒,第i个盒中有a[i]颗糖果. 小A每次可以从其中一盒糖果中吃掉一颗,他想知道,要让任意两个相邻的盒子中加起来都只有x颗或以下的糖果,至少得吃掉几颗糖 ...
- java 1.7 新io 实践 NIO2
Files 类使用 package com.xinyu.test; import java.io.IOException; import java.nio.ByteBuffer; import jav ...
- python基础----ipython快捷键
Standard Ipython keyboard shortcut • Ctrl -C interrupt currently-executing code • Ctrl- U Discard al ...
- Scrapy使用示例
很多网站都提供了浏览者本地的天气信息,这些信息是如何获取到的呢,方法有很多种,大多是利用某些网站提供的天气api获取的,也有利用爬虫采集的.本文就介绍如何用Scrapy来采集天气信息(从新浪天气频道采 ...
- java 继承小结
[code=java] //多态的经典例子 //向上转型后,父类只能调用子类和父类的共同方法和的重写方法(方法名相同,参数也相同),不能调用重载方法(方法名相同,但参数不同) class A { pu ...