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

最新推荐文章于 2022-10-04 12:43:57 发布

原创最新推荐文章于 2022-10-04 12:43:57 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#servlet #div #string #list #xmlhttprequest #function

javascript 同时被 2 个专栏收录

11 篇文章

订阅专栏

ajax

6 篇文章

订阅专栏

本文介绍了一个使用JSP、JavaBean、DAO模式和Ajax实现的人员选择器应用。该应用包括前端页面、数据库操作、数据访问对象层、业务逻辑处理等部分。通过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"></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"></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)运行效果图: