Php+Ajax实现翻页效果

字体大小: 中小 标准 ->行高大小: 标准
最近在看《征服Ajax》这本书,里面的例子后台都是用.net的,但是我自己不懂.net,就php会一点,所以决定把看过的例子后台用php重新写好了。。这个是里面的第一个例子,第12章 服务器端编程里的例子,比较简单。 
  1.系统描述

  现在假设要进行翻页的是一个留言版的所有留言,结果中仅显示标题,并提供按标题进行关键字查询的功能。数据库是page_turning,留言表info,有四个字段,id,title,content,date。

  现在要实现的功能包括: 

  a:使用ajax异步获取某页数据,从而实现无刷新显示。

  b:提供查询功能,并能够对查询结果同样有分页效果。 

  2.客户端设计

  a:页面结构

  界面由两个部分构成,一个是查询用的表单,一个是用于显示结果的表格结构,如图: 


  这段代码中,form1用于让用户输入关键字进行查询,表单中<span>标记用于提示用户正在和服务器通信,查询按钮的单击事件被设置为"getPage(1)",即获取第一页的数据。

  b:设计Ajax逻辑

  Ajax逻辑的目的在于向服务器端发起异步请求,并将请求的结果显示于页面,由服务器端直接生成表格形式的留言列表,在客户端仅需要将其直接加入到内容容器(<div id='content'>); 

代码:

var content = document.getElementById('content');
var tip = document.getElementById('tip');
function getPage(page)
{

var key = document.forms.form1.title.value;
if(key != '') 
{
tip.style.display = 'inline';
//将请求发送到后台,connection函数的作用是发送ajax请求,show函数作为回调函数,内容以text的方式返回
connection('show.php?&page='+page+'&key='+key,show,'Text');
}
else alert('You should enter a key before searching');
}

function show(text)
{
content.innerHTML = '';
tip.style.display = 'none';
content.innerHTML = text;

}

function showContent(id)
{
window.open("showContent.php?&id="+id);
}

  这段代码里,getPage(page)函数,把key和需要的第几页传递到后台去查询,查询结束后返回,在show函数里处理,即show函数里把传回来的结果显示在div中。

  showContent(id)函数,根据留言的id,显示留言的内容。 

  3.服务器端设计

  页面是show.php,它接受从客户端传过来的key,page参数,根据关键字和需要显示的页码,来决定要显示的留言信息。如果显示的不是第一页,在最下面的显示页码的一栏里没有第一页这一项,否则有,如果显示的不是最后一页,在最下面的显示页码的一栏里没有下一页这一项。

  具体内容:

<?php
pageSize = 10;
key = _GET['key']; //关键字
page = _GET['page']; //第几页

include 'http://www.cnblogs.com/../conn_forphp/conn.php'; //连接数据库的文件
mysql_select_db("page_turning") or die("Could not select database");

query = "select * from info where title like '%key%'";
result = mysql_query(query) or die("Query failed : " . mysql_error()); 

counts = mysql_num_rows(result); //一共搜索到多少条记录

pageNum = floor(counts/pageSize)+1; //一共有多少页

strHTML = ''; //要插入的html语句
strHTML .= "<table></tbody>";
if(counts >= 0)
{
numInfront = pageSize * (page-1);
query1 = "select * from info where title like '%key%' limit numInfront,pageSize";
result1 = mysql_query(query1) or die("Query failed:".mysql_error());
counts1 = mysql_num_rows(result1);
strHTML .= "<tr><td class='title'>标题</td><td class='modifyDate'>修改时间</td></tr>";
while(item = mysql_fetch_row(result1))
{
strHTML .= "<tr><td class='title' onclick='javascript:showContent(item[0])'>item[1]</td><td class='modifyDate' >item[3]</td></tr>";

}

strHTML .= "</tbody></table>";

strHTML .= '<br>';

if(page != 1)
{
strHTML .= "<a href='javascript:getPage(1)' title = '第1页'>第一页</a>";
}
for(i=1; i<=pageNum; i++)
{
strHTML .= "<a href='javascript:getPage(".i.")' title = '第i页'>[i]</a>";

}
if(page != pageNum)
{
strHTML .= "<a href='javascript:getPage(".(page+1).")' title = 第'page+1'页>下一页</a>";
}
echo strHTML;

}
mysql_close();
?>


下面是封装好的connection函数

   function createXmlHttpRequest(url)
{
var xmlHttp;
try
{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(E)
{
xmlHttp = false;
}
}

if(!xmlHttp && typeof XMLHttpRequest != "undefined")
{
xmlHttp = new XMLHttpRequest();
}
return xmlHttp;
}

function connection(url,fun,style)
{
//alert(fun);
var xmlHttp = createXmlHttpRequest();
var xmlDoc;
xmlHttp.onreadystatechange = function()
{
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
if(style == "Text")
{
xmlDoc = xmlHttp.responseText;
}
else if(style == "XML")
{
xmlDoc = xmlHttp.responseXML;
}

var fun1 = fun;
fun1(xmlDoc);
}
}
};
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
//alert(this.xmlDoc);
//return xmlDoc;
}

此文章由 www.phpgz.com 收集整理 ,地址为: http://www.phpgz.com/htmls/971.html

大屏阅读,大屏评论.