jquery中ajax load实例

例如下面iplaysoft网站中这部分的功能。?

你也可以先看看我做的一个小

代码如下	复制代码
Ajax load paperen

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

首先要引入jquery框架

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

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

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

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

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

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

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

再测试看看行不行。

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

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

真的是很不错的前台效果，大家可以回去自己试试,其实看了这么多最简单就是 $("#ajaxload").load("test.php",{'page':page});就可以解决了，比起post,get感觉还要方便啊。