用ajax、JSP和Servlet实现多级下拉菜单无刷新联动

用mysql建2张简单的表

create database school;

use school;

create table class(
id int primary key AUTO_INCREMENT,
name varchar(10)
);

create table student(
id int primary key AUTO_INCREMENT,
name varchar(10),
cid int references class(id)
);

insert into class values(null, '0501');
insert into class values(null, '0502');
insert into class values(null, '0503');
insert into class values(null, '0504');

insert into student values(null, '11', 1);
insert into student values(null, '21', 2);
insert into student values(null, '22', 2);
insert into student values(null, '31', 3);
insert into student values(null, '32', 3);
insert into student values(null, '33', 3);
insert into student values(null, '41', 4);
insert into student values(null, '42', 4);
insert into student values(null, '43', 4);
insert into student values(null, '44', 4);

简单打包数据库操作类DB：

view plaincopy to clipboardprint?
package DropDownList;

import java.sql.*;

public class DB {
private static Connection conn;

public static Connection getConn() {
try {
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/school", "root", "root");
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
return conn;
}

public static void close(Connection conn) {
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}

public static void close(Statement stmt) {
try {
stmt.close();
} catch (SQLException e) {
e.printStackTrace();
}
}

public static void close(ResultSet rs) {
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
package DropDownList;

import java.sql.*;

public class DB {
private static Connection conn;

public static Connection getConn() {
try {
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/school", "root", "root");
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
return conn;
}

public static void close(Connection conn) {
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}

public static void close(Statement stmt) {
try {
stmt.close();
} catch (SQLException e) {
e.printStackTrace();
}
}

public static void close(ResultSet rs) {
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}

建立2个VO:

1.StudentVO:

view plaincopy to clipboardprint?
package DropDownList;

public class StudentVO {
private int id;
private String name;
private ClassVO cla;

public int getId() {
return id;
}

public void setId(int id) {
this.id = id;
}

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

public ClassVO getCla() {
return cla;
}

public void setCla(ClassVO cla) {
this.cla = cla;
}

@Override
public String toString() {
StringBuffer sb = new StringBuffer("Student:/n");
sb.append("id: " + id + "/n");
sb.append("name: " + name + "/n");
sb.append("classname: " + cla.getName() + "/n");
return sb.toString();
}
}
package DropDownList;

public class StudentVO {
private int id;
private String name;
private ClassVO cla;

public int getId() {
return id;
}

public void setId(int id) {
this.id = id;
}

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

public ClassVO getCla() {
return cla;
}

public void setCla(ClassVO cla) {
this.cla = cla;
}

@Override
public String toString() {
StringBuffer sb = new StringBuffer("Student:/n");
sb.append("id: " + id + "/n");
sb.append("name: " + name + "/n");
sb.append("classname: " + cla.getName() + "/n");
return sb.toString();
}
}

2.ClassVO:

view plaincopy to clipboardprint?
package DropDownList;

public class ClassVO {
private int id;
private String name;

public int getId() {
return id;
}

public void setId(int id) {
this.id = id;
}

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

@Override
public String toString() {
StringBuffer sb = new StringBuffer("Class:/n");
sb.append("id: " + id + "/n");
sb.append("name:" + name + "/n");
return sb.toString();
}
}
package DropDownList;

public class ClassVO {
private int id;
private String name;

public int getId() {
return id;
}

public void setId(int id) {
this.id = id;
}

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

@Override
public String toString() {
StringBuffer sb = new StringBuffer("Class:/n");
sb.append("id: " + id + "/n");
sb.append("name:" + name + "/n");
return sb.toString();
}
}

建立2个Manager类(采用单例模式)

1.studentManager：

view plaincopy to clipboardprint?
package DropDownList;

import java.sql.*;
import java.util.ArrayList;
import java.util.List;

public class StudentManager {
private static StudentManager instance = new StudentManager();

private StudentManager() {

}

public static StudentManager getInstance() {
return instance;
}

public List<StudentVO> getStudentsByCid(int cid) {
String sql = "select * from student where cid = ?";
List<StudentVO> students = new ArrayList<StudentVO>();
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
try {
conn = DB.getConn();
pstmt = conn.prepareStatement(sql);
pstmt.setInt(1, cid);
rs = pstmt.executeQuery();
while(rs.next()) {
StudentVO stu = new StudentVO();
stu.setId(rs.getInt("id"));
stu.setName(rs.getString("name"));
stu.setCla(ClassManager.getInstance().getClassById(cid));
students.add(stu);
}
} catch(SQLException e) {
e.printStackTrace();
} finally {
DB.close(rs);
DB.close(pstmt);
DB.close(conn);
}
return students;
}
}
package DropDownList;

import java.sql.*;
import java.util.ArrayList;
import java.util.List;

public class StudentManager {
private static StudentManager instance = new StudentManager();

private StudentManager() {

}

public static StudentManager getInstance() {
return instance;
}

public List<StudentVO> getStudentsByCid(int cid) {
String sql = "select * from student where cid = ?";
List<StudentVO> students = new ArrayList<StudentVO>();
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
try {
conn = DB.getConn();
pstmt = conn.prepareStatement(sql);
pstmt.setInt(1, cid);
rs = pstmt.executeQuery();
while(rs.next()) {
StudentVO stu = new StudentVO();
stu.setId(rs.getInt("id"));
stu.setName(rs.getString("name"));
stu.setCla(ClassManager.getInstance().getClassById(cid));
students.add(stu);
}
} catch(SQLException e) {
e.printStackTrace();
} finally {
DB.close(rs);
DB.close(pstmt);
DB.close(conn);
}
return students;
}
}

2.ClassManager:

view plaincopy to clipboardprint?
package DropDownList;

import java.sql.*;
import java.util.ArrayList;
import java.util.List;

public class ClassManager {
private static ClassManager instance = new ClassManager();

private ClassManager(){

}

public static ClassManager getInstance() {
return instance;
}

public List<ClassVO> getAllClasses() {
String sql = "select * from class";
List<ClassVO> classes = new ArrayList<ClassVO>();
Connection conn = null;
Statement stmt = null;
ResultSet rs = null;
try {
conn = DB.getConn();
stmt = conn.createStatement();
rs = stmt.executeQuery(sql);
while(rs.next()) {
ClassVO cla = new ClassVO();
cla.setId(rs.getInt("id"));
cla.setName(rs.getString("name"));
classes.add(cla);
}
} catch(SQLException e) {
e.printStackTrace();
} finally {
DB.close(rs);
DB.close(stmt);
DB.close(conn);
}
return classes;
}

public ClassVO getClassById(int id) {
String sql = "select * from class where id = ?";
ClassVO cla = null;
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
try{
conn = DB.getConn();
pstmt = conn.prepareStatement(sql);
pstmt.setInt(1, id);
rs = pstmt.executeQuery();
if(rs.next()) {
cla = new ClassVO();
cla.setId(rs.getInt("id"));
cla.setName(rs.getString("name"));
}
} catch(SQLException e) {
e.printStackTrace();
} finally {
DB.close(rs);
DB.close(pstmt);
DB.close(conn);
}
return cla;
}
}
package DropDownList;

import java.sql.*;
import java.util.ArrayList;
import java.util.List;

public class ClassManager {
private static ClassManager instance = new ClassManager();

private ClassManager(){

}

public static ClassManager getInstance() {
return instance;
}

public List<ClassVO> getAllClasses() {
String sql = "select * from class";
List<ClassVO> classes = new ArrayList<ClassVO>();
Connection conn = null;
Statement stmt = null;
ResultSet rs = null;
try {
conn = DB.getConn();
stmt = conn.createStatement();
rs = stmt.executeQuery(sql);
while(rs.next()) {
ClassVO cla = new ClassVO();
cla.setId(rs.getInt("id"));
cla.setName(rs.getString("name"));
classes.add(cla);
}
} catch(SQLException e) {
e.printStackTrace();
} finally {
DB.close(rs);
DB.close(stmt);
DB.close(conn);
}
return classes;
}

public ClassVO getClassById(int id) {
String sql = "select * from class where id = ?";
ClassVO cla = null;
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
try{
conn = DB.getConn();
pstmt = conn.prepareStatement(sql);
pstmt.setInt(1, id);
rs = pstmt.executeQuery();
if(rs.next()) {
cla = new ClassVO();
cla.setId(rs.getInt("id"));
cla.setName(rs.getString("name"));
}
} catch(SQLException e) {
e.printStackTrace();
} finally {
DB.close(rs);
DB.close(pstmt);
DB.close(conn);
}
return cla;
}
}

写前台JSP显示层:

view plaincopy to clipboardprint?
<%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>
<%@ page import="java.util.*,DropDownList.*"%>
<%
List<ClassVO> classes = ClassManager.getInstance().getAllClasses();
List<StudentVO> students = StudentManager.getInstance().getStudentsByCid(1);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
<mce:script type="text/javascript"><!--
var xmlHttp;

function createXMLHttpRequest() {
if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest;
} else if(window.ActiveXObject) {
xmlHttp = new ActiveXobject;
}
}

function selectchange() {
createXMLHttpRequest();
var cid = document.getElementById("classes").value;
var url = "./servlet/SelectChangeServlet?cid=" + cid + "×tamp" + new Date().getTime();
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);
}

function callback() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
eval(xmlHttp.responseText);
}
}
}

// --></mce:script>
</head>
<body>
<select name="classes" id="classes" style="width:100px" onchange="selectchange()">
<%
for (ClassVO cla : classes) {
%>
<option value="<%=cla.getId()%>">
<%=cla.getName()%>
</option>
<%
}
%>
</select>
<select name="student" id="student" style="width:100px">
<%
for (StudentVO stu : students) {
%>
<option value="<%=stu.getId()%>">
<%=stu.getName()%>
</option>
<%
}
%>
</select>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>
<%@ page import="java.util.*,DropDownList.*"%>
<%
List<ClassVO> classes = ClassManager.getInstance().getAllClasses();
List<StudentVO> students = StudentManager.getInstance().getStudentsByCid(1);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
<mce:script type="text/javascript"><!--
var xmlHttp;

function createXMLHttpRequest() {
if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest;
} else if(window.ActiveXObject) {
xmlHttp = new ActiveXobject;
}
}

function selectchange() {
createXMLHttpRequest();
var cid = document.getElementById("classes").value;
var url = "./servlet/SelectChangeServlet?cid=" + cid + "×tamp" + new Date().getTime();
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);
}

function callback() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
eval(xmlHttp.responseText);
}
}
}

// --></mce:script>
</head>
<body>
<select name="classes" id="classes" style="width:100px" onchange="selectchange()">
<%
for (ClassVO cla : classes) {
%>
<option value="<%=cla.getId()%>">
<%=cla.getName()%>
</option>
<%
}
%>
</select>
<select name="student" id="student" style="width:100px">
<%
for (StudentVO stu : students) {
%>
<option value="<%=stu.getId()%>">
<%=stu.getName()%>
</option>
<%
}
%>
</select>
</body>
</html>

写Servlet简单处理类:

view plaincopy to clipboardprint?
package DropDownList;

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;

public class SelectChangeServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

response.setContentType("text/html; charset=GB18030");
PrintWriter out = response.getWriter();
String cidStr = request.getParameter("cid");
System.out.println(cidStr);
int cid = Integer.parseInt(cidStr);
List<StudentVO> students = StudentManager.getInstance().getStudentsByCid(cid);
out.println("document.getElementById('student').length = " + students.size());
out.println("document.getElementById('student').selectedIndex = 0");
for(int i=0; i< students.size(); i++) {
StudentVO stu = students.get(i);
out.println("document.getElementById('student').options[" + i + "].value = '" + stu.getId() + "'");
out.println("document.getElementById('student').options[" + i + "].text = '" + stu.getName() + "'");
}
}

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}

}
package DropDownList;

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;

public class SelectChangeServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

response.setContentType("text/html; charset=GB18030");
PrintWriter out = response.getWriter();
String cidStr = request.getParameter("cid");
System.out.println(cidStr);
int cid = Integer.parseInt(cidStr);
List<StudentVO> students = StudentManager.getInstance().getStudentsByCid(cid);
out.println("document.getElementById('student').length = " + students.size());
out.println("document.getElementById('student').selectedIndex = 0");
for(int i=0; i< students.size(); i++) {
StudentVO stu = students.get(i);
out.println("document.getElementById('student').options[" + i + "].value = '" + stu.getId() + "'");
out.println("document.getElementById('student').options[" + i + "].text = '" + stu.getName() + "'");
}
}

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}

}

最后配置web.xml 发布到服务器

发表于 @ 2009年04月15日 01:39:00|评论(0)|举报|收藏

新一篇: 使用Java编写B/S模式 汇编程序编译环境【原创】 | 旧一篇: 使用 JFreeChart来创建基于web的图表

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/zhuyingxi/archive/2009/04/15/4074495.aspx