用AJAX实现级联菜单功能
BaseDao.java
package com.LJ.dao;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
public class BaseDao{
/**
* 产生一个servletID
*/
private static final long serialVersionUID = -3005086949118705373L;
//定义各种数据库的链接常量
private static final String
DRIVER_NAME="com.microsoft.jdbc.sqlserver.SQLServerDriver";
private static final String
DRIVER_URL="jdbc:sqlserver://localhost:1433;DatabaseName=computer";
private static final String DB_USER_NAME="sa";
private static final String DB_USER_PWD="sa";
//获取数据库链接对象
public static Connection getConn() throws ClassNotFoundException,
SQLException{
Class.forName(DRIVER_NAME);
Connection conn = DriverManager.getConnection(DRIVER_URL,
DB_USER_NAME,
DB_USER_PWD);
return conn;
}
// public static Connection getConn() throws NamingException, SQLException{
// //初始化应用上下文
// InitialContext ic = new InitialContext();
// //java:comp/env为固定的前缀,jdbc/empdatabase1则为配置的数据源的名称
// DataSource conn = (DataSource) ic.lookup
("java:comp/env/jdbc/news");
// return conn.getConnection();
// }
//释放数据库资源
public static void CloseAll(Connection conn, PreparedStatement ps,
ResultSet rs) {
if (rs != null)
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
if (ps != null)
try {
ps.close();
} catch (SQLException e) {
e.printStackTrace();
}
if (conn != null)
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
ComputereDao.java
package com.LJ.dao;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import com.LJ.entity.COMPUTER;
public class ComputerDao extends BaseDao {
private static Connection conn = null; // 保存数据库连接
private static PreparedStatement ps = null; // 用于执行SQL语句
private static ResultSet rs = null; // 用于保存查询结果集
// 增加一个方法向数据库查询出数据,并以集合的方式返回
public List<COMPUTER> getAllPoll(String locus){
List<COMPUTER> list = new ArrayList<COMPUTER>();
try {
conn = BaseDao.getConn();
String sql = " select brand from computero where locus =
? ";
ps = conn.prepareStatement(sql);
ps.setString(1, locus);
rs = ps.executeQuery();
while(rs.next()){
COMPUTER computer = new COMPUTER();
computer.setBrand(rs.getString("brand"));
list.add(computer);
}
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}finally{
BaseDao.CloseAll(conn, ps, rs);
}
return list;
}
}
package com.LJ.dao;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import com.LJ.entity.COMPUTER;
public class ComputerDao extends BaseDao {
private static Connection conn = null; // 保存数据库连接
private static PreparedStatement ps = null; // 用于执行SQL语句
private static ResultSet rs = null; // 用于保存查询结果集
// 增加一个方法向数据库查询出数据,并以集合的方式返回
public List<COMPUTER> getAllPoll(String locus){
List<COMPUTER> list = new ArrayList<COMPUTER>();
try {
conn = BaseDao.getConn();
String sql = " select brand from computero where locus =
? ";
ps = conn.prepareStatement(sql);
ps.setString(1, locus);
rs = ps.executeQuery();
while(rs.next()){
COMPUTER computer = new COMPUTER();
computer.setBrand(rs.getString("brand"));
list.add(computer);
}
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}finally{
BaseDao.CloseAll(conn, ps, rs);
}
return list;
}
}
COMPUTER.java
package com.LJ.entity;
public class COMPUTER {
private int id;
private String brand;
private String locus;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getBrand() {
return brand;
}
public void setBrand(String brand) {
this.brand = brand;
}
public String getLocus() {
return locus;
}
public void setLocus(String locus) {
this.locus = locus;
}
public COMPUTER(int id, String brand, String locus) {
super();
this.id = id;
this.brand = brand;
this.locus = locus;
}
public COMPUTER() {
super();
}
}
package com.LJ.entity;
public class COMPUTER {
private int id;
private String brand;
private String locus;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getBrand() {
return brand;
}
public void setBrand(String brand) {
this.brand = brand;
}
public String getLocus() {
return locus;
}
public void setLocus(String locus) {
this.locus = locus;
}
public COMPUTER(int id, String brand, String locus) {
super();
this.id = id;
this.brand = brand;
this.locus = locus;
}
public COMPUTER() {
super();
}
}
MessageServlet.java
package com.LJ.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 com.LJ.dao.ComputerDao;
import com.LJ.entity.COMPUTER;
public class MessageServlet extends HttpServlet {
/**
* 增加对servlet的ID处理
*/
private static final long serialVersionUID = 2315859662727740974L;
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse
response)
throws ServletException, IOException {
//设置接收信息的字符集
request.setCharacterEncoding("UTF-8");
//接收浏览器端提交的信息
String locus = request.getParameter("locus");
//设置输出信息的格式及字符
response.setContentType("text/xml;charset=UTF-8");
response.setHeader("Cache-Control","no-cache");
//创建输出流
PrintWriter out = response.getWriter();
//依据结果输出不同的数据信息
out.print("<response>");
//查找该品牌具体型号
ComputerDao computerDao = new ComputerDao();
List<COMPUTER> list = computerDao.getAllPoll(locus);
for (int i = 0; i < list.size(); i++) {
COMPUTER computer = list.get(i);
out.println("<res>"+ computer.getBrand()
+"</res>");
}
out.println("</response>");
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse
response)
throws ServletException, IOException {
//如果请求为dopost请求,则调用doget方法
this.doGet(request, response);
}
}
ComputerDaoTest.java
package com.LJ.test;
import java.util.List;
import com.LJ.dao.ComputerDao;
import com.LJ.entity.COMPUTER;
public class ComputerDaoTest {
public static void main(String[] args) {
ComputerDao computerDao = new ComputerDao();
List<COMPUTER> list = computerDao.getAllPoll
("inside");
for (int i = 0; i < list.size(); i++) {
COMPUTER computer = list.get(i);
System.out.println(computer.getBrand());
}
}
}
joinMenu.js
//创建级联菜单函数
function showSubMenu(obj) {
currentSort = document.getElementById(obj);
currentSort.parentNode.style.display = "";
sendRequest("messageServlet?locus=" + obj);
}
//发送请求函数
function sendRequest(url) {
//调用创建XMLHttpReqeust对象的函数
alert(url);
createXMLHttpRequest();
xmlHttpReq.open("GET", url, true);
//调用回调函数(当状态发生改变时调用回调函数)
xmlHttpReq.onreadystatechange = processResponse;
//发送请求
xmlHttpReq.send(null);
}
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
//创建XMLHttpRequest对象
if (window.XMLHttpRequest) {
//IE7,IE8,FireFox,Mozillar,Opera浏览器
xmlHttpReq = new XMLHttpRequest();
//当头的设置不是text/xml形式时,则要重新设置为text/xml
if (xmlHttpReq.overrideMimeType) {
xmlHttpReq.overrideMimeType("text/xml");
}
} else if (window.ActiveXObject) {
//IE6,IE5,IE5.5,因为所有浏览器都是基于ActiveXObject所以放置在后面实现效
能会好些
var activexName = [ "MSXML2.XMLHTTP.6.0",
"MSXML2.XMLHTTP.5.0",
"MSXML2.XMLHTTP.4.0",
"MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP",
"Miscrosoft.XMLHTTP" ];
for ( var i = 0; i < activexName.length; i++) {
try {
xmlHttpReq = new ActiveXObject(activexName[i]);
break;//一但创建成功就不需要再进行判断
} catch (e) {
//异常不需要处理
}
}
}
}
//处理返回信息函数
function processResponse() {
if (xmlHttpReq.readyState == 4) {
if (xmlHttpReq.status == 200) {
updateMenu();
} else {
alert("响应异常");
}
}
}
function updateMenu() {
var res = xmlHttpReq.responseXML.getElementsByTagName("res");
var subMenu = "";
for ( var i = 0; i < res.length; i++) {
subMenu = subMenu + " " + res[i].firstChild.data +
"<br>"
}
currentSort.innerHTML = subMenu;
}
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>
<servlet-name>messageServlet</servlet-name>
<servlet-class>com.LJ.servlet.MessageServlet</servlet-
class>
</servlet>
<servlet-mapping>
<servlet-name>messageServlet</servlet-name>
<url-pattern>/messageServlet</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
index.jsp
<%@ page language="java"
import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<title>使用AJAX实现省市联级效果</title>
<script type="text/javascript"
src="JS/joinMenu.js"></script>
</head>
<body>
<table style="border-collapse: collapse"
bordercolor="#111111"
cellspacing="0" cellpadding="0"
width="200" bgcolor="#f5efe7"
border="0" align="center">
<tr>
<td align="center"
height="20">
笔记本品牌
</td>
</tr>
<tr>
<td align="center">
<a οnclick="showSubMenu('inside')
">国内品牌</a>
</td>
</tr>
<tr style="display: none">
<td id="inside" height="20"
align="center"></td>
</tr>
<tr>
<td align="center">
<a οnclick="showSubMenu('outside')
">国外品牌</a>
</td>
</tr>
<tr style="display: none">
<td id="outside" height="20"
align="center"></td>
</tr>
</table>
</body>
</html>
注意:别忘了导入数据库驱动类,在项目中的WEB-INFO ------> lib中,别忘了建立数据库,数据库名,表名,跟字段在图片中有体现。