//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联动菜单：深入解析与实现机制 在Web开发领域，动态加载数据并实时更新页面内容是提升用户体验的重要手段之一。Ajax（Asynchronous JavaScript and XML）技术因其无需刷新整个页面即可与服务器交互的能力，...
在ASP.NET开发中，Ajax联动菜单是一种常见的交互设计，它能提供流畅的用户体验，无需页面刷新即可更新相关信息。Ajax（Asynchronous JavaScript and XML）技术利用JavaScript异步处理数据，结合XML或其他格式的数据...
总之，Asp Ajax联动菜单的实现结合了服务器端的动态生成、客户端的异步交互和前端的动态更新，是提高Web应用交互性和性能的有效手段。对于Asp.NET开发者来说，熟悉并掌握这一技术对提升项目质量至关重要。
Ajax 联动菜单 Ajax 联动菜单Ajax 联动菜单
本资源包“联动菜单大全”包含了多种类型的联动菜单实现，包括与数据库交互的、使用AJAX技术的，以及无限级别的联动菜单。这些菜单方案可以极大地提升用户体验，尤其是在需要用户进行多级选择时。 首先，我们要理解...
**AJAX无限级联动菜单**是一种常见的Web交互技术，它基于ASP.NET框架，结合AJAX（Asynchronous JavaScript and XML）和ACCESS数据库实现。这个技术的主要目的是提供用户友好的界面，通过异步方式加载数据，无需刷新...
### AJAX 实现联动菜单 #### 一、简介 在现代Web开发中，用户交互体验是提升网站质量和吸引力的重要因素之一。传统的网页提交方式通常需要重新加载整个页面来更新部分数据，这种方式不仅耗时而且用户体验较差。...
【Ajax多级联动菜单】是一种常见的前端交互设计，它允许用户在选择某个菜单项时，自动更新下一级菜单的内容，以此类推，实现多级菜单之间的动态关联。这种技术广泛应用于网页表单填写、筛选器等场景，为用户提供更加...
**Ajax 三级联动菜单详解** Ajax（Asynchronous JavaScript and XML）技术是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。在Web开发中，它极大地提升了用户体验，使得页面交互更加流畅。本实例中...
这个"一个和数据库关联的，二级联动菜单示例ajax实现"是一个实用的代码示例，它展示了如何利用AJAX（异步JavaScript和XML）技术动态加载并更新二级菜单的内容，根据用户在一级菜单中的选择。 首先，我们来理解一下...
这个教程和源码将帮助你理解如何利用AJAX实现一个无限级联动菜单。 1. **AJAX基础** AJAX的核心是XMLHttpRequest对象，它可以异步地向服务器发送请求，获取响应数据。在JavaScript中，你可以通过创建...
【jsp+ajax 三级联动菜单】是一个典型的Web开发技术应用场景，它主要利用JavaServer Pages（JSP）和Asynchronous JavaScript and XML（AJAX）来实现动态网页中的数据交互和页面更新。在这个例子中，我们看到的是一个...
在这个"无限级联动菜单-AJAX版&JavaScript版"中，我们将深入探讨如何使用AJAX和JavaScript技术实现这种功能。 AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的...
本项目是关于使用AJAX实现一个三级联动菜单，这种菜单通常用于地区选择、类别筛选等场景，当用户在一级菜单中选择一项时，二级菜单会动态加载对应的数据，同理，选择二级菜单后，三级菜单也会相应地更新。...
【Ajax四级联动菜单】是一种基于Ajax技术实现的动态下拉菜单功能，通常用于网页上的地区选择，例如国家、省份、城市、区县等。在这个示例中，它使用了Oracle数据库存储四级菜单的数据，并结合JSP（JavaServer Pages...
总的来说，利用Ajax实现二级联动菜单是一种常见的前端技术实践，它能够提高用户体验，使网页操作更加流畅。通过深入学习和实践，你将能够灵活运用Ajax解决更多类似的问题，提升你的Web开发技能。
在本项目中，"ASP 实用的ajax二级联动菜单"是一个结合了这两种技术的应用，旨在创建一个响应快速、交互流畅的二级菜单系统。 在ASP中，我们通常会使用VBScript或JScript作为脚本语言来处理服务器端逻辑。在这个案例...