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

这里运用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无刷新分页
smarty分页不刷新
ajax实现局部刷新分页、ajax实现无刷新分页、ajax无刷新分页、tp框架ajax无刷新分页、php ajax无刷新分页,以便于您获取更多的相关知识。

时间: 2024-10-29 00:13:40

Ajax+smarty技术实现无刷新分页_AJAX相关的相关文章

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

实例代码讲解ajax实现的无刷新分页_AJAX相关

1.Ajax 无刷新页面的好处:提供良好的客户体验,通过 Ajax 在后台从数据库中取得数据并展示,取缔了等待加载页面而出现的空白状态: 2.那么,Ajax 无刷新页面是运行在动态页面(.php)?还是静态页面(.html/.htm/.shtml)?答案是:静态页面: 3.实现原理:通过前端 JS 脚本程序与 Ajax 相结合取得从动态页面返回的数据,并显示. 现在什么都讲究一个无刷新,就连分页也是如此,下面是小编日常整理的关于一段无刷新代码,希望能够帮到大家. 代码如下: 一.html代码部分

AJAX打造博客无刷新搜索_AJAX相关

如果你对AJAX不是很了解,可以先看看这篇教程:<AJAX初体验之上手篇>. 现在博客很流行,相信应该上网时间稍微长点的朋友都会在这或者在那的有一个自己的博客.对于一些有一定能力的朋友,可能更喜欢自己去下载一个博客程序来架设一个自己的博客,而不是使用一些博客网站提供的服务.而大部分博客程序所带的搜索功能是提交查询关键字到搜索页面,然后在后台生成搜索结果,再呈现给用户,这过程之中浪费了一些带宽,如博客的侧边栏.要节约这一些带宽,我们可以用AJAX来打造自己的无刷新日志搜索. 在本篇教程中,数据库

SERVLET+AJAX如何按类别无刷新分页?请大侠赐教,在线等.

问题描述 SERVLET+AJAX如何按类别无刷新分页?请大侠赐教,在线等. 解决方案 public class Controller extends HttpServlet { protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String s = req.getParameter("a"); resp.setCo

Flash &amp; Ajax 操作 XML 实例:无刷新分页

ajax|xml|分页|刷新|无刷新 其实标题只是一个噱头罢了,只是想谈一下,Javascript 与 Actionscript 是如何操作XML的. 希望能帮助一些只用 Javascript  或 只懂 Actionscript 的朋友,了解两者的相同与不同之处. Flash 与 后台连接有许多种,Actionscript 调用 XML() 算是比较简单的一种了, 而Javascript 调用 xmlHttp ,便形成了现在很流行的Ajax了. 现在就用一个网上常出现的分页效果来对 Flash

菜鸟蔡之Ajax复习第三篇(Ajax之无刷新登录)_AJAX相关

好了,还是和以前一样,先建一个Login.html页面吧,用于填写登录信息,然后再建一个DealData.aspx页面吧(当然,这里用一般处理程序是最好的了:*.ashx),用来处理数据用的. 在login.html页面中其代码如下: 复制代码 代码如下: <head> <title>无刷新登录</title> <script src="Scripts/jquery-1.4.1.js" type="text/javascript&qu

AJAX初体验之实战篇——打造博客无刷新搜索_AJAX相关

如果你对AJAX不是很了解,可以先看看这篇教程的前篇<AJAX初体验之上手篇>. 现在博客很流行,相信应该上网时间稍微长点的朋友都会在这或者在那的有一个自己的博客.对于一些有一定能力的朋友,可能更喜欢自己去下载一个博客程序来架设一个自己的博客,而不是使用一些博客网站提供的服务.而大部分博客程序所带的搜索功能是提交查询关键字到搜索页面,然后在后台生成搜索结果,再呈现给用户,这过程之中浪费了一些带宽,如博客的侧边栏.要节约这一些带宽,我们可以用AJAX来打造自己的无刷新日志搜索. 在本篇教程中,数

asp.net 全部选中与取消操作,选中后的删除(ajax)实现无刷新效果_AJAX相关

前台代码 复制代码 代码如下: :<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.

jquery分页插件jquery.pagination.js实现无刷新分页_jquery

本文实例为大家分享了jquery分页插件实现无刷新分页的相关代码,供大家参考,具体内容如下 1.使用插件为 jquery.pagination.js ,如果没有这个js文件的话,我可以给发个. 首先引用 jquery.pagination.js (分页js),跟pagination.css(分页样式css). 点击获取查看这两个文件 2.页面js代码为 <script type="text/javascript"> var pageIndex = 0; //页面索引初始值