前些日子看到某个网站的前端效果比较不错所以去挖了他的js下来看，发现用了ajax的load事件去实现一些很不错的功能，例如下面iplaysoft网站中这部分的功能。?

201001111263171749?

你也可以先看看我做的一个小DEMO http://paperen.com/demo/ajax-load/

点击每个tab可以转换看到不同的信息内容。下面来看看是怎样实现的吧，其实简单来说需要两个文件就可以了，一个是显示给大家看的它可以是html的也可以是php等动态网页格式（作为框架就是下面的index.html），另一个就必须是一个CGI格式的文件，因为它是用来获得触发并使信息改变的?

首先要引入jquery框架

<script language="javascript" type="text/javascript" src="js/jquery.min.js"></script>

然后在那个index页中放上一个div作为容器，对于容器的选取大家可以根据自己需要就行，也不是非要用div来做，并给它一个id号作为钩子。然后直接写脚本。

<div id="ajaxload">
 <script language="javascript" type="text/javascript">
 $("#ajaxload").load("test.php");//默认让这个div载入test.php的内容
 </script>
 </div>

先来看看可不可以载入test页的东西吧，我们随便在test那个页中写个hello之类的东西。

201001111263183747?

果然这个方法是可以滴，那么我们再来进一步扩展，去实现我们的功能。我们就参照上面那个模板弄吧，当然大家可以发挥自己的想象力去实现别的效果。ajaxload这个div里面的布局大概如下，当然因为这整个div的内容都是来自test页面的，所以在test页中放上下面这个框架就行。?

201001111263185746?

<div id="hello">
<a href="#">message</a>
</div>
<ul class="nav">
<li><a href="#">1</a></li>
</ul>
<div class="c"></div>

然后再写php代码去实现hello那个div中抽取数据库的信息，nav那为页数显示（php代码这里就不放出来了，比较的多，主要要实现读取数据库信息，还有根据页数分页显示数据）。对于分页的功能这里自己也写一下吧，paperen我目前为止还是这样写的。?

$each=5;//定义每页显示数据数
$page=isset($_POST['page']) ? intval($_POST['page']) : 1;//检查是否存在page变量并过滤
$db=new sql();//创建一个对象（这里sql类就不贴出来了，因为比较长而且涉及到一些敏感信息）
$total=$db->getcount("select count(*) from `table`");//获取数据总数
$pagenum=($total%$each==0) ? $total/$each : (int)($total/$each)+1;//并确定页数
$page=($page>$pagenum || $page<=0) ? 1 : $page; //对page变量做进一步正确过滤
$offset=($page-1)*$each;//获得查询的数据位置
$sql="SELECT id,title FROM `table` ORDER BY id Desc LIMIT $offset,$each";//sql语句

然后用一个for循环用来显示页数就行,因为已经知道总页数$pagenum了。

<ul class="nav">
<?php 
for($i=1;$i<=$pagenum;$i++){
?>
<li><a href="javascript:void(0);"></a></li>
<?php
}
?>
</ul>
<div class="c"></div>

再写写css来美化一下页面。效果如下。?

201001111263188560?

还差最后一步了，交互功能的实现，就是我们点击橙色的小点时，上面的信息会随着变化，也是比较重点之处，不知道各位小朋友看到这里有没有什么思路，paperen我是觉得先看看能不能在本index页面获得test页面的元素并接收它的动作吧，我为<li><a href="javascript:void(0);"></a></li>加上一个点击事件

再测试看看行不行。

201001111263189088?

果然可以，嘻嘻这下就好办了。再在这个超链接的click事件用一个函数来处理，在index页面加上一些脚本。

<li><a href="javascript:void(0);" onClick="nextpage(<?=$i?>)"></a></li>
<script language="javascript" type="text/javascript">
$("#ajaxload").load("test.php");
function nextpage(page){
 $("#ajaxload").load("test.php",{'page':page});
}
</script>

注意一下load事件是用post的方法传送数据的，也就是为什么要在test页中用$_POST去接收page这个变量。?

真的是很不错的前台效果，大家可以回去自己试试。