您的位置：首页 > Web前端 > JavaScript

用Ajax实现分页和删除操作的jsp页面源代码

2012-02-27 19:43 519 查看
<%@ 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>My JSP 'index.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">

<div>

<h1>

员工界面

</h1>

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

<div id="showEmps">

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

<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 id="pages"></div>

</div>

</div>

</div>

</body>

</html>

<script type="text/javascript">

<!--

//窗体加载完毕后 触发该函数

window.onload = function() {

//当点击删除操作的时候

var delHtmlBtn = getNode("delBtn");

//注册事件

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 + ",";

}

}

//第一步：创建xmlHttpRequest对象

var xmlHttp = createXMLHttpRequest();

//清空

clearNodes(empsHtmlNode);

xmlHttp.onreadystatechange = function() {

if (xmlHttp.readyState == 4) {

if (xmlHttp.status == 200) {

//获取 xmlDocument

var xmlDoc = xmlHttp.responseXML;

//获取跟标签

var rootNode = xmlDoc.documentElement;

//获取 xml文件中 emp 的所有的元素节点

var emps = xmlDoc.getElementsByTagName("emp"); //emp id="xxx"

//获取 emp 节点里边所有的孩子节点

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

//得到一个具体的emp：

var empNode = emps[i];

//为emp创建一行

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

//创建序号的 td

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

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

.getAttribute("id")));

tr.appendChild(td1);

var elementNodes = empNode.childNodes; //name ,sex ,age

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

//节点是否是元素节点

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

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

td2

.appendChild(document

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

tr.appendChild(td2);

}

}

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

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

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

delchk.setAttribute("value", emps[i]

.getAttribute("id"));

tr.appendChild(delchk);

empsHtmlNode.appendChild(tr);

}

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

pagesNode(pagesHtmlNode, rootNode);

}

}

}

//第二步：规定请求参数

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

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

//第三步：发送请求

xmlHttp.send(null);

}

//实现全选 全部选的效果

var chksHtmlNode = getNode("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 = getNode("pages");

var empsHtmlNode = getNode("emps");

//从服务器端 传递过了xml数据 在这里解析

//第一步：创建xmlHttpRequest对象

var xmlHttp = createXMLHttpRequest();

var btnNode = getNode("btn");

btnNode.onclick = function() {

//清空

clearNodes(empsHtmlNode);

xmlHttp.onreadystatechange = function() {

if (xmlHttp.readyState == 4) {

if (xmlHttp.status == 200) {

//获取 xmlDocument

var xmlDoc = xmlHttp.responseXML;

//获取跟标签

var rootNode = xmlDoc.documentElement;

//获取 xml文件中 emp 的所有的元素节点

var emps = xmlDoc.getElementsByTagName("emp"); //emp id="xxx"

//获取 emp 节点里边所有的孩子节点

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

//得到一个具体的emp：

var empNode = emps[i];

//为emp创建一行

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

//创建序号的 td

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

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

.getAttribute("id")));

tr.appendChild(td1);

var elementNodes = empNode.childNodes; //name ,sex ,age

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

//节点是否是元素节点

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

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

td2

.appendChild(document

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

tr.appendChild(td2);

}

}

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

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

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

delchk.setAttribute("value", emps[i]

.getAttribute("id"));

tr.appendChild(delchk);

empsHtmlNode.appendChild(tr);

}

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

pagesNode(pagesHtmlNode, rootNode);

}

}

}

//第二步：规定请求参数

xmlHttp.open("GET", "./employeeServlet?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;

//查询 当前页信息

getPagesInfo(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;

}

// //查询 当前页信息

getPagesInfo(nowPage);

}

pagesHtmlNode.appendChild(backPage);

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

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

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

nextPage.onclick = function() {

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

if (nowPage >= countPage) {

nowPage = countPage;

}

//查询 当前页信息

getPagesInfo(nowPage);

}

pagesHtmlNode.appendChild(nextPage);

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

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

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

lastPage.onclick = function() {

nowPage = countPage;

//查询 当前页信息

getPagesInfo(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]);

}

}

function getNode(id) {

return document.getElementById(id);

}

//创建xmlHttpRequest对象

//ajax XMLHttpRequest对象

function createXMLHttpRequest() {

var xmlHttp;

try {

//firefox opera 等 非 IE的浏览器中

xmlHttp = new XMLHttpRequest();

} catch (ex) {

try {

//IE浏览器

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

} catch (e) {

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

}

}

return xmlHttp;

}

//分页代码

function getPagesInfo(nowPage) {

//修改chksHtmlNode 为 默认值

var chksHtmlNode = getNode("chk");

chksHtmlNode.checked = null;

var pagesHtmlNode = getNode("pages");

var empsHtmlNode = getNode("emps");

//从服务器端 传递过了xml数据 在这里解析

//第一步：创建xmlHttpRequest对象

var xmlHttp = createXMLHttpRequest();

//清空

clearNodes(empsHtmlNode);

xmlHttp.onreadystatechange = function() {

if (xmlHttp.readyState == 4) {

if (xmlHttp.status == 200) {

//获取 xmlDocument

var xmlDoc = xmlHttp.responseXML;

//获取跟标签

var rootNode = xmlDoc.documentElement;

//获取 xml文件中 emp 的所有的元素节点

var emps = xmlDoc.getElementsByTagName("emp"); //emp id="xxx"

//获取 emp 节点里边所有的孩子节点

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

//得到一个具体的emp：

var empNode = emps[i];

//为emp创建一行

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

//创建序号的 td

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

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

.getAttribute("id")));

tr.appendChild(td1);

var elementNodes = empNode.childNodes; //name ,sex ,age

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

//节点是否是元素节点

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

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

td2

.appendChild(document

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

tr.appendChild(td2);

}

}

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

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

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

delchk

.setAttribute("value", emps[i]

.getAttribute("id"));

tr.appendChild(delchk);

empsHtmlNode.appendChild(tr);

empsHtmlNode.appendChild(tr);

}

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

pagesNode(pagesHtmlNode, rootNode);

}

}

}

//第二步：规定请求参数

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

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

//第三步：发送请求

xmlHttp.send(null);

}

//-->

</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航