AJax技术

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

字号+ 作者:H5之家 来源:H5之家 2016-03-15 15:00 我要评论( )

Ajax+smarty技术实现无刷新分页,这里运用Smarty模板,更简单本文主要的技术:AJAX,php,Smarty,另外自己封装了一个很简单的类类: (function(){function$(id){r

这里运用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 rules="all">
<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="#",>删除</td>
</tr>
{/foreach}
<tr>
<td colspan="3">
共{$total}页
第{$page}页
<a href="#",>上一页</a>
<a href="#",>下一页</a>
<a href="#",>第一页</a>
<a href="#",>最末页</a>
共{$row1}条数据
每页{$pagesize}条数据
</td>
</tr>
</table>
要引入smary模板

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

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: Ajax、XML、HTML、PHP、浏览器、数据、删除、Head、品牌、

分页:12

转载请注明
本文标题:Ajax+smarty技术实现无刷新分页
本站链接:
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。

登录后可拥有收藏文章、关注作者等权限...

   注册     登录

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Can You Now Trust Google To Crawl Ajax Sites?

    Can You Now Trust Google To Crawl Ajax Sites?

    2015-11-19 15:49

  • ajax实现文件下载

    ajax实现文件下载

    2015-11-13 11:20

  • 人人都会的35个Jquery小技巧

    人人都会的35个Jquery小技巧

    2015-10-28 16:26

  • JavaScript权威设计--jQuery,Ajax.animate,SVG(简要学习笔记二十)[完结篇]

    JavaScript权威设计--jQuery,Ajax.animate,SVG(简要学习笔记二十)[完

    2015-10-28 08:39

网友点评
2