`
yaasshole
  • 浏览: 659017 次
文章分类
社区版块
存档分类
最新评论

根据ajax发送数据,从servelt中读取xml数据并显示,实现查询、删除和分页

 
阅读更多

根据ajax发送数据,从servelt中读取xml数据并显示,实现查询、删除和分页

首先我们必须知道ajax发送的几个步骤,我们以以下解析的为例:当点击查询按钮的时候要从数据库中查询出所有数据,并用xml读取,在查询的同时实现分页,并且可以在右边操作的时候可以实现删除,通过删除所选项和删除全部选的,也就是批量删除,下面我们来实现吧!

首先从数据库中读取,用ajax的方式来请求并用xml读取显示在jsp页面,使用ajax要先创建xmlHttpRequest,为:

//创建xmlHttpRequest对象

function createXMLHttpRequest() {

var xmlHttp;

try {

//在firefox opera等非浏览器中运行的

xmlHttp = new XMLHttpRequest();

} catch (ex) {

try {

//在IE中运行 运行的是第二个版本

xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");

} catch (e) {

// 在IE中运行第一个版本

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

}

}

return xmlHttp;

}

所使用的html为:(以下的都用此html)

<body>

<div align="center">

<h1>

员工信息

</h1>

<br />

<input type="button" value="查询员工" id="btnEmp" />

<br />

<br />

<br />

<div id="list">

<table id="empList" border="1px">

<thead>

<tr>

<th>

序号

</th>

<th>

姓名

</th>

<th>

性别

</th>

<th>

年龄

</th>

<th>

出生日期

</th>

<th>

薪资

</th>

<th>

<input type="checkbox" id="chk" />

<input type="button" value="删除所选项 " id="delBtn" />

</th>

</tr>

</thead>

<tbody id="emps"></tbody>

</table>

</div>

<div id="pages">

</div>

</div>

</body>

当点击value为查询员工,id为btnEmp时,触发的事件,先创建xmlHttpRequest对象,并通过ajax来传给 servlet的几个步骤为:

第一步:在jsp页面开始创建xmlHttpRequest对象,并向servlet发送请求

Window.onload = function(){

//第一步:初始化xmlHttpRequest对象

var xmlHttp = createXMLHttpRequest();

//第二步:为请求设置参数

xmlHttp.open("GET", "./delEmployeeServlet.do?ids=" + ids

+ "&timeStamp=" + new Date().getTime(), true);

//第三步:发送请求

xmlHttp.send(null);

}

第二步:查询所有并响应到jsp页面 EmployeeServlet

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

private EmployeeService employeeServlet = new EmployeeServiceImpl();

//设置编码字符集

response.setCharacterEncoding("utf-8");

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

List<Employee> entities = employeeServlet.findAll();

PrintWriter out = response.getWriter();

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

out.println("<emps>");

for (int i = 0; i < entities.size(); i++) {

Employee entity = entities.get(i);

out.println("<emp id='" + entity.getId() + "'>");

out.println("<name>" + entity.getHrName() + "</name>");

out.println("<sex>" + entity.getHrSex() + "</sex>");

out.println("<age>" + entity.getHrAge() + "</age>");

out.println("<birth>" + entity.getHrBirth() + "</birth>");

out.println("<salary>" + entity.getHrSalary() + "</salary>");

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

}

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

out.flush();

out.close();

}

第三步:响应到jsp页面

//得到向tBody里面添加的节点

var empsHtmlNodes = document.getElementById("emps");

//获取到按钮的节点

var btnEmpNode = document.getElementById("btnEmp");

//当点击按钮的时候触发的事件

btnEmpNode.onclick = function() {

//每次点击的时候都会触发,所以要清除,只剩一次点击就可以了,此方法看第四步的上面

clearNodes(empsHtmlNodes);

//ajax回应后的信息调用onreadystatechange这个属性

xmlHttp.onreadystatechange = function() {

if (xmlHttp.readyState == 4) {

if (xmlHttp.status == 200) {

//获取xmlDocuemnt

var xmlDoc = xmlHttp.responseXML;

//获取xmlDoc中标签为emp的

var emps = xmlDoc.getElementsByTagName("emp");

//通过循环得到emp下的属性

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

var empsNode = emps[i];

//创建tr

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

//创建td

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

//把获得的属性发到td中 tdNode1.appendChild(document.createTextNode(emps[i]

.getAttribute("id")));

//把td放到tr中

trNode.appendChild(tdNode1);

//获取emp下的子标签的属性

var empElemtNode = empsNode.childNodes;

//通过循环获得文本并发到tr中

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

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

//创建动态增加的属性的td

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

//获取元素节点下面的text value

var textValue = empElemtNode[j].firstChild.nodeValue;

//alert(textValue);

//把获取到的值放到td2

tdNode2.appendChild(document

.createTextNode(textValue));

trNode.appendChild(tdNode2);

}

}

}

//调用分页的实现

pagesNode(pagesHtmlNode, rootNode);

}

}

}

xmlHttp.open("GET", "./employeeServlet.do?timeStamp="

+ new Date().getTime(), true);

xmlHttp.send(null);

}

//清空节点的方法

function clearNodes(node) {

var lens = node.childNodes.length;

for ( var i = 0; i < lens; i++) {

node.removeChild(node.childNodes[0]);

}

}

第四步:实现分页,首先写一下分页类 Page.java

package cn.csdn.hr.HibernateUtil;

import java.util.List;

public class Page {

// 封装分页信息

// 设置每页显示的记录数

public static final Integer PAGESIZE = 3;

private Integer nowPage;// 当前页

private Integer countPage;// /总页数

private Integer countSize;// 总记录数

private List datas;// 当前页的信息

public Page() {

}

public Page(String className, Integer nowPage) {

this.nowPage = nowPage;

// 先获取总记录数

this.setCountSize(HibernateUtil.getSession().createQuery(

"from " + className).list().size());

// 总页数

this.countPage = this.countSize % PAGESIZE == 0 ? this.countSize

/ PAGESIZE : this.countSize / PAGESIZE + 1;

// 获取当前页的信息

this.setDatas(HibernateUtil.getSession().createQuery(

"from " + className).setFirstResult(

(this.nowPage - 1) * Page.PAGESIZE).setMaxResults(PAGESIZE)

.list());

}

public Integer getNowPage() {

return nowPage;

}

public void setNowPage(Integer nowPage) {

this.nowPage = nowPage;

}

public Integer getCountPage() {

return countPage;

}

public void setCountPage(Integer countPage) {

this.countPage = countPage;

}

public Integer getCountSize() {

return countSize;

}

public void setCountSize(Integer countSize) {

this.countSize = countSize;

}

public List getDatas() {

return datas;

}

public void setDatas(List datas) {

this.datas = datas;

}

public static Integer getPagesize() {

return PAGESIZE;

}

public static void main(String[] args) {

Page page = new Page("Employee", 2);

System.out.println(page.getCountPage() + " " + page.getCountSize());

}

}

从Page.java类中可以得到所有的属性和想得到的当前页的信息等

当在查询的时候就应该分页,所以以上的servlet有一下变动,为:

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

response.setCharacterEncoding("utf-8");

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

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

System.out.println(npage);

int nowPage = 1;

if ("".equals(npage) || npage == null) {

System.out.println("不能操作");

} else {

nowPage = Integer.parseInt(npage);

}

Page page = new Page("Employee", nowPage);

List<Employee> entities = page.getDatas();

PrintWriter out = response.getWriter();

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

out.println("<emps nowPage='" + page.getNowPage() + "' countPage='"

+ page.getCountPage() + "' countSize='" + page.getCountSize()

+ "'>");

for (int i = 0; i < entities.size(); i++) {

Employee entity = entities.get(i);

out.println("<emp id='" + entity.getId() + "'>");

out.println("<name>" + entity.getHrName() + "</name>");

out.println("<sex>" + entity.getHrSex() + "</sex>");

out.println("<age>" + entity.getHrAge() + "</age>");

out.println("<birth>" + entity.getHrBirth() + "</birth>");

out.println("<salary>" + entity.getHrSalary() + "</salary>");

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

}

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

out.flush();

out.close();

}

从servlet中可以看出得到了当前页信息,并且得到了当前页所需要的:

nowPage(当前页),countPage(总页数),总记录数(countSize),并转换为了xml数据

第五步:读取xml文件中的属性并分页

当我们实现分页的时候必须要创建首页,下一页,上一页,末页,在创建的时候因为在window加载的时候就查询,并且在每一次创建要重复(每一个上下页之后都应该有),所以把它提取到一个方法里面,传几个需要的参数即可:方法为:

//分页的实现

var pagesHtmlNode = document.getElementById("pages");

var rootNodes = xmlDoc.documentElement;

function pagesNode(pagesHtmlNode, rootNode) {

///获取当前页

var nowPage = rootNode.getAttribute("nowPage");

//获取总页数

var countPage = rootNode.getAttribute("countPage");

//获取总记录数

var countSize = rootNode.getAttribute("countSize");

var MsgNode = document.createTextNode("当前是:" + nowPage + "页,总页数为:"

+ countPage + ",总共:" + countSize + "条记录 ");

//清空节点

clearNodes(pagesHtmlNode);

var firstPage = document.createElement("a");

firstPage.setAttribute("href", "#");

firstPage.appendChild(document.createTextNode("首页"));

firstPage.onclick = function() {

nowPage = 1;

//查询 当前页信息

getPageInfo(nowPage);

}

pagesHtmlNode.appendChild(firstPage);

var backPage = document.createElement("a");

backPage.setAttribute("href", "#");

backPage.appendChild(document.createTextNode("上一页"));

backPage.onclick = function() {

nowPage = eval(nowPage + "-" + 1);

if (nowPage <= 1) {

nowPage = 1;

}

//查询 当前页信息

getPageInfo(nowPage);

}

pagesHtmlNode.appendChild(backPage);

var nextPage = document.createElement("a");

nextPage.setAttribute("href", "#");

nextPage.appendChild(document.createTextNode("下一页"));

nextPage.onclick = function() {

//eval使加号变成+

nowPage = eval(nowPage + "+" + 1);

if (nowPage >= countPage) {

nowPage = countPage;

}

//查询 当前页信息

getPageInfo(nowPage);

}

pagesHtmlNode.appendChild(nextPage);

var lastPage = document.createElement("a");

lastPage.setAttribute("href", "#");

lastPage.appendChild(document.createTextNode("末页"));

lastPage.onclick = function() {

nowPage = countPage;

//查询 当前页信息

getPageInfo(nowPage);

}

pagesHtmlNode.appendChild(lastPage);

pagesHtmlNode.appendChild(MsgNode);

}

在上下页之后要查询出所指定的当前有对应的信息,也封装到一个方法中,用来方便调用

//分页代码

function getPageInfo(nowPage) {

/*//修改chksHtmlNode的默认值

var chksHtmlNode = document.getElementById("chk");

chksHtmlNode.checked = null;*/

//修改chksHtmlNode 为 默认值

var chksHtmlNode = document.getElementById("chk");

chksHtmlNode.checked = null;

var pagesHtmlNode = document.getElementById("pages");

var empsHtmlNodes = document.getElementById("emps");

//第一步:初始化xmlHttpRequest对象

var xmlHttp = createXMLHttpRequest();

clearNodes(empsHtmlNodes);

xmlHttp.onreadystatechange = function() {

if (xmlHttp.readyState == 4) {

if (xmlHttp.status == 200) {

//获取xmlDocuemnt

var xmlDoc = xmlHttp.responseXML;

//获取跟标签

var rootNodes = xmlDoc.documentElement;

var emps = xmlDoc.getElementsByTagName("emp");

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

var empsNode = emps[i];

//设置id在td中

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

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

tdNode1.appendChild(document.createTextNode(emps[i]

.getAttribute("id")));

trNode.appendChild(tdNode1);

var empElemtNode = empsNode.childNodes;

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

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

//获取元素节点下面的text value

var textValue = empElemtNode[j].firstChild.nodeValue;

//创建动态增加的属性的td

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

//把获取到的值放到td2

tdNode2.appendChild(document

.createTextNode(textValue));

trNode.appendChild(tdNode2);

}

}

var delchk = document.createElement("input");

delchk.setAttribute("type", "checkbox");

delchk.setAttribute("name", "delchk");

delchk.setAttribute("value", emps[i].getAttribute("id"));

trNode.appendChild(delchk);

empsHtmlNodes.appendChild(trNode);

}

//调用分页创建分页相关的node节点对象

pagesNode(pagesHtmlNode, rootNode);

}

}

}

xmlHttp.open("GET", "./employeeServlet.do?nowPage=" + nowPage

+ "&timeStamp=" + new Date().getTime(), true);

xmlHttp.send(null);

}

注:在写时候千万要注意别写错代码了,受不了,错了一个,找了半天

删除的操作

删除的时候可以在右上角写上复选框,当点击的时候可以全选和全不选,在向表格中插入数据的时候插入复选框,代码为:

var delchk = document.createElement("input");

delchk.setAttribute("type", "checkbox");

delchk.setAttribute("name", "delchk");

delchk.setAttribute("value", emps[i].getAttribute("id"));

trNode.appendChild(delchk);

empsHtmlNodes.appendChild(trNode);

当点击chk获取的节点的时候,实现全选和全不选

//实现全选和反选的效果

var chksHtmlNode = document.getElementById("chk");

//注册事件

chksHtmlNode.onclick = function() {

var delchksNode = document.getElementsByName("delchk");

if (chksHtmlNode.checked) {

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

delchksNode[i].checked = "checked";

}

} else {

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

delchksNode[i].checked = null;

}

}

}

当点击删除按钮的时候要请求servlet层,通过ajax请求,这里提到了批量删除,用字符串拼接,来发送:

//实现删除

var delHtmlBtn = document.getElementById("delBtn");

//点击删除的时候 发送ajax请求

delHtmlBtn.onclick = function() {

var ids = "";

var delchksNode = document.getElementsByName("delchk");

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

if (delchksNode[i].checked) {

ids += delchksNode[i].value + ",";

}

}

//用ajax来发送请求

//第一步:初始化xmlHttpRequest对象

var xmlHttp = createXMLHttpRequest();

clearNodes(empsHtmlNodes);

xmlHttp.onreadystatechange = function() {

//alert("ff");

if (xmlHttp.readyState == 4) {

if (xmlHttp.status == 200) {

//获取xmlDocuemnt

var xmlDoc = xmlHttp.responseXML;

//获取跟标签

var rootNodes = xmlDoc.documentElement;

var emps = xmlDoc.getElementsByTagName("emp");

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

var empsNode = emps[i];

//设置id在td中

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

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

tdNode1.appendChild(document.createTextNode(emps[i]

.getAttribute("id")));

trNode.appendChild(tdNode1);

//alert(emps[i].getAttribute("id"));

var empElemtNode = empsNode.childNodes;

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

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

//获取元素节点下面的text value

var textValue = empElemtNode[j].firstChild.nodeValue;

//alert(textValue);

//创建动态增加的属性的td

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

//把获取到的值放到td2

tdNode2.appendChild(document

.createTextNode(textValue));

trNode.appendChild(tdNode2);

}

}

empsHtmlNodes.appendChild(trNode);

}

//调用分页创建分页相关的node节点对象

pagesNode(pagesHtmlNode, rootNode);

}

}

}

xmlHttp.open("GET", "./delEmployeeServlet.do?ids=" + ids

+ "&timeStamp=" + new Date().getTime(), true);

xmlHttp.send(null);

}

}

获取的servelt为:

private EmployeeService employeeService = new EmployeeServiceImpl();

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

String ids = request.getParameter("ids");

System.out.println(ids+"=============");

String value[] = ids.split(",");

for(int i = 0;i<value.length;i++){

Employee entity = employeeService.findById(Integer.parseInt(value[i]));

employeeService.remove(entity);

}

request.getRequestDispatcher("/employeeServlet.do").forward(request, response);

}

整体的jsp的代码为:

<%@ page language="java" import="java.util.*,cn.csdn.hr.HibernateUtil.*"

pageEncoding="utf-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%

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>My JSP 'employeeList.jsp' starting page</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">

<!--

<link rel="stylesheet" type="text/css" href="styles.css">

-->

</head>

<body>

<div align="center">

<h1>

员工信息

</h1>

<br />

<input type="button" value="查询员工" id="btnEmp" />

<br />

<br />

<br />

<div id="list">

<table id="empList" border="1px">

<thead>

<tr>

<th>

序号

</th>

<th>

姓名

</th>

<th>

性别

</th>

<th>

年龄

</th>

<th>

出生日期

</th>

<th>

薪资

</th>

<th>

<input type="checkbox" id="chk" />

<input type="button" value="删除所选项 " id="delBtn" />

</th>

</tr>

</thead>

<tbody id="emps"></tbody>

</table>

</div>

<div id="pages">

</div>

</div>

</body>

</html>

<!--ajax异步请求 从传过来的 解析成xml文件并在该页面上显示-->

<scripttype="text/javascript">

//页面加载并调用匿名函数

window.onload = function() {

//实现删除

var delHtmlBtn = document.getElementById("delBtn");

//点击删除的时候 发送ajax请求

delHtmlBtn.onclick = function() {

var ids = "";

var delchksNode = document.getElementsByName("delchk");

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

if (delchksNode[i].checked) {

ids += delchksNode[i].value + ",";

}

}

//用ajax来发送请求

//第一步:初始化xmlHttpRequest对象

var xmlHttp = createXMLHttpRequest();

clearNodes(empsHtmlNodes);

xmlHttp.onreadystatechange = function() {

//alert("ff");

if (xmlHttp.readyState == 4) {

if (xmlHttp.status == 200) {

//获取xmlDocuemnt

var xmlDoc = xmlHttp.responseXML;

//获取跟标签

var rootNodes = xmlDoc.documentElement;

var emps = xmlDoc.getElementsByTagName("emp");

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

var empsNode = emps[i];

//设置id在td中

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

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

tdNode1.appendChild(document.createTextNode(emps[i]

.getAttribute("id")));

trNode.appendChild(tdNode1);

//alert(emps[i].getAttribute("id"));

var empElemtNode = empsNode.childNodes;

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

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

//获取元素节点下面的text value

var textValue = empElemtNode[j].firstChild.nodeValue;

//alert(textValue);

//创建动态增加的属性的td

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

//把获取到的值放到td2

tdNode2.appendChild(document

.createTextNode(textValue));

trNode.appendChild(tdNode2);

}

}

empsHtmlNodes.appendChild(trNode);

}

//调用分页创建分页相关的node节点对象

pagesNode(pagesHtmlNode, rootNode);

}

}

}

xmlHttp.open("GET", "./delEmployeeServlet.do?ids=" + ids

+ "&timeStamp=" + new Date().getTime(), true);

xmlHttp.send(null);

}

//实现全选和反选的效果

var chksHtmlNode = document.getElementById("chk");

//注册事件

chksHtmlNode.onclick = function() {

var delchksNode = document.getElementsByName("delchk");

if (chksHtmlNode.checked) {

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

delchksNode[i].checked = "checked";

}

} else {

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

delchksNode[i].checked = null;

}

}

}

var pagesHtmlNode = document.getElementById("pages");

var empsHtmlNodes = document.getElementById("emps");

//第一步:初始化xmlHttpRequest对象

var xmlHttp = createXMLHttpRequest();

//alert(xmlHttp);

var btnEmpNode = document.getElementById("btnEmp");

btnEmpNode.onclick = function() {

clearNodes(empsHtmlNodes);

xmlHttp.onreadystatechange = function() {

//alert("ff");

if (xmlHttp.readyState == 4) {

if (xmlHttp.status == 200) {

//alert("================");

//获取xmlDocuemnt

var xmlDoc = xmlHttp.responseXML;

//alert(xmlDoc);

//获取跟标签

var rootNode = xmlDoc.documentElement;

var emps = xmlDoc.getElementsByTagName("emp");

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

var empsNode = emps[i];

//设置id在td中

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

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

tdNode1.appendChild(document.createTextNode(emps[i]

.getAttribute("id")));

trNode.appendChild(tdNode1);

var empElemtNode = empsNode.childNodes;

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

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

//创建动态增加的属性的td

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

//获取元素节点下面的text value

var textValue = empElemtNode[j].firstChild.nodeValue;

//alert(textValue);

//把获取到的值放到td2

tdNode2.appendChild(document

.createTextNode(textValue));

trNode.appendChild(tdNode2);

}

}

var delchk = document.createElement("input");

delchk.setAttribute("type", "checkbox");

delchk.setAttribute("name", "delchk");

delchk

.setAttribute("value", emps[i]

.getAttribute("id"));

trNode.appendChild(delchk);

empsHtmlNodes.appendChild(trNode);

}

//调用分页的实现

pagesNode(pagesHtmlNode, rootNode);

}

}

}

xmlHttp.open("GET", "./employeeServlet.do?timeStamp="

+ new Date().getTime(), true);

xmlHttp.send(null);

}

}

//分页的实现

function pagesNode(pagesHtmlNode, rootNode) {

///获取当前页

var nowPage = rootNode.getAttribute("nowPage");

//获取总页数

var countPage = rootNode.getAttribute("countPage");

//获取总记录数

var countSize = rootNode.getAttribute("countSize");

var MsgNode = document.createTextNode("当前是:" + nowPage + "页,总页数为:"

+ countPage + ",总共:" + countSize + "条记录 ");

//清空节点

clearNodes(pagesHtmlNode);

var firstPage = document.createElement("a");

firstPage.setAttribute("href", "#");

firstPage.appendChild(document.createTextNode("首页"));

firstPage.onclick = function() {

nowPage = 1;

//查询 当前页信息

getPageInfo(nowPage);

}

pagesHtmlNode.appendChild(firstPage);

var backPage = document.createElement("a");

backPage.setAttribute("href", "#");

backPage.appendChild(document.createTextNode("上一页"));

backPage.onclick = function() {

nowPage = eval(nowPage + "-" + 1);

if (nowPage <= 1) {

nowPage = 1;

}

//查询 当前页信息

getPageInfo(nowPage);

}

pagesHtmlNode.appendChild(backPage);

var nextPage = document.createElement("a");

nextPage.setAttribute("href", "#");

nextPage.appendChild(document.createTextNode("下一页"));

nextPage.onclick = function() {

//eval使加号变成+

nowPage = eval(nowPage + "+" + 1);

if (nowPage >= countPage) {

nowPage = countPage;

}

//查询 当前页信息

getPageInfo(nowPage);

}

pagesHtmlNode.appendChild(nextPage);

var lastPage = document.createElement("a");

lastPage.setAttribute("href", "#");

lastPage.appendChild(document.createTextNode("末页"));

lastPage.onclick = function() {

nowPage = countPage;

//查询 当前页信息

getPageInfo(nowPage);

}

pagesHtmlNode.appendChild(lastPage);

pagesHtmlNode.appendChild(MsgNode);

}

//清空

function clearNodes(node) {

var lens = node.childNodes.length;

for ( var i = 0; i < lens; i++) {

node.removeChild(node.childNodes[0]);

}

}

//创建xmlHttpRequest对象

function createXMLHttpRequest() {

var xmlHttp;

try {

//在firefox opera等非浏览器中运行的

xmlHttp = new XMLHttpRequest();

} catch (ex) {

try {

//在IE中运行 运行的是第二个版本

xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");

} catch (e) {

// 在IE中运行第一个版本

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

}

}

return xmlHttp;

}

//分页代码

function getPageInfo(nowPage) {

/*//修改chksHtmlNode的默认值

var chksHtmlNode = document.getElementById("chk");

chksHtmlNode.checked = null;*/

//修改chksHtmlNode 为 默认值

var chksHtmlNode = document.getElementById("chk");

chksHtmlNode.checked = null;

var pagesHtmlNode = document.getElementById("pages");

var empsHtmlNodes = document.getElementById("emps");

//第一步:初始化xmlHttpRequest对象

var xmlHttp = createXMLHttpRequest();

clearNodes(empsHtmlNodes);

xmlHttp.onreadystatechange = function() {

if (xmlHttp.readyState == 4) {

if (xmlHttp.status == 200) {

//获取xmlDocuemnt

var xmlDoc = xmlHttp.responseXML;

//获取跟标签

var rootNodes = xmlDoc.documentElement;

var emps = xmlDoc.getElementsByTagName("emp");

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

var empsNode = emps[i];

//设置id在td中

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

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

tdNode1.appendChild(document.createTextNode(emps[i]

.getAttribute("id")));

trNode.appendChild(tdNode1);

var empElemtNode = empsNode.childNodes;

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

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

//获取元素节点下面的text value

var textValue = empElemtNode[j].firstChild.nodeValue;

//创建动态增加的属性的td

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

//把获取到的值放到td2

tdNode2.appendChild(document

.createTextNode(textValue));

trNode.appendChild(tdNode2);

}

}

var delchk = document.createElement("input");

delchk.setAttribute("type", "checkbox");

delchk.setAttribute("name", "delchk");

delchk.setAttribute("value", emps[i].getAttribute("id"));

trNode.appendChild(delchk);

empsHtmlNodes.appendChild(trNode);

}

//调用分页创建分页相关的node节点对象

pagesNode(pagesHtmlNode, rootNode);

}

}

}

xmlHttp.open("GET", "./employeeServlet.do?nowPage=" + nowPage

+ "&timeStamp=" + new Date().getTime(), true);

xmlHttp.send(null);

}

</script>

总结:其实抓住了分页的根本就可以写出来,中间出现的问题必须要解决,其中全选和反选也是一个知识点…

分享到:
评论

相关推荐

    JSP下的AJAX分页

    思路是通过Servlet传递当前点击的是第几页。...浏览器读取XML格式中当前的页码。计算上一页和下一页的页码。动态生成显示的内容和更改上一页和下一页的链接中传递给servlet的页码值。如此循环及实现分页功能。

    JAVA上百实例源码以及开源项目

    Java 组播组中发送和接受数据实例 3个目标文件。 Java读写文本文件的示例代码 1个目标文件。 java俄罗斯方块 一个目标文件。 Java非对称加密源码实例 1个目标文件 摘要:Java源码,算法相关,非对称加密  Java非...

    JAVA上百实例源码以及开源项目源代码

    Java 组播组中发送和接受数据实例 3个目标文件。 Java读写文本文件的示例代码 1个目标文件。 java俄罗斯方块 一个目标文件。 Java非对称加密源码实例 1个目标文件 摘要:Java源码,算法相关,非对称加密  Java非...

    java开源包3

    GWT Advanced Table 是一个基于 GWT 框架的网页表格组件,可实现分页数据显示、数据排序和过滤等功能! Google Tag Library 该标记库和 Google 有关。使用该标记库,利用 Google 为你的网站提供网站查询,并且可以...

    java开源包4

    GWT Advanced Table 是一个基于 GWT 框架的网页表格组件,可实现分页数据显示、数据排序和过滤等功能! Google Tag Library 该标记库和 Google 有关。使用该标记库,利用 Google 为你的网站提供网站查询,并且可以...

    Java面试宝典2020修订版V1.0.1.doc

    13、JSP和Servlet中的请求转发分别如何实现? 35 14、JSP乱码如何解决? 36 15、session 和 application的区别? 36 16、jsp有哪些内置对象?作用分别是什么? 36 17、Jsp有哪些动作?作用分别是什么? 37 18、JSP中动态...

    基于J2EE框架的个人博客系统项目毕业设计论文(源码和论文)

    它使用服务层框架可以将JavaBeans从Jsp/Servlet中分离出来,而使用表现层框架则可以将Jsp中剩余的JavaBeans完全分离,这部分JavaBeans主要负责显示相关信息,一般是通过标签库(Taglib)实现,不同框架有不同自己的...

    java开源包1

    GWT Advanced Table 是一个基于 GWT 框架的网页表格组件,可实现分页数据显示、数据排序和过滤等功能! Google Tag Library 该标记库和 Google 有关。使用该标记库,利用 Google 为你的网站提供网站查询,并且可以...

    java开源包11

    GWT Advanced Table 是一个基于 GWT 框架的网页表格组件,可实现分页数据显示、数据排序和过滤等功能! Google Tag Library 该标记库和 Google 有关。使用该标记库,利用 Google 为你的网站提供网站查询,并且可以...

    java开源包2

    GWT Advanced Table 是一个基于 GWT 框架的网页表格组件,可实现分页数据显示、数据排序和过滤等功能! Google Tag Library 该标记库和 Google 有关。使用该标记库,利用 Google 为你的网站提供网站查询,并且可以...

    java开源包6

    GWT Advanced Table 是一个基于 GWT 框架的网页表格组件,可实现分页数据显示、数据排序和过滤等功能! Google Tag Library 该标记库和 Google 有关。使用该标记库,利用 Google 为你的网站提供网站查询,并且可以...

    java开源包5

    GWT Advanced Table 是一个基于 GWT 框架的网页表格组件,可实现分页数据显示、数据排序和过滤等功能! Google Tag Library 该标记库和 Google 有关。使用该标记库,利用 Google 为你的网站提供网站查询,并且可以...

    java开源包10

    GWT Advanced Table 是一个基于 GWT 框架的网页表格组件,可实现分页数据显示、数据排序和过滤等功能! Google Tag Library 该标记库和 Google 有关。使用该标记库,利用 Google 为你的网站提供网站查询,并且可以...

    java开源包8

    GWT Advanced Table 是一个基于 GWT 框架的网页表格组件,可实现分页数据显示、数据排序和过滤等功能! Google Tag Library 该标记库和 Google 有关。使用该标记库,利用 Google 为你的网站提供网站查询,并且可以...

    java开源包7

    GWT Advanced Table 是一个基于 GWT 框架的网页表格组件,可实现分页数据显示、数据排序和过滤等功能! Google Tag Library 该标记库和 Google 有关。使用该标记库,利用 Google 为你的网站提供网站查询,并且可以...

    java开源包9

    GWT Advanced Table 是一个基于 GWT 框架的网页表格组件,可实现分页数据显示、数据排序和过滤等功能! Google Tag Library 该标记库和 Google 有关。使用该标记库,利用 Google 为你的网站提供网站查询,并且可以...

    java开源包101

    GWT Advanced Table 是一个基于 GWT 框架的网页表格组件,可实现分页数据显示、数据排序和过滤等功能! Google Tag Library 该标记库和 Google 有关。使用该标记库,利用 Google 为你的网站提供网站查询,并且可以...

    Java资源包01

    GWT Advanced Table 是一个基于 GWT 框架的网页表格组件,可实现分页数据显示、数据排序和过滤等功能! Google Tag Library 该标记库和 Google 有关。使用该标记库,利用 Google 为你的网站提供网站查询,并且可以...

    Java学习笔记-个人整理的

    {13.5}分页查询}{196}{section.13.5} {13.5.1}MySQL}{198}{subsection.13.5.1} {13.6}连接池}{199}{section.13.6} {13.6.1}Wrapper}{199}{subsection.13.6.1} {13.7}DAO}{199}{section.13.7} {13.8}java.util....

Global site tag (gtag.js) - Google Analytics