JSP/PHP基于Ajax的分页功能实现
2014-01-06 21:13
2001 查看
最近JSP课程实训,然后自己做了一个新闻后台控制台。新闻列表的展示如果不用页面部分刷新(Ajax)来做的话,翻页的时候会重刷新页面(感觉很难看··),所以决定根据书上的例子+搜索的代码用Ajax来实现分页功能,顺便搞了个用PHP实现的 :)
JSP
· 在JavaBean中实现数据库连接和格式化(JSON)从数据库查询到的数据
public UserDAO() { //连接数据库连接 Connection conn; Statement state; ResultSet rs; if (conn == null) { try { Class.forName("com.mysql.jdbc.Driver"); //数据库使用MySQL.加载驱动 conn = DriverManager.getConnection("jdbc:mysql://localhost/DBname", "userName", "pwd"); } catch (Exception e) { e.printStackTrace(); } } } public String getUsers() { //格式化数据 StringBuffer sb = new StringBuffer(); sb.append("{newsList:["); try { if (conn == null) System.out.println("can not connection Database!"); state = conn.createStatement(); rs = state.executeQuery("select * from news"); while (rs.next()) sb.append("{title:'" + rs.getString("title") + "',content:'" + rs.getInt("content") + "'},"); sb.delete(sb.length() - 1, sb.length()); sb.append("]}"); } catch (SQLException e) { e.printStackTrace(); } finally { try { rs.close(); state.close(); } catch (SQLException e) { e.printStackTrace(); } } return sb.toString(); }
· 声明XMLHttpRequest对象
// JavaScript Document function createXMLHttpRequest() { var xmlHttp=false; if (window.ActiveXObject) { //在IE浏览器中创建XMLHttpRequest对象 try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch(ee) { xmlHttp=false; } } } else if (window.XMLHttpRequest) { //在非IE浏览器中创建XMLHttpRequest对象 try { xmlHttp = new XMLHttpRequest(); } catch(e) { xmlHttp=false; } } return xmlHttp; }
· index.html
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script language="javascript" src="xmlhttp.js"></script><!-- 引入创建了XMLHttpRequest对象的JS文件 --> <script language="javascript"> var xmlhttp; var pageSize=5; //每页显示5条记录 var totalPage; //总页数 var totalRs; //总记录数 var jsonObj=new Object(); function go() { xmlhttp=createXMLHttpRequest(); //调用创建XMLHttpRequest对象的方法 xmlhttp.onreadystatechange=callback; //设置回调函数 xmlhttp.open("post","index.jsp"); //向服务器端发送请求 xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8"); xmlhttp.send(null); //设置发送参数 } function callback() //对服务器端传回的JSON数据进行解析 { if(xmlhttp.readyState==4) { if(xmlhttp.status==200) { jsonObj=eval("("+xmlhttp.responseText+")"); //获得从服务器端返回的数据 totalRs=jsonObj.userList.length; totalPage=Math.ceil(totalRs/pageSize); splitPage(1); } } } function splitPage(currPage) //调用addRow方法输出表格格式的数据到页面 { while(document.getElementById("newsList").rows.length>1) document.getElementById("newsList").deleteRow(); var end; if(currPage<1) currPage=1; end=currPage*pageSize; if(currPage>=totalPage) { currPage=totalPage; end=totalRs; } var begin=currPage*pageSize-pageSize; for(var j=begin;j<end;j++) addRow("center",jsonObj.newsList[j].title,jsonObj.newsList[j].content); document.getElementById("dh").innerHTML="<a href='#' onclick='splitPage(1)'>首页</a> <a href='#' onclick='splitPage("+eval(currPage-1)+")'>上一页</a> <a href='#' onclick='splitPage("+eval(currPage+1)+")'>下一页</a> <a href='#' onclick='splitPage("+totalPage+")'>尾页</a>"; } function addRow(align,n1,n2) { var tt=document.getElementById("newsList"); var newRow=tt.insertRow(); for(var c=1;c<3;c++) { var newCell=newRow.insertCell(); newCell.align=align; newCell.innerHTML=eval("n"+c); } } </script> </head> <body background="" onload="go()"> <center><h2>数据分页显示</h2></center> <table width="250" border="1" id="newsList" align="center"> <tr><td align="center">标题</td><td align="center">内容</td></tr> </table> <table width="250" border="0" align="center"> <tr><td colspan="2" align="center" id="dh"></td></tr> </table> </body> </html>
· index.jsp
<%@ page language="java" import="java.util.*,com.*" pageEncoding="UTF-8"%> <% UserDAO ud=new UserDAO(); //实例化JavaBean out.print(ud.getUsers()); %>
p.s: 效果图就是经常看到的在网页下面的那种分页栏··
PHP
· index.php
<html> <head> <script> function viewpage(p){ if(window.XMLHttpRequest){ var xmlReq = new XMLHttpRequest(); } else if(window.ActiveXObject) { var xmlReq = new ActiveXObject('Microsoft.XMLHTTP'); } var formData = "page="+p; xmlReq.onreadystatechange = function(){ if(xmlReq.readyState == 4){ document.getElementById('content2').innerHTML = xmlReq.responseText; } } xmlReq.open("post", "resultPage.php", true); xmlReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlReq.send(formData); return false; } </script> <head> <body onload="viewpage(1)"> <img src="" width="100%"> <h3 align="center">数据分页显示</h3> <div id="content2"></div> </body> </html>
· resultPage.php
<?php header("Content-Type:text/html;charset=GB2312"); $pagesize=3; $db=mysql_connect("localhost", "userName", "pwd") or die("数据库链接错误");//创建数据库连接 mysql_query("set character set gbk"); mysql_select_db("newsList"); $result = mysql_query("Select count(DISTINCT id) FROM ".news_list); $myrow = mysql_fetch_array($result); $numrows=$myrow[0]; $pages=intval($numrows/$pagesize); if ($numrows%$pagesize) $pages++; if (isset($_POST['page'])) { $page=intval($_POST['page']); } else { //设置为第一页 $page=1; } $first=1; $prev=$page-1; $next=$page+1; $last=$pages; //计算记录偏移量 $offset=$pagesize*($page - 1); //读取指定记录数 $result=mysql_query("select * from ".news_list." GROUP BY `id` order by id desc limit $offset,$pagesize"); $num = mysql_num_rows($result); while ($row = mysql_fetch_array($result,MYSQL_NUM)) { $title[] = $row[0]; $content[]=$row[1]; } echo "<TABLE style=\"MARGIN-BOTTOM: 20px\" cellSpacing=0 cellPadding=0 width=90% border=1 align=center>\n"; echo "<TBODY>\n"; echo "<th>标题</th><th>内容</th>"; for($a=0;$a<$num;$a++) { echo "<TR>\n"; echo "<TD style=\"PADDING-TOP: 5px\" align=left>".$title[$a]."</TD>"; echo "<TD style=\"PADDING-TOP: 5px\" align=left>".$content[$a]."</TD>"; echo "</TR>"; } echo "</TR></TBODY></TABLE>\n"; echo "<TABLE style=\"MARGIN-TOP: 30px\" cellSpacing=0 cellPadding=0 width=\"100%\""; echo "border=0>"; echo "<TBODY><TR><TD colSpan=3 height=20>"; echo "<DIV align=center>"; echo "<P align=left><FONT color=red>第".$page."页/总".$pages."页 | 总".$numrows."条</FONT> | "; if ($page>1) echo "<a onclick=\"viewpage(".$first.")\" href='#'>首页</a> | "; if ($page>1) echo "<a onclick=\"viewpage(".$prev.")\" href='#'>上页</a> | "; if ($page<$pages) echo "<a onclick=\"viewpage(".$next.")\" href='#'>下页</a> | "; if ($page<$pages) echo "<a onclick=\"viewpage(".$last.")\" href='#'>尾页</a>"; echo " 转到第 <INPUT maxLength=3 size=3 value=1 name=goto_page> 页 <INPUT hideFocus onclick=\"viewpage(document.all.goto_page.value)\" type=button value=Go name=cmd_goto>"; echo "</P></DIV></TD></TR></TBODY></TABLE>"; ?>
以上。
相关文章推荐
- 利用JQuery方便实现基于Ajax的数据查询、排序和分页功能
- PHP实现的消息实时推送功能【基于反ajax推送】
- PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
- JQuery实现基于Ajax的数据查询、排序和分页功能
- 利用JQuery方便实现基于Ajax的数据查询、排序和分页功能
- 基于PHP实现数据分页显示功能
- 利用JQuery方便实现基于Ajax的数据查询、排序和分页功能
- PHP实现的消息实时推送功能【基于反ajax推送】
- php基于SQLite实现的分页功能示例
- 利用JQuery方便实现基于Ajax的数据查询、排序和分页功能
- thinkPHP5框架实现基于ajax的分页功能示例
- 基于PHP实现数据分页显示功能
- AJAX和JSP实现的基于WEB的文件上传的进度控制代码第1/2页
- 基于PHP的AJAX技术实现文件异步上传
- 用ajax实现分页 删除功能(三)
- AJAX+JSP实现基于WEB的文件上传的进度控制,作者:刘作晨
- ajax实现无刷新分页(php)
- 基于php&mysql实现聊天室功能的代码实例分享
- jQuery+Ajax+PHP+Mysql实现分页显示数据
- php+ajax+xml 实现无刷新分页