DIV弹出层练习(三) ------------------ajax+servlet实现遍历js dom节点

本文介绍了一个使用Java实现的人员管理系统,包括数据库连接、数据操作、AJAX请求处理等关键部分。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

首先用mysql建立数据库person及表person

create table person(id int not null primary key ,name varchar(20),sex varchar(5),age int));

(1)index.jsp(表现层)

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>div弹出层练习</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <mce:style type="text/css"><!-- .container { margin: 1%, 0, 0, 3%; height: 75%; width: 100%; padding: 4%, 5%, 10%, 5%; } .employeesDiv { position: absolute; width: 400px; border: 1px #049ED0 solid; visibility: hidden; background: #F7FCFD; } .employeeList { height: 250px; width: 100%; overflow: scroll; margin-left: 15px; color: blue; } --></mce:style><style type="text/css" mce_bogus="1">.container { margin: 1%, 0, 0, 3%; height: 75%; width: 100%; padding: 4%, 5%, 10%, 5%; } .employeesDiv { position: absolute; width: 400px; border: 1px #049ED0 solid; visibility: hidden; background: #F7FCFD; } .employeeList { height: 250px; width: 100%; overflow: scroll; margin-left: 15px; color: blue; }</style> <mce:script type="text/javascript"><!-- var xmlHttp; var doc; function createHttpXmlRequest(){ if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); doc = new ActiveXObject("Msxml2.DOMDocument.4.0"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); doc = document.implementation.createDocument("", "", null); } } // 获得事件Event对象,用于兼容IE和FireFox function getEvent() { return window.event||arguments.callee.caller.arguments[0]; } function showEmployees() { var d = document.getElementById("employeesDiv"); var evt= getEvent(); var x = evt.clientX; var y = evt.clientY; d.style.zIndex = 10; d.style.left = x; d.style.top = y; d.style.visibility = "visible"; var message = document.getElementById("message"); if(message.innerText!="") { createHttpXmlRequest(); xmlHttp.onreadystatechange = callback; xmlHttp.open("get", "servlet/PersonServlet",true); xmlHttp.send(null); } } function callback(){ if(xmlHttp.readyState==4) { if(xmlHttp.status==200) { var rootElement; if(window.ActiveXObject){ doc.loadXML(xmlHttp.responseText); rootElement=doc.documentElement; } else{ var cc=xmlHttp.responseText; //是火狐浏览器的情况下,可以显示得到的数据//alert(cc) parser=new DOMParser(); doc = parser.parseFromString(cc,"text/xml"); rootElement=doc.documentElement; } var checkboxs = ""; var i = 1; var m=1; for ( var e = rootElement.firstChild; e != null; e = e.nextSibling) { var c = "<div style='position:relative;float:left;width:33%;'>" +"<input type='checkbox' name='persons' value='" + e.getElementsByTagName("id")[0].firstChild.nodeValue+ "'/>"; var l = "<label>"+(m++)+"."+e.getElementsByTagName("name")[0].firstChild.nodeValue + "["+ e.getElementsByTagName("id")[0].firstChild.nodeValue + "]" + "</label></div>"; var checkboxs = checkboxs + c + l; if (i == 3) { checkboxs = checkboxs + "<br/>"; i = 1; continue; } i++; } document.getElementById("message").innerText = ""; document.getElementById("message").style.display = "none"; document.getElementById("employees").innerHTML = checkboxs; } } } function selectEmp() { var s = ""; var e = document.form1.persons; for ( var i = 0; i < e.length; i++) { if (e[i].checked == true) { s = s + e[i].nextSibling.firstChild.nodeValue + ", "; } } s=s.substring(0,s.length-2); document.getElementById("targetMembers").innerText = s; document.getElementById('employeesDiv').style.visibility = 'hidden'; } function checkNone() { var e = document.form1.persons; for ( var i = 0; i < e.length; i++) { e[i].checked = false; } } function checkAll() { var e = document.form1.persons; for ( var i = 0; i < e.length; i++) { e[i].checked = true; } } // --></mce:script> </head> <body> <form method="get" name="form1"> <div style="width: 80%; margin-bottom: 5px; background: #D6DFF7; height: 25px; line-height: 25px; padding: 1%, 5px, 1%, 2%"> <div style="position: relative; float: left; margin-bottom: 5px;" mce_style="position: relative; float: left; margin-bottom: 5px;"> 公开对象: <input type="button" value="选择" onclick="showEmployees();" /> </div> <div id="targetMembers" style="width: 100%; overflow: visible; background: #FFFFFF; height: 25px; border: 1px #049ED0 solid; position: relative; float: left; padding-left: 5px;"></div> <div id="employeesDiv" class="employeesDiv"> <div style="height: 15px; width: 100%; text-align: center; background: #D6DFF7; margin-bottom: 3px;"> 请选择员工 </div> <div id="message" align="center"> 正在读取数据... </div> <div id="employees" class="employeeList"></div> <div align="center" style="margin-bottom: 10px;" mce_style="margin-bottom: 10px;"> <input type="button" value="确定" onclick="selectEmp();" /> <input type="button" value="反选" onclick="checkNone();" /> <input type="button" value="全选" onclick="checkAll();" /> </div> </div> </div> </form> </body> </html>

(2)Person.java(javabean)

package bean; public class Person { private String id; private String name; private int age; private String sex; public String getId() { return id; } public void setId(String id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public int getAge() { return age; } public void setAge(int age) { this.age = age; } public String getSex() { return sex; } public void setSex(String sex) { this.sex = sex; } }

(3)DBAccess.java(数据库连接)

package bean; import java.sql.Connection; import java.sql.DriverManager; import java.sql.SQLException; public class DBAccess { /** * @param args */ public DBAccess(){ } public static Connection getConnection(){ try { Class.forName("com.mysql.jdbc.Driver"); } catch (ClassNotFoundException e) { // TODO Auto-generated catch block System.out.println("驱动程序未找"); e.printStackTrace(); } String url="jdbc:mysql://localhost:3306/person"; String user="root"; String password="123"; Connection conn=null; try { conn=DriverManager.getConnection(url, user, password); } catch (SQLException e) { // TODO Auto-generated catch block System.out.println("数据库连接出错啦!"); e.printStackTrace(); } System.out.println("Connection连接成功!"); return conn; } public static void main(String[] args) { // TODO Auto-generated method stub Connection connection=getConnection(); } }

(4)ManagerPerson.java(DAO层)

package bean; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; public class ManagerPerson { /** * @param args */ public static void main(String[] args) { List list=new ArrayList(); for(int i=0;i<100;i++){ Person person=new Person(); person.setId(String.valueOf(i)); person.setName("A"); person.setSex(i%2==0?"男":"女"); person.setAge(i); list.add(person); } insertData(list); } public static List getList() { String sql = "select * from person"; Connection conn = null; PreparedStatement ps = null; ResultSet rs = null; Map result = null; List list = null; Person p = null; try { conn = DBAccess.getConnection(); result = new HashMap(); list = new ArrayList(); ps = conn.prepareStatement(sql); rs = ps.executeQuery(); int i = 0; while (rs.next() ) { p = new Person(); p.setId(rs.getString("id")); p.setName(rs.getString("name")); p.setSex(rs.getString("sex")); p.setAge(Integer.parseInt(rs.getString("age"))); list.add(p); } rs.close(); ps.close(); } catch (Exception e) { e.printStackTrace(); } return list; } public static void insertData(List list) { String sql = "insert into person values(?,?,?,?)"; Connection conn = DBAccess.getConnection(); PreparedStatement ps = null; ResultSet rs = null; int n = 0; for (int i = 0; i < list.size(); i++) { try { Person p = (Person) list.get(i); ps = conn.prepareStatement(sql); ps.setString(1, p.getId()); ps.setString(2, p.getName()); ps.setString(3, String.valueOf(p.getAge())); ps.setString(4, p.getSex()); n = ps.executeUpdate(); if (n == 1) { System.out.println("插入数据成功"); } else { System.out.println("插入数据失败!"); } } catch (Exception e) { e.printStackTrace(); } } } }

(5)PersonServlet.java(处理ajax的请求)

package servlet; import java.io.IOException; import java.io.PrintWriter; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import bean.ManagerPerson; import bean.Person; public class PersonServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println(123); response.setContentType("text/html"); PrintWriter out = response.getWriter(); StringBuffer bf = new StringBuffer(); bf.append("<?xml version=/"1.0/" encoding=/"UTF-8/"?>"); bf.append("<persons>"); List<Person> list = new ManagerPerson().getList(); for (Person p : list) { bf.append("<person>" + "<id>" + p.getId() + "</id>" + "<name>" + p.getName() + "</name>" + "<sex>" + p.getSex() + "</sex>" + "</person>"); } bf.append("</persons>"); out.write(bf.toString()); out.flush(); System.out.println(bf.toString()); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }

(6)web.xml

<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <servlet> <description>This is the description of my J2EE component</description> <display-name>This is the display name of my J2EE component</display-name> <servlet-name>PersonServlet</servlet-name> <servlet-class>servlet.PersonServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>PersonServlet</servlet-name> <url-pattern>/servlet/PersonServlet</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app>

(7)运行效果图:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值