您的位置:首页 > 编程语言 > PHP开发

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>&nbsp;&nbsp;&nbsp;&nbsp;<a href='#' onclick='splitPage("+eval(currPage-1)+")'>上一页</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href='#' onclick='splitPage("+eval(currPage+1)+")'>下一页</a>&nbsp;&nbsp;&nbsp;&nbsp;<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>";

?>


以上。

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  存档 jsp php