【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 实现:省级下拉变化时市下拉区下 ...
随机推荐
- 【转】odoo学习之：API整合文档
Odoo8.0新API文档 一.新API概述 在8中,api接口分为traditaional style和record style,traditional style指的就是我们在7中使用的类型,de ...
- [BZOJ1857][SCOI2010]传送带-[三分]
Description 传送门 Solution 三分套三分.代码简单但是证明苦兮兮.. 假如我们在AB上选了一个点G,求到该点到D的最小时间. 图中b与CD垂直.设目前从G到D所耗时间最短的路径为G ...
- 【LG3234】[HNOI2014]抄卡组
题面 题解 分三种情况: 若所有串都没有通配符,直接哈希比较即可. 若所有串都有通配符, 把无通配符的前缀 和 无通配符的后缀哈希后比较即可. 中间部分由于通配符的存在,一定可以使所有串匹配. 若部分 ...
- 2018.10.17校内模拟赛：T2神光
题面:pdf 首先排序,二分,然后怎么判定是否可行. 最简单的思路是,dp[i][j][k],到第i个,用了j次红光,k次绿光,前i个点都选上了,是否可行.然后转移就行. 然后考试的时候就想到这了,往 ...
- Oracle dba权限下修改用户密码 授予用户权限 解锁用户
1.修改用户密码 alter user scott identified by 123 2.授予用户权限 grant connect,resource to scott 3.解锁用户 alter us ...
- 用python SMTP进行邮件发送
import smtplib from email.mime.text import MIMEText from email.mime.multipart import MIMEMultipart & ...
- python-创建进程的三种方式
目录 1,os.fork() 方法 2,Process方法 3,Pool方法 1,os.fork() 方法 import os ret = os.fork() if ret == 0: #子进程 pr ...
- RetinaNet 迁移学习到自标数据集
Keras-RetinaNet 在自标数据集 alidq 上训练 detection model RetinaNet 模型部署与环境配置 参考README 数据预处理 数据统计信息: 类别:gun1, ...
- Python基础知识-05-数据类型总结字典
python其他知识目录 1.一道题,选择商品的序号.程序员和用户各自面对的序号起始值 如有变量 googs = ['汽车','飞机','火箭'] 提示用户可供选择的商品: 0,汽车1,飞机2,火箭用 ...
- java处理大文本2G以上
面试中经常碰到类似问题,问题的关键我觉得是用设置一个缓冲区 还有一个思路 是通过Linux split 命令将文件直接切割成小文件,再进行处理再汇总. 或者jdk7提供的 forkjoin 框架,利用 ...