HTML利用JQ实现AJAX无刷新翻页

jquery

2010-04-19 16:07

HTML
--------------------------------------------------------------------------------------------------------------
<script language="javascript" type="text/javascript" src="/js/jq.js"></script>

<table width="98%" border="0" cellspacing="0" cellpadding="0" align="center">
<form action="/search.php" method="get" id="searchForm">
<tr>
<td width="66"><strong>游戏类型</strong>:</td>
<td><select name="type">

<OPTION selected value="0">全部类型</OPTION>
<option value="RPG" >RPG</option>
<option value="TAB" >TAB</option>
</select>
</td><td width="66">
<strong>所属地区</strong>:</td>
<td><select name="add">
<option value="0" selected>全部地区</option>
<OPTION value="1">大陆</OPTION>
<OPTION value="2">欧美</OPTION>
<OPTION value="3">港台</OPTION>
</select></td>
<td width="66"><strong>字母检索</strong>:</td>
<td><select name="abc"><option value="" selected>不限</option>
<OPTION value="A">A</OPTION>
<OPTION value="B">B</OPTION>
<OPTION value="C">C</OPTION>
</select></td>
<td width="66"><strong>排序方式</strong>:</td>
<td><select name="order">
<OPTION selected value="0">全部类型</OPTION>
<OPTION value="f">按评分</OPTION>
<OPTION value="d">按上市时间</OPTION>
<OPTION value="r">游戏热度</OPTION>
</select></td>
<td align="right">

<input type="image" src="/_lib/search_button.jpg" width="88" height="34"></td>
</tr>
</form>
</table><div id="content"></div>            显示列表容器
<div id="page" ></div> 显示分页码容易<form action="" method="get" id="FromPage"></form>
<script type="text/javascript">
      $(document).ready(function()
      {
       var options = {target: '#content'}; //设置容器
       $('#FromPage,#searchForm').ajaxForm(options);  //绑定设置
$("#content").load('/search.php'); //载入信息
      });

</script>     php 动态产生.<ul>
<li>111111111111</li>
<li>22222222222</li>
<li>333333333333</li>
</ul>

<div id="pager" style="display:none">
<a href='search.php?1'>1</a>
<a href='search.php?2'>2</a>
<a href='search.php?2'>3</a>
</div>

<script type="text/javascript">

    $('#page').html($('#pager').html());
$("#page a").click(function() //绑定事件
{ $('#FromPage').attr("action", $(this).attr("href"));//设置提交URL
$('#FromPage').submit(); return false; //提交
});
</script>