怎么用smarty+php+ajax实现简单无刷新分页功能
这篇文章主要介绍“怎么用smarty+php+ajax实现简单无刷新分页功能”，在日常操作中，相信很多人在怎么用smarty+php+ajax实现简单无刷新分页功能问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用smarty+php+ajax实现简单无刷新分页功能”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
成都创新互联公司是专业的乐亭网站建设公司，乐亭接单;提供网站建设、成都网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行乐亭网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
简介
分页，无非就是从数据库中获得我们想查询的数据，再加以处理即可！
① 确定数据总数($count)
② 每页显示数据条数($pageSize)
③ 分多少页($pageCount)
④ 上一页($pagePrev)
⑤ 下一页($pageNext)
⑥ 判断越界问题
⑦ 偏移量($offset)
⑧ sql语句($sql = "select * from goods limit $offset,$pageSize";)
简单归简单，我们还得考虑实际的应用。例如：如果你正在土豆网看《火影忍者》，下面一个评论吸引了你，你点击“下一页”后整个页面都刷新，我勒个去，《火影忍者》也刷没了，只能再从头开始看，这样的情况是不是令你十分厌恶。再想想，如果当你点击“下一页”时，只有评论的部分刷新，你的视频根本没有受到影响，那是不是很完美呢！
想要无刷新，第一个想到Ajax;前台都是HTML+JS,后台php+smarty组合，那我们就直接进入主题：
文件结构
① Smarty模板文件 官网地址：http://www.smarty.net/
② /templates 自定义的文件夹 page.htpl模板文件，用于存放分页数据及链接
③ page.html 前台显示页面 js触发
④ page.php 数据库处理 smarty数据处理
⑤ public.js Ajax对象的封装
程序流程
① 前端page.html传递page参数（不传递后台页面也会默认赋值）
（前端主要的作用：显示、发出Ajax请求）
② php页面数据库操作，$sql分页语句查询出分页所需的数据
③ 载入smarty模板，将参数assign传递到page.htpl模板页
④ 模板页导入数据、遍历数据 将上、下页加入超链接及js事件
⑤ smarty fetch()方法读取模板页数据 赋值给变量 变量再响应给Ajax客户端
⑥ 前台接收
代码
page.html
无刷新分页
function display(page){
$.get('page.php','page='+page,function(msg){
$('content').innerHTML = msg;
});
}
window.onload = function(){
display(1);
};
public.js
(function(){
//1、用于得到一个DOM元素
//定义了一个$函数 作用域有局部
var $ = function(id){
return document.getElementById(id);
};
//2、用于得到一个Ajax对象
//将$看作函数对象，init为属性，值为函数体
$.init = function(){
try{return new XMLHttpRequest()}catch(e){}
try{return new ActiveXObject('Microsoft.XMLHTTP')}catch(e){}
alert('请更改新浏览器！');
};
//用于发送Ajax get请求 $.get = function(url,data,callback,type){
var xhr = $.init();
if (data != null){//传递参数、只发出请求
url = url+'?'+data;
}
xhr.open('get',url);
xhr.setRequestHeader('If-Modified-Since','0');//解决get缓存问题
xhr.onreadystatechange = function(){
if (xhr.readyState == 4 && xhr.status == 200){
//当没有指定传值类型时，默认为字符串
if (type == null){
type = 'text';
}
//判断语句指定三种接收形式
if (type == 'text'){
callback(xhr.responseText);
}
if (type == 'xml'){
callback(xhr.responseXML);
}
if (type == 'json'){
callback(eval("("+xhr.responseText+")"));
}
}
};
xhr.send(null); };
//增大其作用域全局变量 window方法的$属性 赋值为$ 闭包写法
window.$ = $;
})();
page.php
$pageCount) $pageNext = $pageCount;
if ($page < 1) $page = 1; //判断当前页页码越界
if ($page > $pageCount) $page = $pageCount;
$offset = ($page -1)*$pageSize; //偏移量
//相对于当前页来讲的
$sql = "select * from sw_goods limit $offset,$pageSize"; //order by id asc 默认/desc
$result = mysql_query($sql);//查询那一页的结果集
$num = mysql_num_rows($result);
$data = array();
for ($i=0;$i<$num;$i++){
//遍历五次，每次获得一个数组array('good_id'=>'','goods_name'=>'','goods_price'=>'')
//形成一个二维数组
$data[] = mysql_fetch_assoc($result);
}
mysql_close();
//***************************************************************************
include('Smarty/Smarty.class.php');
$smarty = new Smarty();
$smarty -> assign('data',$data);
$smarty -> assign('count',$count);
$smarty -> assign('pageCount',$pageCount);
$smarty -> assign('page',$page);
$smarty -> assign('pagePrev',$pagePrev);
$smarty -> assign('pageNext',$pageNext);
$smarty -> assign('pageCount',$pageCount);
$str = $smarty -> fetch('page.htpl');//获取模板里面的数据，赋值给变量，再传递给Ajax 对象
header("content-type:text/html;charset=gb2312");
echo $str; page.htpl
*{
margin:0px;
padding:0px;
}
body{
text-align:center;
}
table{
width:650px;
margin:0px auto;
margin-top:20px;
}
tr{
background-color:#ffffff;
height:30px;
font-size:12px;
}
| 序号 |
商品名称 |
商品价格 |
商品数量 |
{foreach from = $data item = 'value'}
| {counter} |
{$value['goods_name']} |
{$value['goods_price']} |
{$value['goods_number']} |
{/foreach}
共{$count}条数据
共{$pageCount}页
当前第{$page}页
首页
上一页
下一页
末页
最后的分页效果：
到此，关于“怎么用smarty+php+ajax实现简单无刷新分页功能”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！
当前标题：怎么用smarty+php+ajax实现简单无刷新分页功能
URL地址：
http://kswjz.com/article/iishhi.html
