【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 实现:省级下拉变化时市下拉区下 ...
随机推荐
- 客户端与服务器端同步Evernote
原文地址:http://www.zhihu.com/question/20238731 Evernote的同步方式是 以本地为基准同步到网络 还是 以网络为基准同步到本地 的? 若客户端从未与服务器端 ...
- 【转载】Direct3D基础知识
原文:Direct3D基础知识 重新从头开始学习DX,以前太急于求成了,很多基础知识都没掌握就开始写程序了,结果出了问题很难解决. 1. D3D体系结构 D3D与GDI处与同一层次,区 ...
- 初识JMM
目录 what is JMM? JMM变量存储结构 JMM三大特性 原子性 可见性 有序性 java 堆栈 静态存储 栈式存储 堆式存储 JVM是啥 参考<Inside JVM> what ...
- flask ssti python2和python3 注入总结和区别
总结一下flask ssti的注入语句 代码 import uuid from flask import Flask, request, make_response, session,render_t ...
- Linux 安装ActiveMQ(使用Mac远程访问)
阅读本文需要安装JDK 一 ActiveMQ简介 activemq是用java语言编写的一款开源消息总线 activemq是apache出品 activemq消息的传递有两种类型 一种是点对点: 即一 ...
- PHP核心技术——魔术方法
魔术方法: 魔术方法是以两个下画线开头.具有特殊作用的一些方法,可以看做PHP的"语法糖". set和get方法: class Account{ private $user=1; ...
- LeetCode--147.对链表进行插入排序
题目描述: 插入排序的动画演示如上.从第一个元素开始,该链表可以被认为已经部分排序(用黑色表示). 每次迭代时,从输入数据中移除一个元素(用红色表示),并原地将其插入到已排好序的链表中. 插入排序算法 ...
- 如何报FOB价格
FOB价格是当货物越过船舷,卖方即完成交货.FOB价格术语仅适用于海运或内河运输.在国际贸易中,FOB价格是比较常用的一种,FOB价格作为众多贸易中的一种需要外贸人员熟悉掌握. FOB价格是当货物越过 ...
- Amazon及其亏本诱饵策略还能坚持多久？
Amazon 刚刚公布了最新的财报,亏损 4100 万美元.这是这家电子商务巨头连续 5 个季度以来的第 3 次亏损.但是华尔街似乎却一片叫好声,当日 Amazon 的股价也涨了近 8 个点达 359 ...
- 王者荣耀交流协会final发布WBS+PSP
WBS: PSP: 时间为估计,大致精确. 类型 personal software process stages 预估时间 实际花费时间 planning 计划 4h 4h estimate 4h ...