`
x125521853
  • 浏览: 71376 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

ajax联动菜单

    博客分类:
  • Ajax
阅读更多

    //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&amp;useUnicode=true&amp;characterEncoding=utf-8&amp;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
分享到:
评论
1 楼 zsw12013 2012-02-15  
怎么不把你的数据库的数据也发过来????

相关推荐

Global site tag (gtag.js) - Google Analytics