Ajax实现省市无穷级联动

2024-03-16 18:58
文章标签 实现 联动 省市 ajax 无穷

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

这是一个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"%> <script type="text/javascript"> var xmlHTTP = new XMLHttpRequest(); //支持Internet Explorer-8.0.6001.18702 var theTagID; //定义的全局变量，以便于在回调函数中使用之 function getCityList(provinceID, tagID){ var isDelete = false; theTagID = tagID; var sons = document.getElementById(tagID).childNodes; for(var i=(sons.length-1); i>=0; i--){ if("A" != sons[i].nodeName.toUpperCase()){ //if("UL" == sons[i].nodeName.toUpperCase()){ //二者等效 sons[i].parentNode.removeChild(sons[i]); isDelete = true; } } if(isDelete){ return; } xmlHTTP.open('GET', '${pageContext.request.contextPath}/servlet/GetCityServlet?provinceID='+provinceID, true); xmlHTTP.onreadystatechange = callbackCityList; xmlHTTP.setRequestHeader("if-Modified-Since", "0"); xmlHTTP.send(null); return false; } function callbackCityList(){ if(4==xmlHTTP.readyState && 200==xmlHTTP.status){ var citys = eval(xmlHTTP.responseText); if(0 == citys.length){ return; } var parentLI = document.getElementById(theTagID); var newUL = document.createElement("ul"); for(var i=0; i<citys.length; i++){ var newLI = document.createElement("li"); newLI.id = "tag" + citys[i].cityID; newLI.innerHTML = "<a href='#' οnclick='getCityList(" + citys[i].cityID + ", /"tag" + citys[i].cityID + "/");'>" + citys[i].cityName + "</a>"; newUL.appendChild(newLI); } parentLI.appendChild(newUL); } } </script> <ul> <c:forEach items="${requestScope.provinces}" var="province"> <li id="tag${province.cityID}"><a href="#" οnclick="return getCityList(${province.cityID}, 'tag${province.cityID}');">${province.cityName}</a></li> </c:forEach> </ul>

然后是用于从数据库执行查询操作的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 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"))); } } catch (NamingException e) { e.printStackTrace(); } catch (SQLException e) { e.printStackTrace(); } return citys; } /** * 根据ID得到该城市的详细信息 */ public City fingByCityID(int cityID){ String sql = "select cityName 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")); } } 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 List<City> areas; //用于储存该城市下所有区县的详细信息 /* 四个属性的getter和setter方法略 */ public City(){} public City(Integer cityID, String cityName){ this.cityID = cityID; this.cityName = cityName; } }

用于初始化所有省份信息的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) ) --创建序列 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, '友谊县'); --添加四级菜单 --这里只提供了哈尔滨市的四级联动数据，其它数据，请自行添加 insert into city values(city_sequence.nextval, 13, 22, '兴隆镇'); insert into city values(city_sequence.nextval, 13, 23, '龙庙镇'); insert into city values(city_sequence.nextval, 13, 24, '洼兴镇'); insert into city values(city_sequence.nextval, 14, 25, '六团镇'); insert into city values(city_sequence.nextval, 14, 26, '中和镇'); insert into city values(city_sequence.nextval, 14, 27, '加信镇'); insert into city values(city_sequence.nextval, 15, 28, '东兴镇'); insert into city values(city_sequence.nextval, 15, 29, '大贵镇'); insert into city values(city_sequence.nextval, 15, 30, '新民镇'); --添加五级菜单 --这里只提供了巴彦县的五级联动数据，其它数据，请自行添加 insert into city values(city_sequence.nextval, 22, 31, '长春乡'); insert into city values(city_sequence.nextval, 22, 32, '丰乐乡'); insert into city values(city_sequence.nextval, 22, 33, '德祥乡'); insert into city values(city_sequence.nextval, 23, 34, '山后乡'); insert into city values(city_sequence.nextval, 23, 35, '华山乡'); insert into city values(city_sequence.nextval, 23, 36, '红光乡'); insert into city values(city_sequence.nextval, 24, 36, '镇东乡'); insert into city values(city_sequence.nextval, 24, 36, '富江乡'); insert into city values(city_sequence.nextval, 24, 36, '松花乡'); --添加六级菜单 --理论上可无限添加。但实际中，用到四级菜单的情况都不是太多，故以下数据略

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


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

相关文章

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

利用康拓展开将一个排列映射成一个自然数，然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu
阅读更多...
【C++】_list常用方法解析及模拟实现

【C++】_list常用方法解析及模拟实现

相信自己的力量，只要对自己始终保持信心，尽自己最大努力去完成任何事，就算事情最终结果是失败了，努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一：什么是list？ •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二：list常用接口 •🌰1.默认成员函数 🔥构造函数（⭐） 🔥析构函数 •🌰2.list对象
阅读更多...
【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。 🏆《博客》：Python全栈，前后端开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi
阅读更多...
让树莓派智能语音助手实现定时提醒功能

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现，因为rasa本身是带有remindschedule模块的。不过经过一番折腾后，忽然发现，chatbot上实现的定时，语音助手不一定会有响应。因为，我目前语音助手的代码设置了长时间无应答会结束对话，这样一来，chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢？ 我最后选择的方法是用threading.Time
阅读更多...
Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸： 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  （注意不能是bmp格式） 替换默认锁屏壁纸： 将图片资源放入vendo
阅读更多...
C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

哈喽，你好啊，我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记，这是第6篇； 接下来实现实时显示当前选中红球数量，蓝球数量； 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时，在对应的位置显示实时已选择的红球、蓝球的数量； 02 标签名称 分别设置Label标签名称为：lblRedCount、lblBlueCount
阅读更多...
Kubernetes PodSecurityPolicy：PSP能实现的5种主要安全策略

Kubernetes PodSecurityPolicy：PSP能实现的5种主要安全策略

Kubernetes PodSecurityPolicy：PSP能实现的5种主要安全策略 1. 特权模式限制2. 宿主机资源隔离3. 用户和组管理4. 权限提升控制5. SELinux配置 💖The Begin💖点点关注，收藏不迷路💖 Kubernetes的PodSecurityPolicy（PSP）是一个关键的安全特性，它在Pod创建之前实施安全策略，确保P
阅读更多...
工厂ERP管理系统实现源码（JAVA）

工厂ERP管理系统实现源码（JAVA）

工厂进销存管理系统是一个集采购管理、仓库管理、生产管理和销售管理于一体的综合解决方案。该系统旨在帮助企业优化流程、提高效率、降低成本，并实时掌握各环节的运营状况。 在采购管理方面，系统能够处理采购订单、供应商管理和采购入库等流程，确保采购过程的透明和高效。仓库管理方面，实现库存的精准管理，包括入库、出库、盘点等操作，确保库存数据的准确性和实时性。 生产管理模块则涵盖了生产计划制定、物料需求计划、
阅读更多...
C++——stack、queue的实现及deque的介绍

C++——stack、queue的实现及deque的介绍

目录 1.stack与queue的实现 1.1stack的实现  1.2 queue的实现 2.重温vector、list、stack、queue的介绍 2.1 STL标准库中stack和queue的底层结构  3.deque的简单介绍 3.1为什么选择deque作为stack和queue的底层默认容器  3.2 STL中对stack与queue的模拟实现 ①stack模拟实现
阅读更多...
基于51单片机的自动转向修复系统的设计与实现

基于51单片机的自动转向修复系统的设计与实现

文章目录 前言资料获取设计介绍功能介绍设计清单具体实现截图参考文献设计获取 前言 💗博主介绍：✌全网粉丝10W+,CSDN特邀作者、博客专家、CSDN新星计划导师，一名热衷于单片机技术探索与分享的博主、专注于 精通51/STM32/MSP430/AVR等单片机设计 主要对象是咱们电子相关专业的大学生，希望您们都共创辉煌！✌💗 👇🏻 精彩专栏 推荐订阅👇🏻 单片机
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2