【JavaScript&jQuery】省市区三级联动
HTML:
<%@page import="com.mysql.jdbc.Connection"%>
<%@ page language="java" import="java.util.*,com.ajax.connection.ConnectionUtil" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE HTML>
<html>
<head>
<title>ajax-省市区级联</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style type="text/css">
*{padding:0px;margin:0px}
body{font-family: "微软雅黑";font-size:14px;}
fieldset{padding:80px;width: 485px;margin: 100px auto;border-radius:8px;}
#province,#city,#area{padding:6px;width:120px;}
</style>
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
</head>
<body>
<%
List<HashMap<String,Object>> maps = ConnectionUtil.findProvinces();
pageContext.setAttribute("provinces", maps);
%> <fieldset>
<legend>省市区三级联动</legend>
省份:
<select id="province" onchange="select_citys(this)">
<option value="">-请选择-</option>
<!-- 循环显示所有省份 -->
<c:forEach var="pv" items="${provinces}">
<option value="${pv.id}">${pv.name}</option>
</c:forEach>
</select>
城市:
<select id="city" onchange="select_areas(this)">
<option value="">-请选择-</option>
</select>
区域:
<select id="area">
<option value="">-请选择-</option>
</select>
</fieldset> <script type="text/javascript">
//通过省份ID查询查询所有的城市信息
function select_citys(obj){
var provinceId = $(obj).val();
if(!provinceId)return; // 声明变量就要判断是否为null
$.ajax({
type:"post",//请求方式get/post
url:"${ctx}/CityServlet",//请求对应的地址
data:{"provinceId":provinceId},//往服务器传递的参数，
success:function(data){//服务器交互成功调用的回调函数，data就是服务器端传递出来的数据
var jdata = data.trim(); // 去前后空格
if(jdata=="fail"){
alert("查询失败!");
}else{
var jsonData = eval(jdata);//将字符串的json对象转换成json
$("#area").html("<option>-请选择-</option>");
append_template(jsonData,"city");
}
}
});
}; //通过省份ID查询查询所有的城市信息
function select_areas(obj){
var cityId = $(obj).val();
if(!cityId)return;
$.ajax({
type:"post",
url:"${ctx}/AreaServlet",
data:{"cityId":cityId},
success:function(data){
var jdata = data.trim();
if(jdata=="fail"){
alert("查询失败!");
}else{
var jsonData = eval(jdata);
append_template(jsonData,"area");
}
}
});
}; //封装其通用内容
function append_template(jsonData,target){
var length = jsonData.length;
var html = "<option>-请选择-</option>";
for(var i=0;i<length;i++){
html +="<option value='"+jsonData[i].id+"'>"+jsonData[i].name+"</option>";
}
$("#"+target).html(html);
};
</script>
</body>
</html>
过滤器：
package com.ajax.filter; import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; public class CharacterFilter implements Filter { private FilterConfig config; public void doFilter(ServletRequest req, ServletResponse resp,
FilterChain chain) throws IOException, ServletException {
HttpServletRequest request = (HttpServletRequest) req;
HttpServletResponse response = (HttpServletResponse) resp; String encoding = config.getInitParameter("encoding"); if (encoding != null) { response.setContentType("text/html ;charset=" + encoding); request.setCharacterEncoding(encoding); response.setCharacterEncoding(encoding);
} chain.doFilter(request, response);
} public void init(FilterConfig config) throws ServletException {
this.config = config;
}
public void destroy() {
}
}
web.xml:
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
id="WebApp_ID" version="3.0">
<display-name>ajaxDemo</display-name>
<!-- 字符编码集拦截器 -->
<filter>
<filter-name>CharacterFilter</filter-name>
<filter-class>com.ajax.filter.CharacterFilter</filter-class>
<!-- 配置初始化参数 -->
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
</filter>
<!-- 映射路径 -->
<filter-mapping>
<filter-name>CharacterFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<welcome-file-list>
<welcome-file>pages/province.jsp</welcome-file>
</welcome-file-list>
</web-app>
控制层代码：
package com.ajax.dao; import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.List; import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import org.apache.struts2.json.JSONException;
import org.apache.struts2.json.JSONUtil; import com.ajax.connection.ConnectionUtil; @WebServlet("/AreaServlet")
public class AreaServlet extends HttpServlet {
private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
} protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
PrintWriter out=response.getWriter();
String cid = request.getParameter("cityId");
if (cid != null && !cid.equals("")) {
int cityId = Integer.parseInt(cid);
List<HashMap<String, Object>> areas = ConnectionUtil
.findAreas(cityId);
try {
out.print(JSONUtil.serialize(areas));
} catch (JSONException e) {
e.printStackTrace();
}
} else {
out.print("fail");
}
} }
package com.ajax.dao; import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.List; import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import org.apache.struts2.json.JSONException;
import org.apache.struts2.json.JSONUtil; import com.ajax.connection.ConnectionUtil; @WebServlet("/CityServlet")
public class CityServlet extends HttpServlet {
private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
} protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
PrintWriter out=response.getWriter(); String pid = request.getParameter("provinceId");
if (pid != null && !pid.equals("")) {
int provinceId = Integer.parseInt(pid);
List<HashMap<String, Object>> citys = ConnectionUtil
.findCitys(provinceId);
try { out.print(JSONUtil.serialize(citys));
} catch (JSONException e) {
e.printStackTrace();
}
} else { out.print("fail");
}
} }
持久层代码：
package com.ajax.connection; import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List; public class ConnectionUtil { private static String url = "jdbc:mysql://localhost:3306/estore";
private static String username = "root";
private static String password = "f111111"; public static Connection getConnection(){
Connection connection = null;
try{
Class.forName("com.mysql.jdbc.Driver");
connection = DriverManager.getConnection(url,username,password);
return connection;
}catch(Exception ex){
return null;
}
} public static List<HashMap<String, Object>> findProvinces(){
Connection connection = null;
Statement statement = null;
ResultSet rs = null;
List<HashMap<String, Object>> maps = null;
try{
String sql = "SELECT id,province FROM tm_province order by sort asc";
connection = getConnection();
statement = connection.createStatement();
rs = statement.executeQuery(sql);
maps = new ArrayList<HashMap<String,Object>>();
HashMap<String, Object> map = null;
while(rs.next()){
map = new HashMap<String, Object>();
map.put("id", rs.getInt("id"));
map.put("name", rs.getString("province"));
maps.add(map);
}
return maps;
}catch(SQLException sql){
sql.printStackTrace();
return null;
}finally{
try{
if(rs!=null)rs.close();
if(statement!=null)statement.close();
if(connection!=null)connection.close();
}catch(SQLException sql){
sql.printStackTrace();
}
}
} public static List<HashMap<String, Object>> findCitys(int provinceId){
Connection connection = null;
PreparedStatement statement = null;
ResultSet rs = null;
List<HashMap<String, Object>> maps = null;
try{
String sql = "SELECT id,city FROM tm_city WHERE province_id = ?";
connection = getConnection();
statement = connection.prepareStatement(sql);
statement.setInt(1, provinceId);
rs = statement.executeQuery();
maps = new ArrayList<HashMap<String,Object>>();
HashMap<String, Object> map = null;
while(rs.next()){
map = new HashMap<String, Object>();
map.put("id", rs.getInt("id"));
map.put("name", rs.getString("city"));
maps.add(map);
}
return maps;
}catch(SQLException sql){
sql.printStackTrace();
return null;
}finally{
try{
if(rs!=null)rs.close();
if(statement!=null)statement.close();
if(connection!=null)connection.close();
}catch(SQLException sql){
sql.printStackTrace();
}
}
} public static List<HashMap<String, Object>> findAreas(int cityId){
Connection connection = null;
PreparedStatement statement = null;
ResultSet rs = null;
List<HashMap<String, Object>> maps = null;
try{
String sql = "SELECT id,area FROM tm_area WHERE city_id = ?";
connection = getConnection();
statement = connection.prepareStatement(sql);
statement.setInt(1, cityId);
rs = statement.executeQuery();
maps = new ArrayList<HashMap<String,Object>>();
HashMap<String, Object> map = null;
while(rs.next()){
map = new HashMap<String, Object>();
map.put("id", rs.getInt("id"));
map.put("name", rs.getString("area"));
maps.add(map);
}
return maps;
}catch(SQLException sql){
sql.printStackTrace();
return null;
}finally{
try{
if(rs!=null)rs.close();
if(statement!=null)statement.close();
if(connection!=null)connection.close();
}catch(SQLException sql){
sql.printStackTrace();
}
}
} }
【JavaScript&jQuery】省市区三级联动的更多相关文章
- jquery省市区三级联动
jquery省市区三级联动(数据来源国家统计局官网)内附源码下载 很久很久没有写博了. 今天更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们... JQUERY + ...
- jQuery省市区三级联动插件
体验效果:http://hovertree.com/texiao/bootstrap/4/支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> &l ...
- jquery省市区三级联动(数据来源国家统计局官网)内附源码下载
很久很久没有写博了. 今天更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们... JQUERY + JSON,无数据库,纯JS代码,无加密,无压缩,可直接使用在任何项 ...
- 原生javascript制作省市区三级联动详细教程
多级联动下拉菜单是前端常见的效果,省市区三级联动又属于其中最典型的案例.多级联动一般都是与数据相关联的,根据数据来生成和修改联动的下拉菜单.完成一个多级联动效果,有助于增强对数据处理的能力. 本实例以 ...
- 原生javascript实现省市区三级联动
腾讯IP分享计划(http://ip.qq.com/)有个现成的三级联动功能,查看源码后发现可以直接使用其单独的JS文件(http://ip.qq.com/js/geo.js). 分析后发现自己需要写 ...
- JS(JQuery) 省市区三级联动下拉选择
引入 area.js /* * 全国三级城市联动 js版 */ function Dsy(){ this.Items = {}; } Dsy.prototype.add = function(id,i ...
- Jquery省市区三级联动案例
//Java部分代码 public String province() throws Exception { List<Province> list=cityBiz.showProvinc ...
- jQuery省市区三级联动菜单
<style> select{ padding:5px 0; } .outer{ width:500px; margin:20px auto; } </style> <d ...
- 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下 ...
随机推荐
- c#字符串加载wpf控件模板代码 - 简书
原文:c#字符串加载wpf控件模板代码 - 简书 ResourceManager resManagerA = new ResourceManager("cn.qssq666.Properti ...
- 【MYSQL安装】mysql 5.6在centos6.4上的安装
1.卸载系统自带的mysql [root@zhangmeng ~]# rpm -qa |grep mysql mysql-libs--.el6_3.x86_64 [root@zhangmeng ~]# ...
- iOS 关于权限设置的问题
在info.plist文件下添加 <key>NSContactsUsageDescription</key> <string>请求访问通讯录</st ...
- stl源码分析之priority queue
前面两篇介绍了gcc4.8的vector和list的源码实现,这是stl最常用了两种序列式容器.除了容器之外,stl还提供了一种借助容器实现特殊操作的组件,谓之适配器,比如stack,queue,pr ...
- exe4j 使用记录（二）：jar打包exe
一.环境 exe4j: 6.0.2 jre(32位): 1.8 二.打包过程 1.新建一个文件夹testExe(我的目录位置:D:\testExe)用来存放所需要打成exe的jar包.jdk或者jre ...
- Selenide 阶段性总结介绍（UI自动化测试工具）
今天给大家介绍一个比较新的UI自动化测试工具-- Selenide.确实是比较新的,国内应该还没有多少人用它.在百度和google上你只能搜到一个中文帖子简单介绍了一下.如果你想用这个工具,不可避免的 ...
- C#入门经典第十章例题 - - 卡牌
1.库 using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace ...
- 622.设计循环队列 javascript实现
设计你的循环队列实现. 循环队列是一种线性数据结构,其操作表现基于 FIFO(先进先出)原则并且队尾被连接在队首之后以形成一个循环.它也被称为“环形缓冲器”. 循环队列的一个好处是我们可以利用这个队列 ...
- CsvHelper文档-3写
CsvHelper文档-3写 不用做任何设置,默认的情况下,csvhelper就可以很好的工作了.如果你的类的属性名称和csv的header名称匹配,那么可以按照下面的例子写入: var record ...
- Zabbix远程执行命令
原文发表于cu:2016-06-14 Zabbix触发器(trigger)达到阀值后会有动作(action)执行:发送告警信息或执行远程命令. 本文主要配置验证zabbix执行远程命令. 一．环境 S ...