Ajax 实现分页及表与表的级联

最新推荐文章于 2025-08-10 15:01:52 发布

最新推荐文章于 2025-08-10 15:01:52 发布 · 148 阅读

文章标签：

#Ajax #JavaScript #IE #J# #Firefox #ViewUI

java编程专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了如何使用Ajax技术实现公司职工表的分页查询，并解决了部门表与职工表之间的级联显示问题，通过创建jsp页面和编写相关Java代码来实现这一功能。

Ajax 实现分页及表与表的级联

时间过的真快转眼间有快到周末了，真向往每周周末的时光。今天我们的项目经理是不是头脑发热，让我用ajax实现公司职工表的增，删，改，查，分页查询；着实让我头疼；经理之命不可违啊，写了一天终于完成了；今天想把实现分页的方法写在博客中和大家交流交流。

首先，我对数据中的表进行了分析：

如图

经过分析表中有个deptnoo 部门编号字段与数据库中的dept（如图）表相对应及将表中的编号换成部门名称，所以此处要实现表与表的级联

主要实现代码如下

这里我主要写ajax实现代码

首先将数据封装，（bean）让后写业务实现层(dao)，在些逻辑实现层(service)；及MCV框架开发，大家都熟悉吧这就不多说了。

再创建一个jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme() + "://"

+ request.getServerName() + ":" + request.getServerPort()

+ path + "/";

%>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>">

 

<title>worker.jsp</title>

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0">

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="This is my page">

<script src="./js/util.js" type="text/javascript"></script>

<script src="./js/emp.js" type="text/javascript"></script>

<script type="text/javascript">

window.onload = function() {

    //

$("addemp").style.display = "none";

$("upemp").style.display="none";

}

</script>

</head>

<body>

<h1>

 用户查询的请求

</h1>

<input type="button" value="查询所有用户" onclick="selectEmp()" />

 

<div id="content">

<table border="1px" cellpadding="0" cellspacing="0">

<caption>

员工信息表

</caption>

<thead>

<tr>

<th>

编号

</th>

<th>

姓名

</th>

<th>

岗位

</th>

<th>

入职时间

</th>

<th>

领导

</th>

<th>

薪水

</th>

<th>

奖金

</th>

<th>

部门

</th>

<th>

  操作

</th>

</tr>

</thead>

<tbody id="listemps">

 

</tbody>

</table>

</div>

 

<div id="pageinfo">

       <a href="javascript:getPageInfo(1)">首页</a>

       <a href="javascript:getPageInfo(2)" >上一页</a>

       <a href="javascript:getPageInfo(3)">下一页</a>

       <a href="javascript:getPageInfo(4)">末页</a>

</div> 

</body>

</html>

Ajax代码

  var empdoc ;

function getPageInfo(mark) {

    

    var nowpage = empdoc.getAttribute("nowpage");

var countpage = empdoc.getAttribute("countpage"); 

 

switch (mark) {

case 1:

nowpage=1;

break;

case 2:

nowpage--;

break;

case 3:

nowpage++;

break;

case 4:

nowpage=countpage;

break;

}

 

//获取xhr对象

var xhr = getXhr();

//封装请求信息

xhr.open("get", "./listEmp.do?nowpage="+nowpage, true);

//发送请求

xhr.send();

//根据服务器端传递xhr.readyState触发的事件进行处理

xhr.onreadystatechange = function() {

//根据readyState是否处理完毕,status服务是否返回成功

if (xhr.readyState == 4 && xhr.status == 200) {

//获得xml的document对象

var doc = xhr.responseXML;

//获取xml文件的跟标签

      var root = doc.documentElement;

     //获取跟标签的所有子节点

      var emps = root.childNodes;    

//获取tbody对象

var listemps = document.getElementById("listemps");

listemps.innerHTML = "";

for ( var i = 0; i < emps.length; i++) {

//判断该节点是否是元素节点,目的兼容IE firefox opera 浏览器

if (emps[i].nodeType == 1) {

var emptr = document.createElement("tr");

//获取该节点下面的所有子节点

var empcs = emps[i].childNodes;

for ( var j = 0; j < empcs.length; j++) {

var emptd = document.createElement("td");

//判断该节点是否是元素节点,目的兼容IE firefox opera 浏览器

if (empcs[j].nodeType == 1) {

emptd.appendChild(document

.createTextNode(empcs[j].firstChild.nodeValue));

emptr.appendChild(emptd);

}

}

var dutd = document.createElement("td");

emptr.appendChild(dutd);

listemps.appendChild(emptr);

}

 

}

 

}

}

 

 

}

Servlet中定义nowpage,countpage

 String npage = request.getParameter("nowpage");

int nowpage = 1;

if (npage == null) {

} else {

nowpage = Integer.valueOf(npage);

}

 

// 创建业务对象

EmpServiceImpl esi = new EmpServiceImpl();

int countrecord = esi.getCountRecord();

 

int countpage = countrecord % EmpServiceImpl.PAGESIZE == 0 ? countrecord

/ EmpServiceImpl.PAGESIZE

: countrecord / EmpServiceImpl.PAGESIZE + 1;

 

if(nowpage<=1){

nowpage=1;

}

 

if(nowpage>=countpage){

nowpage=countpage;

}

 

List<Emp> emps = esi.findNowPageInfo(nowpage);

 

// 如果以xml数据返回响应 必须设置头位如下方式,并且放在响应的第一行

response.setContentType("text/xml;charset=UTF-8");

PrintWriter out = response.getWriter();

out.println("<?xml version='1.0' encoding='UTF-8'?>");

out.println("<emps nowpage='" + nowpage + "' countpage='" + countpage

+ "'>");

for (Emp emp : emps) {

out.println("<emp>");

out.println("<empno>" + emp.getEmpno() + "</empno>");

out.print("<ename>" + emp.getEname() + "</ename>");

out.println("<job>" + emp.getJob() + "</job>");

out.print("<hiredate>" + emp.getHiredate() + "</hiredate>");

out.println("<mgr>" + emp.getMgr() + "</mgr>");

out.print("<sal>" + emp.getSal() + "</sal>");

out.print("<comm>" + emp.getComm() + "</comm>");

out.print("<deptno>" + emp.getDeptno() + "</deptno>");

out.println(" </emp>");

}

 

out.println("</emps>");

out.flush();

out.close();

在实现表与表的级联时就要将dept数据查询，然后利用ajax创建option添加到select中去

      <tr>

       <td>部门:</td>

        <td>

        <select name ="deptno" id="deptno">

      <option value="10">请选择部门</option>

    </select>

        </td>

      </tr>

Ajax代码

  function listDepts(doc, value) {

//获取根节点

var root = doc.documentElement;

//获取根节点的子节点

var depts = root.childNodes;

 

//获取HTML dom 对象

var deptnos = document.getElementById("deptno");

//遍历

for ( var i = 0; i < depts.length; i++) {

 

//判读是否是元素节点,目的是兼容各个浏览器

if (depts[i].nodeType == 1) {

var dptoption = document.createElement("option");

var eles = depts[i].childNodes;

for ( var j = 0; j < eles.length; j++) {

if (eles[j].nodeType == 1) {

if (j == 0) {

if (value == eles[j].firstChild.nodeValue) {

dptoption.setAttribute("selected", true);

}

dptoption.setAttribute("value",

eles[j].firstChild.nodeValue);

} else if (j == 1) {

dptoption.appendChild(document

.createTextNode(eles[j].firstChild.nodeValue));

}

}

 

}

deptnos.appendChild(dptoption);

}

}

 

}