Ajax实现省市三级联动V1.1

2024-03-16 18:58
文章标签 实现 联动 省市 三级 ajax v1.1

本文主要是介绍Ajax实现省市三级联动V1.1，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

这是一个Servlet应用。。

该版本用到了Json-lib工具包，关于Json-lib的使用，请参见我的博文

http://blog.csdn.net/jadyer/archive/2011/02/01/6171659.aspx

首先是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>InitProvinceServlet</servlet-name> <servlet-class>com.jadyer.servlet.InitProvinceServlet</servlet-class> </servlet> <servlet> <servlet-name>GetCityServlet</servlet-name> <servlet-class>com.jadyer.servlet.GetCityServlet</servlet-class> </servlet> <servlet> <servlet-name>GetAreaServlet</servlet-name> <servlet-class>com.jadyer.servlet.GetAreaServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>InitProvinceServlet</servlet-name> <url-pattern>/servlet/InitProvinceServlet</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>GetCityServlet</servlet-name> <url-pattern>/servlet/GetCityServlet</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>GetAreaServlet</servlet-name> <url-pattern>/servlet/GetAreaServlet</url-pattern> </servlet-mapping> <!-- 在version="2.5"中，可以直接在<welcome-file-list>里执行Servlet应用 --> <welcome-file-list> <welcome-file>servlet/InitProvinceServlet</welcome-file> </welcome-file-list> </web-app>

然后是用来显示省市三级联动效果的index.jsp页面

<%@ page language="java" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <style> #area { background-color: #FFFFC0; font-size: 12px; color: green; } </style> <script type="text/javascript"> var xmlHTTP = new XMLHttpRequest(); //支持Internet Explorer-8.0.6001.18702 function getCitys(provinceID){ //若省份项选中了【==请选择省份==】则清空城市列表数据，并显示【==请选择城市==】 if('0' == provinceID){ clearCitys(); return; } xmlHTTP.open('GET', '${pageContext.request.contextPath}/servlet/GetCityServlet?provinceID='+provinceID, true); xmlHTTP.onreadystatechange = callbackCitys; //设置回调函数 xmlHTTP.setRequestHeader("if-Modified-Since", "0"); //设置不使用浏览器缓存 xmlHTTP.send(null); //发送请求 } function callbackCitys(){ if(4==xmlHTTP.readyState && 200==xmlHTTP.status){ //此时返回的数据类似于【[{"areas":[],"cityID":4,"cityName":"哈尔滨","description":"著名的冰城","parentID":0},{"areas":[],"cityID":5,"cityName":"佳木斯","description":"传说的贼城","parentID":0},{"areas":[],"cityID":6,"cityName":"双鸭山","description":"满族发源地","parentID":0}]】 var citys = eval(xmlHTTP.responseText); clearCitys(); var city = document.getElementById("city"); for(var i=0; i<citys.length; i++){ city.options[i+1] = new Option(citys[i].cityName, citys[i].cityID); //new Option(text,value) } } } //清空城市列表数据 function clearCitys(){ var city = document.getElementById('city'); document.getElementById("area").innerHTML = ""; city.length = 0; city.options[0] = new Option('==请选择城市==', '0'); } function getArea(cityID){ if('0' == cityID){ document.getElementById("area").innerHTML = ""; return; } xmlHTTP.open('GET', '${pageContext.request.contextPath}/servlet/GetAreaServlet?cityID='+cityID, true); xmlHTTP.onreadystatechange = callbackArea; xmlHTTP.setRequestHeader("if-Modified-Since", "0"); xmlHTTP.send(null); } function callbackArea(){ if(4==xmlHTTP.readyState && 200==xmlHTTP.status){ //此时返回的数据类似于【{"areas":[{"areas":[],"cityID":13,"cityName":"巴彦县","description":"我的家乡","parentID":0},{"areas":[],"cityID":14,"cityName":"延寿县","description":"延寿山庄","parentID":0},{"areas":[],"cityID":15,"cityName":"木兰县","description":"慈航古寺","parentID":0}],"cityID":4,"cityName":"哈尔滨","description":"著名的冰城","parentID":0}】 var city = eval('(' + xmlHTTP.responseText + ')'); var msg = "<p><b>" + city.cityName +"市为：" + city.description + "</b><br/>"; if(0 == city.areas.length){ msg += "没有区县"; }else{ msg += "其下有" + city.areas.length + "个区县，依次为：<br/>"; var areas = city.areas; for(var i=0; i<areas.length; i++){ msg += ("名称：" + areas[i].cityName + "&nbsp;&nbsp;&nbsp;&nbsp;描述：" + areas[i].description + "<br/>"); } } msg += "</p>"; document.getElementById("area").innerHTML = msg; } } </script> 省份： <select id="province" οnchange="getCitys(this.value)"> <option value="0">==请选择省份==</option> <c:forEach items="${requestScope.provinces}" var="province"> <option value="${province.cityID}">${province.cityName}</option> </c:forEach> </select> 城市： <select id="city" οnchange="getArea(this.value)"> <option>==请选择城市==</option> </select> <div id="area"></div>

然后是用于从数据库执行查询操作的CityDao.java

package com.jadyer.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 javax.naming.Context; import javax.naming.InitialContext; import javax.naming.NamingException; import javax.sql.DataSource; import com.jadyer.model.City; /** * 这里的代码，应该重构一下，但为了演示方便，就没有重构 */ public class CityDao { /** * 根据父ID得到所有一级子类 * @see 如果传递为0，则得到所有根节点 */ public List<City> findByParentID(int parentID){ String sql = "select cityID, cityName, description from city where parentID=?"; List<City> citys = new ArrayList<City>(); try { Context context = new InitialContext(); //有关jdbc/oracleds连接池的配置，参见http://blog.csdn.net/jadyer/archive/2010/11/10/6001023.aspx DataSource ds = (DataSource)context.lookup("java:/comp/env/jdbc/oracleds"); Connection conn = ds.getConnection(); PreparedStatement pstmt = conn.prepareStatement(sql); pstmt.setInt(1, parentID); ResultSet rs = pstmt.executeQuery(); while(rs.next()){ citys.add(new City(rs.getInt("cityID"), rs.getString("cityName"), rs.getString("description"))); } } catch (NamingException e) { e.printStackTrace(); } catch (SQLException e) { e.printStackTrace(); } return citys; } /** * 根据ID得到该城市的详细信息 */ public City fingByCityID(int cityID){ String sql = "select cityName, description from city where cityID=?"; City city = null; try { Context context = new InitialContext(); DataSource ds = (DataSource)context.lookup("java:/comp/env/jdbc/oracleds"); Connection conn = ds.getConnection(); PreparedStatement pstmt = conn.prepareStatement(sql); pstmt.setInt(1, cityID); ResultSet rs = pstmt.executeQuery(); while(rs.next()){ city = new City(cityID, rs.getString("cityName"), rs.getString("description")); } } catch (NamingException e) { e.printStackTrace(); } catch (SQLException e) { e.printStackTrace(); } return city; } }

用于储存City信息的实体类

package com.jadyer.model; import java.util.List; public class City { private Integer parentID; private Integer cityID; private String cityName; private String description; private List<City> areas; //新增。。用于储存该城市下所有区县的详细信息 /* 五个属性的getter和setter方法略 */ public City(){} public City(Integer cityID, String cityName, String description){ this.cityID = cityID; this.cityName = cityName; this.description = description; } }

用于初始化所有省份信息的InitProvinceServlet.java

package com.jadyer.servlet; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.jadyer.dao.CityDao; @SuppressWarnings("serial") public class InitProvinceServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { CityDao cityDao = new CityDao(); //获取所有省份的信息 request.setAttribute("provinces", cityDao.findByParentID(0)); request.getRequestDispatcher("/index.jsp").forward(request, response); } }

用于获取指定省份下的所有城市信息的GetCityServlet.java

package com.jadyer.servlet; import java.io.IOException; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONArray; import com.jadyer.dao.CityDao; import com.jadyer.model.City; @SuppressWarnings("serial") public class GetCityServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { response.setContentType("text/html; charset=UTF-8"); int provinceID = Integer.parseInt(request.getParameter("provinceID")); CityDao cityDao = new CityDao(); //返回该省份下的所有城市的信息 List<City> citys = cityDao.findByParentID(provinceID); JSONArray jsonObject = JSONArray.fromObject(citys); response.getWriter().println(jsonObject.toString()); } }

用于获取指定城市下的所有区县信息的GetAreaServlet.java

package com.jadyer.servlet; import java.io.IOException; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONObject; import com.jadyer.dao.CityDao; import com.jadyer.model.City; @SuppressWarnings("serial") public class GetAreaServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { response.setContentType("text/html; charset=UTF-8"); int cityID = Integer.parseInt(request.getParameter("cityID")); CityDao cityDao = new CityDao(); //得到该城市下所有区县的详细信息的集合 List<City> areas = cityDao.findByParentID(cityID); //得到当前城市的详细信息 City city22 = cityDao.fingByCityID(cityID); city22.setAreas(areas); JSONObject jsonObject = JSONObject.fromObject(city22); response.getWriter().println(jsonObject.toString()); } }

最后是数据库脚本文件

--Oracle 11g --创建表格 create table city( id number(3) primary key, parentID number(3), --0表示根节点 cityID number(3), cityName varchar(20), description varchar(20) ) --创建序列 create sequence city_sequence increment by 1 start with 1 nomaxvalue nocycle; --添加一级菜单 insert into city values(city_sequence.nextval, 0, 1, '黑龙江', '东北三省的黑龙江省'); insert into city values(city_sequence.nextval, 0, 2, '吉林省', '东北三省的吉林省'); insert into city values(city_sequence.nextval, 0, 3, '辽宁省', '东北三省的辽宁省'); --添加二级菜单 insert into city values(city_sequence.nextval, 1, 4, '哈尔滨', '著名的冰城'); insert into city values(city_sequence.nextval, 1, 5, '佳木斯', '传说的贼城'); insert into city values(city_sequence.nextval, 1, 6, '双鸭山', '满族发源地'); insert into city values(city_sequence.nextval, 2, 7, '长春', '中国汽车之都'); insert into city values(city_sequence.nextval, 2, 8, '辽源', '中国琵琶之乡'); insert into city values(city_sequence.nextval, 2, 9, '通化', '中国医药之城'); insert into city values(city_sequence.nextval, 3, 10, '沈阳', '中国优秀旅游城市'); insert into city values(city_sequence.nextval, 3, 11, '大连', '中国第一海军广场'); insert into city values(city_sequence.nextval, 3, 12, '铁岭', '中国小品王的家乡'); --添加三级菜单 --这里只提供了黑龙江省的三级联动数据，关于其它省份的数据，请自行添加 insert into city values(city_sequence.nextval, 4, 13, '巴彦县', '我的家乡'); insert into city values(city_sequence.nextval, 4, 14, '延寿县', '延寿山庄'); insert into city values(city_sequence.nextval, 4, 15, '木兰县', '慈航古寺'); insert into city values(city_sequence.nextval, 5, 16, '抚远县', '白四爷庙'); insert into city values(city_sequence.nextval, 5, 17, '汤原县', '西郎君城'); insert into city values(city_sequence.nextval, 5, 18, '桦川县', '鱼米之乡'); insert into city values(city_sequence.nextval, 6, 19, '集贤县', '大菩提寺'); insert into city values(city_sequence.nextval, 6, 20, '宝清县', '雁窝之岛'); insert into city values(city_sequence.nextval, 6, 21, '友谊县', '中苏友谊');

这篇关于Ajax实现省市三级联动V1.1的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/816397。

相关文章

Python使用Tenacity一行代码实现自动重试详解

Python使用Tenacity一行代码实现自动重试详解

《Python使用Tenacity一行代码实现自动重试详解》tenacity是一个专为Python设计的通用重试库,它的核心理念就是用简单、清晰的方式,为任何可能失败的操作添加重试能力,下面我们就来看... 目录一切始于一个简单的 API 调用Tenacity 入门：一行代码实现优雅重试精细控制：让重试按我
阅读更多...
Redis客户端连接机制的实现方案

Redis客户端连接机制的实现方案

《Redis客户端连接机制的实现方案》本文主要介绍了Redis客户端连接机制的实现方案,包括事件驱动模型、非阻塞I/O处理、连接池应用及配置优化,具有一定的参考价值,感兴趣的可以了解一下... 目录1. Redis连接模型概述2. 连接建立过程详解2.1 连php接初始化流程2.2 关键配置参数3. 最大连
阅读更多...
Python实现网格交易策略的过程

Python实现网格交易策略的过程

《Python实现网格交易策略的过程》本文讲解Python网格交易策略,利用ccxt获取加密货币数据及backtrader回测,通过设定网格节点,低买高卖获利,适合震荡行情,下面跟我一起看看我们的第一... 网格交易是一种经典的量化交易策略，其核心思想是在价格上下预设多个“网格”，当价格触发特定网格时执行买
阅读更多...
python设置环境变量路径实现过程

python设置环境变量路径实现过程

《python设置环境变量路径实现过程》本文介绍设置Python路径的多种方法：临时设置（Windows用`set`,Linux/macOS用`export`）、永久设置（系统属性或shell配置文件... 目录设置python路径的方法临时设置环境变量（适用于当前会话）永久设置环境变量（Windows系统
阅读更多...
Python对接支付宝支付之使用AliPay实现的详细操作指南

Python对接支付宝支付之使用AliPay实现的详细操作指南

《Python对接支付宝支付之使用AliPay实现的详细操作指南》支付宝没有提供PythonSDK,但是强大的github就有提供python-alipay-sdk,封装里很多复杂操作,使用这个我们就... 目录一、引言二、准备工作2.1 支付宝开放平台入驻与应用创建2.2 密钥生成与配置2.3 安装ali
阅读更多...
Spring Security 单点登录与自动登录机制的实现原理

Spring Security 单点登录与自动登录机制的实现原理

《SpringSecurity单点登录与自动登录机制的实现原理》本文探讨SpringSecurity实现单点登录（SSO）与自动登录机制,涵盖JWT跨系统认证、RememberMe持久化Token... 目录一、核心概念解析1.1 单点登录（SSO）1.2 自动登录（Remember Me）二、代码分析三、
阅读更多...
PyCharm中配置PyQt的实现步骤

PyCharm中配置PyQt的实现步骤

《PyCharm中配置PyQt的实现步骤》PyCharm是JetBrains推出的一款强大的PythonIDE,结合PyQt可以进行pythion高效开发桌面GUI应用程序,本文就来介绍一下PyCha... 目录1. 安装China编程PyQt1.PyQt 核心组件2. 基础 PyQt 应用程序结构3. 使用 Q
阅读更多...
Python实现批量提取BLF文件时间戳

Python实现批量提取BLF文件时间戳

《Python实现批量提取BLF文件时间戳》BLF（BinaryLoggingFormat）作为Vector公司推出的CAN总线数据记录格式,被广泛用于存储车辆通信数据,本文将使用Python轻松提取... 目录一、为什么需要批量处理 BLF 文件二、核心代码解析：从文件遍历到数据导出1. 环境准备与依赖库
阅读更多...
linux下shell脚本启动jar包实现过程

linux下shell脚本启动jar包实现过程

《linux下shell脚本启动jar包实现过程》确保APP_NAME和LOG_FILE位于目录内,首次启动前需手动创建log文件夹,否则报错,此为个人经验,供参考,欢迎支持脚本之家... 目录linux下shell脚本启动jar包样例1样例2总结linux下shell脚本启动jar包样例1#!/bin
阅读更多...
go动态限制并发数量的实现示例

go动态限制并发数量的实现示例

《go动态限制并发数量的实现示例》本文主要介绍了Go并发控制方法,通过带缓冲通道和第三方库实现并发数量限制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面... 目录带有缓冲大小的通道使用第三方库其他控制并发的方法因为go从语言层面支持并发，所以面试百分百会问到
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2