//model层:Area.java
package com.wdpc.ajax.model;
public class Area {
private int areaId;//市 id
private String areaName;//区域名
private int areaPid;//区域id
//构造函数
public Area(int areaId, String areaName, int areaPid) {
super();
this.areaId = areaId;
this.areaName = areaName;
this.areaPid = areaPid;
}
//get,set方法
public int getAreaId() {
return areaId;
}
public void setAreaId(int areaId) {
this.areaId = areaId;
}
public String getAreaName() {
return areaName;
}
public void setAreaName(String areaName) {
this.areaName = areaName;
}
public int getAreaPid() {
return areaPid;
}
public void setAreaPid(int areaPid) {
this.areaPid = areaPid;
}
}
//dao层:
package com.wdpc.ajax.comms;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import javax.naming.Context;
import javax.naming.InitialContext;
import javax.sql.DataSource;
public class DbManager {
public static Connection getConnection(){
Connection conn = null;
try {
Context context = new InitialContext();
DataSource ds = (DataSource) context.lookup("java:comp/env/jdbc/ajax");
conn = ds.getConnection();
} catch (Exception e) {
e.printStackTrace();
}
return conn;
}
public static void closeConnection(Connection conn,PreparedStatement pst,ResultSet rs){
try{
if(rs !=null){
rs.close();
}
if(pst !=null){
pst.close();
}
if(conn !=null){
conn.close();
}
}catch(SQLException e){
e.printStackTrace();
}
}
}
//AreaDao.java
package com.wdpc.ajax.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.wdpc.ajax.comms.DbManager;
import com.wdpc.ajax.model.Area;
public class AreaDao {
public List<Area> findAreaByPid(int pid) {
Connection conn = DbManager.getConnection();//获取连接
PreparedStatement pst = null;
ResultSet rs = null;//结果集
List<Area> list = new ArrayList<Area>();
try {
//执行语句
pst = conn.prepareStatement("select * from area where areaId =?");
pst.setInt(1, pid);
rs = pst.executeQuery();
//遍历结果
while (rs.next()) {
list.add(new Area(rs.getInt(1), rs.getString(2), rs.getInt(3)));
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
DbManager.closeConnection(conn, pst, rs);//关闭
}
return list;
}
}
//service层:AreaService.java
package com.wdpc.ajax.service;
import java.util.List;
import com.wdpc.ajax.model.Area;
public interface AreaService {
public List<Area> findAreaByPid(int pid);
}
//实现service层:AreaServiceImpl.java
package com.wdpc.ajax.service.impl;
import java.util.List;
import com.wdpc.ajax.dao.AreaDao;
import com.wdpc.ajax.model.Area;
import com.wdpc.ajax.service.AreaService;
public class AreaServiceImpl implements AreaService {
private AreaDao areaDao;
public AreaServiceImpl() {
areaDao = new AreaDao();
}
//通过id获取区域
public List<Area> findAreaByPid(int pid) {
return areaDao.findAreaByPid(pid);
}
}
//action层:AreaServlet.java
package com.wdpc.ajax.action;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
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.wdpc.ajax.model.Area;
import com.wdpc.ajax.service.AreaService;
import com.wdpc.ajax.service.impl.AreaServiceImpl;
public class AreaServlet extends HttpServlet {
private AreaService areaService;
public AreaServlet() {
areaService = new AreaServiceImpl();
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");//请求时编码方式
response.setCharacterEncoding("utf-8");//响应时编码方式
List<Area> list = new ArrayList<Area>();
PrintWriter out = response.getWriter();
int pid = -1;
try {
pid = Integer.parseInt(request.getParameter("pid"));//获取JSP页面传过来的pid
} catch (NumberFormatException e) {
}
if (pid != -1) {
list = areaService.findAreaByPid(pid);
out.print(getAreaXML(list));
}
out.flush();
out.close();
}
private String getAreaXML(List<Area> list) {
String str = "<root>";
if (list != null && list.size() > 0) {
for (Area area : list) {
str += "<area id='" + area.getAreaId() + "' name='"
+ area.getAreaName() + "' pid='" + area.getAreaPid()
+ "'/>";
}
}
str += "</root>";
return str;
}
}
//数据源(context.xml)
<Context>
<Resource name="jdbc/ajax" auth="Container"
type="javax.sql.DataSource" maxActive="100" maxIdle="30"
maxWait="10000" username="root" password="wdpc"
driverClassName="com.mysql.jdbc.Driver"
url="jdbc:mysql://localhost:3306/test?autoReconnect=true&useUnicode=true&characterEncoding=utf-8&mysqlEncoding=utf8" />
</Context>
此xml放到META-INF下
//my.js 支持的浏览器
function GetXmlHttpObject(){
var xmlHttp=null;
try{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e){
// Internet Explorer
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
function loadXMLDoc(filepath){
var xmlDoc = null;
try{//Internet Explorer
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
}catch(e){
try{//Firefox, Mozilla, Opera, etc.
xmlDoc = document.implementation.createDocument("","",null);
}catch(e){
alert(e.message);
}
}
try{
xmlDoc.async = false;
xmlDoc.load(filepath);
}catch(e){
alert(e.message)
}
return xmlDoc;
}
function loadXMLString(str){
var xmlStr = null;
try{//Internet Explorer
xmlStr = new ActiveXObject("Microsoft.XMLDOM");
xmlStr.async="false";
xmlStr.loadXML(str);
}catch(e){
try{//Firefox, Mozilla, Opera, etc.
var parser=new DOMParser();
xmlStr = parser.parseFromString(str,"text/xml");
}catch(e){
alert(e.message);
}
}
return xmlStr;
}
//index.jsp
<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="basePath" value="${pageContext.request.contextPath}" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ajax示例</title>
<meta http-equiv="cache-control" content="no-cache" />
<script type="text/javascript" src="${basePath}/script/my.js"></script>
<script type="text/javascript">
var xmlHttp = GetXmlHttpObject();
function getArea(area_id,selectId){
if (xmlHttp==null){
alert ("您的浏览器不支持AJAX!");
return;
}
xmlHttp.onreadystatechange=function(){
//在这里,我们可以处理从服务器返回的数据,首先判断一下数据是否成功返回
if (xmlHttp.readyState==4){
var text = xmlHttp.responseText;
var xmlDoc = loadXMLString(text);
var selectObj = document.getElementById(selectId);
while(selectObj.childNodes.length > 0){
selectObj.removeChild(selectObj.childNodes[0]);
}
addNode("", "请选择", selectObj);
if(area_id === ""){
return ;
}
var areaNodes = xmlDoc.getElementsByTagName("area");
var frag = document.createDocumentFragment();
for(var i=0; i<areaNodes.length; i++){
var id = areaNodes[i].getAttributeNode("id").nodeValue;
var name = areaNodes[i].getAttributeNode("name").nodeValue;
addNode(id, name, frag);
}
selectObj.appendChild(frag);
}
};
xmlHttp.open("GET","${basePath}/AreaServlet?pid=" + area_id + "&time=" + new Date().getTime(),true);
xmlHttp.send(null);
}
function addNode(attr, text, obj){
var option = document.createElement("option");
option.setAttribute("value",attr);
var optionText = document.createTextNode(text);
option.appendChild(optionText);
obj.appendChild(option);
}
function showCity(area_id,selectId){
getArea(area_id,selectId);
}
</script>
</head>
<body onload="getArea(0,'province')">
省份:
<select id="province" onchange="showCity(this.value,'city')">
<option value="">
请选择
</option>
</select>
城市:
<select id="city">
<option value="">
请选择
</option>
</select>
</body>
</html>
//项目如下图
数据库驱动包需放到tomcat根目录lib下
数据库test,表area
create table area(
ID int AUTO_INCREMENT,
areaName varchar(10),
areaId int,
PRIMARY KEY(ID)
)ENGINE=InnoDB DEFAULT CHARSET=utf8
- 大小: 43.3 KB
- 大小: 14.9 KB
分享到:
相关推荐
多次解决多级联动菜单不成 无法将数据库的内容与界面联系起来
Ajax 联动菜单 Ajax 联动菜单Ajax 联动菜单
Asp Ajax 联动菜单 很好很实用. 测试没问题.
Ajax下拉框Ajax联动下拉框实现的例子
最近收集了很多联动菜单. 下拉联动菜单,有涉及到数据库的,有ajax的,有无限级ajax联动菜单. ....
ajax 联动菜单,操作的是数据库,是一个非常值得学习的实例。此外还用到了dwr,将js和java文件联系起来,操作起来非常方便。
AJAX无限级联动菜单 使用ASP.NET+AJAX和ACCESS数据库开发 简单易懂
ajax+jsp实现的多级联动菜单的实现。
AJAX三级联动菜单 用AJAX和jsp,servlet实现
ajax+jsp实现的四级联动菜单,里面有相应的代码和jsp页面。
无限级联动菜单(AJAX)教程和源码
ASP 实用的ajax二级联动菜单
ajax实现联动菜单.doc ajax实现联动菜单.doc
ajax+json实现多级联动菜单.doc
【程序老媛出品,必属精品,亲测校正,质量保证】 ...源码说明: 基于asp的ajax无限级联动菜单程序 可自定义添加联动菜单层数 包含完整代码和注释 很适合借鉴学习 适合人群:新手及有一定经验的开发人员
项目开发中经常用到的联动菜单,该示例代码用ajax实现 非常方便,下载后可以自行扩展
无刷新联动菜单 无刷新联动菜单 无刷新联动菜单