Ajax+smarty技术实现无刷新分页

 更新时间:2016年03月11日 08:55:43   作者:IT小小海   我要评论
这篇文章主要介绍了Ajax+smarty技术实现无刷新分页的相关资料,需要的朋友可以参考下

这里运用Smarty模板,更简单

本文主要的技术:AJAX,PHP,Smarty,另外自己封装了一个很简单的类

类:

  (function(){
function $(id) {
return document.getElementById(id);
}
$.init=function() {
try{return new XMLHttpRequest();}catch(e){};
try{return new ActiveXObject('Microsoft.XMLHTTP');}catch(e){}
alert('请更换浏览器');
}
$.get=function (url,data,callback,type) {
var xhr = this.init();
url += '?' +new Date().getTime();
if(data!=null){
url += '&'+data;
}
xhr.open('get',url);
xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status == 200){
if(type==null){
callback(xhr.responseText);
}
if(type == 'text'){
callback(xhr.responseText);
}
if(type == 'xml'){
callback(xhr.responseXML);
}
if(type == 'json'){
callback(eval("("+xhr.responseText+")"));
}
}
}
xhr.send(null);
}

$.post = function (url,data,callback,type) {
var xhr = this.init();
xhr.open('post',url);
xhr.setRequestHeader('Content-Type','Application/x-www-form-urlencoded');
xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status == 200){
if(type==null){
callback(xhr.responseText);
}
if(type == 'text'){
callback(xhr.responseText);
}
if(type == 'xml'){
callback(xhr.responseXML);
}
if(type == 'json'){
callback(eval("("+xhr.responseText+")"));
}
}
}; 
xhr.send(data);
}

 类很简单,不介绍了

HTML:

  window.onload=function () {
init(2);
}
function del(id,p){
$.get('del.php','id='+id,function(msg){
if(msg==1){
init(p);
}
})
}
function init(p) {
$.get('page.php','page='+p,function(msg){
$('result').innerHTML=msg;
});
}

PHP:

<?php
header('content-type:text/html;charset=utf-8');
mysql_connect('localhost','root','root');
mysql_select_db('db2');
mysql_query('set names utf8');
$re=mysql_query('select count(*) as num from catgory');
$hang=mysql_fetch_assoc($re);
$row1=$hang['num'];
$page=isset($_GET['page'])? $_GET['page']:1;
$pagesize=2;
$total=ceil($row1/$pagesize);
$prev=$page-1;
$next=$page+1;
if($prev<1){$prev=1;}
if($next>$total){$next=$total;}
$offset = ($page-1)*$pagesize;
$result=mysql_query("select * from catgory limit ".$offset.','.$pagesize);
$ct=mysql_num_rows($result);
$data=array();
for($i=0;$i<$ct;$i++){
$r=mysql_fetch_assoc($result);
$data[]=$r;
}
include('libs/Smarty.class.php');
$Smarty=new Smarty();
$Smarty->assign('data',$data);
$Smarty->assign('page',$page);
$Smarty->assign('pagesize',$pagesize);
$Smarty->assign('total',$total);
$Smarty->assign('prev',$prev);
$Smarty->assign('next',$next);
$Smarty->assign('row1',$row1);
$str=$Smarty->fetch('page.html');
echo $str;

Smarty:

    <table border="1" rules="all" width="600">
<tr>
<td>编号</td>
<td>品牌</td>
<td>pid</td>
<td>删除</td>
</tr>
{foreach from=$data item='value'}
<tr>
<td>{$value['id']}</td>
<td>{$value['name']}</td>
<td>{$value['pid']}</td>
<td><a href="#", onclick="del({$value['id']},{$page})">删除</td>
</tr>
{/foreach}
<tr>
<td colspan="3">
共{$total}页
第{$page}页
<a href="#", onclick="init({$prev})">上一页</a>
<a href="#", onclick="init({$next})">下一页</a>
<a href="#", onclick="init(1)">第一页</a>
<a href="#", onclick="init({$total})">最末页</a>
共{$row1}条数据
每页{$pagesize}条数据
</td>
</tr>
</table>

要引入smary模板

以上所述是小编给大家介绍的Ajax+smarty技术实现无刷新分页,希望对大家有所帮助!

相关文章

  • ajax JSONP请求处理回调函数jsonpCallback区分大小写

    ajax JSONP请求处理回调函数jsonpCallback区分大小写

    使用ajax进行 JSONP跨域请求,因为被请求的对方的回调函数名称是无法修改,想到设置AJAX 的JSONP参数。但是发现根本不起作用。最后偶然发现 jsonpcallback是区分大小写的
    2013-09-09
  • AjaxSubmit()提交file文件

    AjaxSubmit()提交file文件

    这篇文章主要介绍了AjaxSubmit()提交file文件的实例讲解,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-02-02
  • ajax跨域获取网站json数据的实例

    ajax跨域获取网站json数据的实例

    下面小编就为大家分享一篇ajax跨域获取网站json数据的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • ajax实现用户名校验的传统和jquery的$.post方式(实例讲解)

    ajax实现用户名校验的传统和jquery的$.post方式(实例讲解)

    下面小编就为大家分享一篇ajax实现用户名校验的传统和jquery的$.post方式的实例讲解,具有很好的参考价值,希望对大家有所帮助
    2017-12-12
  • ajax和jsonp跨域的原理本质详解

    ajax和jsonp跨域的原理本质详解

    跨域问题是我们在开发中经常会遇到的一个需求,下面这篇文章主要给大家介绍了关于ajax和jsonp跨域的原理本质,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-11-11
  • 在layer弹出层中通过ajax返回html拼接字符串填充数据的方法

    在layer弹出层中通过ajax返回html拼接字符串填充数据的方法

    这篇文章主要介绍了在layer弹出层中通过ajax返回html拼接字符串填充数据的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • 利用iframe实现ajax跨域通信的实现原理(图解)

    利用iframe实现ajax跨域通信的实现原理(图解)

    一般情况下都是用在同一域下的ajax请求;但是如果请求是发生在不同的域下,请求就无法执行,并且会抛出异常提示不允许跨域请求,接下来介绍利用iframe实现ajax跨域通信感兴趣的朋友可以了解下,或许对你学习ajax跨域有所帮助
    2013-02-02
  • ajax跨域访问报错501的解决方法

    ajax跨域访问报错501的解决方法

    这篇文章主要为大家详细介绍了ajax跨域访问报错501的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • Ajax获取响应内容长度的方法

    Ajax获取响应内容长度的方法

    这篇文章主要介绍了Ajax获取响应内容长度的方法,涉及Ajax调用成功后返回方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • 如何利用jQuery post传递含特殊字符的数据

    如何利用jQuery post传递含特殊字符的数据

    在jquery中,解决数据传递处理的方法我们通常利用$.ajax或$.post,但是这里这里通常不能传递特殊字符,比如说:“<”,本文就帮大家解决如何传递这种含特殊字符的数据,感兴趣的朋友一起看下吧
    2015-10-10

最新评论