- 浏览: 563349 次
- 性别:
-
最新评论
-
getdate：
请问楼主，<property name="co ...
Spring多数据源配置 -
xiaoboo：
...
Yii Framework 开发教程(34) Zii组件-AutoComplete示例 -
m635674608：
这东西一点都不要用，，，还要修改字节码，很麻烦
Spring多数据源配置 -
m635674608：
这东西一点都不要用，，，还要修改字节码，很麻烦
Spring多数据源配置 -
haohao-xuexi02：
...
做有中国特色的程序员
根据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>
总结：其实抓住了分页的根本就可以写出来，中间出现的问题必须要解决，其中全选和反选也是一个知识点…
发表评论
相关推荐
在Java Web开发中，"基于jsp+servlet、使用原生ajax，实现单表增删改查、文件上传、条件查询和分页" 是一个常见的实战项目，非常适合初学者熟悉整个Web应用开发流程。这个项目主要涵盖了以下几个核心知识点： 1. **...
读取（Read）涉及查询和显示数据；更新（Update）允许修改现有记录；删除（Delete）则涉及从数据库中移除记录。在`jsp`和`servlet`中，这些操作通常通过HTTP请求来触发，服务器端的`servlet`处理请求，执行相应的...
思路是通过Servlet传递当前点击的是第几页。...浏览器读取XML格式中当前的页码。计算上一页和下一页的页码。动态生成显示的内容和更改上一页和下一页的链接中传递给servlet的页码值。如此循环及实现分页功能。
在本项目中，可能使用JavaScript和Ajax实现前端分页，同时后端Java代码负责计算总页数、根据页码查询数据等逻辑。 4. **Oracle数据库**：Oracle是一款流行的商业关系型数据库管理系统，用于存储和管理应用程序的...
6. **增删改查（CRUD）操作**：这是任何数据库驱动的应用中最基本的功能，包括创建（Create）、读取（Read）、更新（Update）和删除（Delete）数据。 【标签】"java mysql"进一步指出了项目的主要技术栈： 1. **...
本项目是关于使用Java服务器页面（JSP）和Servlet技术，结合ExtJS前端框架，实现数据的创建（Create）、读取（Read）、更新（Update）和删除（Delete），也就是常说的CRUD操作。这是一个典型的Web应用程序开发示例，...
这里的Servlet方法接收请求参数，查询数据库（如示例中的`findById`方法），并根据结果返回相应的消息。 总结来说，Ajax技术通过JavaScript和XMLHttpRequest对象实现了页面的局部刷新，提升了用户体验，避免了整个...
- JSP中的EL（Expression Language）和JSTL（JavaServer Pages Standard Tag Library）用于简化数据的显示和处理。 - Servlet的生命周期管理，包括初始化、服务、销毁等阶段。 - Ajax库，如jQuery的`$.ajax()`...
定义每页显示的图片数量，根据当前页数计算出从数据库中查询的开始索引和结束索引，然后将这些索引传递给SQL查询语句，只获取当前页的数据。 页面上，我们需要显示页码，用户可以通过点击页码来切换页面。当用户...
在jqGrid的上下文中，Servlet接收来自jqGrid的数据请求，比如分页、排序和过滤数据，然后根据这些参数执行相应的SQL查询。例如，Servlet可能使用PreparedStatement来安全地构建SQL语句，避免SQL注入攻击。 JSP是...
3. **数据序列化与反序列化**：在发送和接收数据时，需要进行JSON或XML的序列化与反序列化操作，以确保数据的正确传输和解析。 **Ajax应用实例** 1. **表单无刷新验证**：在用户输入数据时，使用Ajax实时验证，...
**Ajax 概述** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。...通过对这个项目的学习，开发者可以深入理解Ajax在实际项目中的应用和实现方式。
在本文中，我们将探讨如何使用Struts2和jQuery EasyUI框架创建一个简单的CRUD（创建、读取、更新、删除）系统。首先，我们需要理解这两个技术的基础概念。 Struts2是一个基于MVC（Model-View-Controller）架构的...
public class AjaxServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 处理请求 } } ``` 2. **读取...
例如，Ajax请求可能会发送到一个Java Servlet，后者负责处理请求、查询数据库、执行业务逻辑等，并将结果返回给客户端。 ### 结论 Ajax作为一项重要的Web开发技术，极大地提升了Web应用的性能和用户体验。掌握Ajax...
为此，开发者们广泛利用AJAX（Asynchronous JavaScript and XML）技术，它允许在不重新加载整个网页的情况下，与服务器交换数据并更新部分网页内容。JMESA（Java Message Event Sink阿A）则是一个用于处理和展示结构...
通过XMLHttpRequest对象，Ajax可以向服务器发送异步请求，获取返回的数据，并利用JavaScript更新DOM元素，展示新内容。 2. **Java后端处理**： 在Java中，我们通常使用Servlet、JSP、Spring MVC或者Play Framework...
标题中的"ajax直接jsp里写js发送服务器的请求"指的是使用Ajax技术在JSP页面中通过JavaScript发送异步请求到服务器的过程。Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下更新部分...
Ajax允许在不刷新整个页面的情况下，向服务器发送异步请求并更新部分页面内容，而JSP则作为后端服务器端脚本语言，处理业务逻辑和数据。接下来，我们将深入探讨这两个技术的结合以及在实际开发中的应用。 一、JSP...
4. 实时通信：如聊天室、实时数据显示等。 5. 图形和地图：动态加载、缩放和移动地图元素。 五、Ajax的相关技术 1. JSON（JavaScript Object Notation）：轻量级的数据交换格式，常用于Ajax通信，因为JavaScript...