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

最新推荐文章于 2023-08-24 19:13:55 发布
最新推荐文章于 2023-08-24 19:13:55 发布
阅读量5.4k 收藏 2
点赞数
文章标签： jsp ajax xmlhttprequest function stylesheet input
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w_l_j/article/details/7299554
版权
<%@ 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>
w_l_j
关注
使用ajax实现jsp页面删除功能
Li_zhengqi的博客
05-21 1619
前几天在练习页面增删改查时写到ajax时候忘记卡住了，去网上搜索时搜了半天发现解决方法不是特别难就是繁琐，于是赶紧联系兄弟让他把以前的代码发来。兄弟也是不辱使命，给我发来两张以前练习时的截图。 大概看了一下代码之后，就知道大概的一个思路，首先给大家看一下我的jsp页面 数据库中一共有三条数据，查询出来后点击删除，提示是否要删除，点击确定，提示删除成功 打开代码，首先在删除这个a标签这里，对a标签的超链接功能进行封锁，然后给它一个鼠标单击事件，创建一个删除的函数并且有两个参数，第一个是要
Jquery+ajax+jsp分页
03-04
一个关于Jquery+ajax+jsp分页 因为ajax回调函数支持返回的类型有json,html,xml，里面三种都有，受益良多，与大家分享
jsp jQuery Ajax 实现批量删除
a15732111571的博客
05-10 626
<%@ page language=“java” contentType=“text/html; charset=UTF-8” pageEncoding=“UTF-8”%> <%@ taglib uri=“http://java.sun.com/jsp/jstl/core” prefix=“c”%> <%@ taglib uri=“http://java.sun.co...
Java Ajax分页,jsp ajax分页
09-10
Ajax + JavaScript + MySQL 实现的Ajax分页功能
JSP下的AJAX分页
07-02
思路是通过Servlet传递当前点击的是第几页。Servlet类中记录当前是第几页。将该页的内容以XML数据格式传递到浏览器中。浏览器读取XML格式中当前的页码。计算上一页和下一页的页码。动态生成显示的内容和更改上一页和下一页的链接中传递给servlet的页码值。如此循环及实现分页功能。
jsp ajax实现删除,jsp servlet ajax入门删除
weixin_42548893的博客
08-06 479
var xmlreq = false;functioncreateXmlHttpRequest(){if(window.XMLHttpRequest) {xmlreq= newXMLHttpRequest();}else if(window.ActiveXObject) {try{xmlreq= new ActiveXObject("Msxml2.XMLHTTP");}catch(e1) {try...
JSP环境下的AJAX分页示例
05-17
通过查看和学习这些源码，你可以了解AJAX分页的具体实现细节，例如如何构建请求，如何在JSP中处理请求，以及如何动态更新页面。这个示例项目对于初学者来说是一份很好的参考资料，可以帮助理解AJAX在实际项目中的...
【JavaScript源代码】jquery+Ajax实现简单分页条效果.docx
12-29
以下是一个简化的示例代码片段，展示了如何使用jQuery和Ajax实现分页功能： ```javascript $(document).ready(function() { var currentPage = 1; var pageSize = 10; function loadPageData(pageNum) { $....
JSP AJAX分页示例程序.rar
07-10
总之，"JSP AJAX分页示例程序"是一个很好的学习资源，它展示了如何将JSP和AJAX技术相结合，实现动态、高效的分页效果。通过深入理解和实践这个示例，开发者可以更好地掌握服务器端编程和前端交互的技术，提升Web应用...
JSP实现分页和删除
最新发布
qq_65142821的博客
08-24 267
【代码】JSP实现分页和删除。
jsp ajax可编辑的表格,ajax实现jsp表格删除数据库
weixin_39615419的博客
08-06 740
ajax实现jsp表格删除数据库 内容精选换一换删除数据库。IF EXISTS：所需删除的数据库不存在时使用，可避免系统报错。DATABASE与SCHEMA两者没有区别，可替换使用，建议使用DATABASE。RESTRICT表示如果该database不为空(有表存在)，DROP操作会报错，执行失败，RESTRICT是默认逻辑。CASCADE表示即使该database不为空(有表存在)，删除数据库。...
SSM+AJAX+jsp,删除数据功能
__猫玖__的博客
06-18 547
2021.5.7_SSM+AJAX开发，删除功能 1.StudentMapper package com.hy.mapper; import com.hy.entity.Student; import java.util.List; public interface StudentMapper { //删除 public int deleteStudent(Integer id); } StudentMapper.xml <?xml version="1.0" encod
用ajax实现分页 删除功能（一）
焦雨晗
02-28 827
1.首先把界面搭建出来 员工界面 查询条件 序号 姓名 性别 年龄 出生日期 薪资 需要在此界面的基础上实现分页 把数据库
用ajax实现分页 删除功能（三）
焦雨晗
02-28 1205
1.下面实现全选和反选功能 //实现全选 与反选的功能 $("chk").onclick = function() { var inputs = document.getElementsByName("delchk"); //判断是否是选中的状态 if ($("chk").checked) { //让所有input type=“checkbox” 并且 na
用Ajax实现分页和删除(一)
02-27 2656
页面： "center">                                            员工界面                             "button"value="查询员工" id="btn"/>                 "showEmps">                   "1"cellpadding="0" c
ajax实现表格分页功能
m0_46233451的博客
05-19 598
一.数据库分页查询 1.mysql分页查询 select * from table limit a,b a:下标，从0开始 b:长度 mysql> select * from stu limit 0,10; +----+--------+-----------------------------------------+------------+ | id | name | address | birthday | +----
【JSP】ajax实现简单分页
景谦Nice的博客
12-10 1092
需求： 1、数据从数据库读取； 2、点击上/下一页翻页，每页显示3条数据； 3、已经是第一页再点击“上一页”提示“已经是第一页”，已经是最后一页再点击“下一页”提示“已经是最后一页”； 4、第一个文本框接收value进行与name字段的模糊查询，第二个文本框接收value进行与address字段的模糊查询，可同时进行name与address的联合模糊查询。 思路： 1、浏览器直接请求index....
Ajax进行删除更新分页显示页面(JSP+Struts2+Poolman)
天马行空的专栏
11-23 2824
Ajax进行删除更新分页显示页面 Ajax无刷新进行CURD (JSP+Struts2+Poolman)
一个页面实现修改删除列表显示，ajax动态生成table(使用ajax，springmvc，jsp)
糖糖糖糖糖糖分
07-31 7791
先看效果：   点击保存使用ajax保存当前表数据，返回一个table格式的html，替换掉页面上的table（已添加的教育经历）。 JSP主要代码：   &lt;div class="container" style="width: 100%;"&gt; &lt;div class="row mg15"&gt; &lt;div class="mainbox_C_C&qu
利用ajax删除多条信息,利用jquery.ajax在jsp页面动态生成table，可以增加修改，并支持一行和多行删除...
weixin_34340606的博客
08-05 385
声明：此为本人原创，只想实现功能，界面样式方面没多考虑，很粗糙能看懂就行……2018-5-14动态生成table，我利用jsp内嵌java代码从后台获取对象集合，输出的时候有2中方法1.直接利用java代码for(b1 b:bs)输出2.利用JSTL标签库的c:foreach输出不同之处在于，利用c:foreach输出要把获取的对象集合加入到request，然后用${}来读取，而for(b1 b:...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值