json的省市联动
1 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
2 <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
3 <html>
4 <head>
5 <title>Title</title>
6 <script type="text/javascript">
7 /*
8 * 1、在文档加载完成后
9 * 获取所有省，添加到<select id="province">中
10 * 给<select id="province">这个元素添加onchange事件
11 * 事件内容：
12 * 1、获取当前选择的省id
13 * 2、使用省id访问servlet，得到该省下所有市
14 * 3、把每个市添加到<select id="city">中
15 * */
16 function createXMLHttpRequest() {
17 try {
18 return new XMLHttpRequest();
19 }catch (e) {
20 try {
21 return new ActiveXObject("Msxml2.XMLHTTP");
22 } catch (e) {
23 return new ActiveXObject("Micorsoft.XMLHTTP");
24 }
25 }
26 }
27 window.onload = function () {
28 /*
29 * 发送异步请求，得到所有省，然后使用每个省生成一个<option>元素添加到<select id="province">中
30 * */
31 var xmlHttp = createXMLHttpRequest();
32 xmlHttp.open("GET","<c:url value='/ProvinceServlet'/>",true);//打开连接
33 xmlHttp.send(null);//发送
34 xmlHttp.onreadystatechange = function () {//添加监听
35 if (xmlHttp.readyState == 4 ) {
36 if (xmlHttp.status == 200) {
37 var proArray = eval("("+xmlHttp.responseText+")");//执行服务器发送过来的json字符串，得到json的对象
38 for (var i = 0; i<proArray.length; i++) {
39 var pro = proArray[i];//得到每个pro对象
40 var optionEle = document.createElement("option");//创建<option>元素
41 optionEle.value = pro.pid;//<option>的实际值赋为pid，而不是name
42 var textNode = document.createTextNode(pro.name);//使用省名称来创建textNode
43 optionEle.appendChild(textNode);//把textNode添加到option元素中
44 document.getElementById("province").appendChild(optionEle);//把option元素添加到select元素中
45 }
46 }
47 }
48 };
49 //2、给<select id="province">添加change监听
50 document.getElementById("province").onchange = function () {
51 var xmlHttp = createXMLHttpRequest();//异步请求服务器，得到选择的省下的所有市
52 xmlHttp.open("POST", "<c:url value='/CityServlet'/>", true);//打开连接
53 xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //设置请求头
54 xmlHttp.send("pid="+this.value);//发送,用户选择的省
55 xmlHttp.onreadystatechange = function () {//添加监听
56 if (xmlHttp.readyState == 4) {
57 if (xmlHttp.status == 200) {
58 /*
59 * 0、先清空原来的<option>元素
60 * 1、得到服务器发送过来的所有市
61 * 2、使用每个市生成<option>元素添加到<select id="city">中
62 * */
63 //清空<select id="city">中的选项
64 var citySelect = document.getElementById("city");
65 var cityOptionArray = citySelect.getElementsByTagName("option");//获取select中的所有子元素
66 while (cityOptionArray.length >1) {
67 citySelect.removeChild(cityOptionArray[1]);
68 }
69 var cityArray = eval("("+xmlHttp.responseText+")");//得到服务器发送过来的所有市
70 for (var i = 0; i<cityArray.length; i++) {
71 var city= cityArray[i];//得到每个city对象
72 var optionEle = document.createElement("option"); //创建<option>元素
73 optionEle.value = city.cid;//<option>的实际值赋为pid，而不是name
74 var textNode = document.createTextNode(city.name);//使用城市名称来创建textNode
75 optionEle.appendChild(textNode);//把textNode添加到option元素中
76 citySelect.appendChild(optionEle);//把option元素添加到select元素中
77 }
78 }
79 }
80 };
81 };
82 };
83 </script>
84 </head>
85 <body>
86 <h1>省市联动</h1>
87 <select name="province" id="province">
88 <option value="">===请选择省份===</option>
89 </select>
90 <select name="city" id="city">
91 <option value="">===请选择城市===</option>
92 </select>
93 </body>
94 </html>
1 package web.servlet;
2
3 import dao.Dao;
4 import domain.Province;
5 import net.sf.json.JSONArray;
6 import javax.servlet.ServletException;
7 import javax.servlet.annotation.WebServlet;
8 import javax.servlet.http.HttpServlet;
9 import javax.servlet.http.HttpServletRequest;
10 import javax.servlet.http.HttpServletResponse;
11 import java.io.IOException;
12 import java.util.List;
13
14 @WebServlet(name = "ProvinceServlet",urlPatterns = "/ProvinceServlet")
15 public class ProvinceServlet extends HttpServlet {
16 protected void doGet(HttpServletRequest request, HttpServletResponse response)
17 throws ServletException, IOException {
18 response.setContentType("text/html;charset=utf-8");
19 /*
20 * 1、通过dao得到所有的省
21 * 2、把List<Province>转换成json
22 * 3、发送给客户端
23 * */
24 Dao dao = new Dao();
25 List<Province> provinces = dao.findAllProvince();
26 String json = JSONArray.fromObject(provinces).toString();
27 response.getWriter().print(json);
28 }
29 }
1 package web.servlet;
2
3 import dao.Dao;
4 import domain.City;
5 import net.sf.json.JSONArray;
6 import javax.servlet.ServletException;
7 import javax.servlet.annotation.WebServlet;
8 import javax.servlet.http.HttpServlet;
9 import javax.servlet.http.HttpServletRequest;
10 import javax.servlet.http.HttpServletResponse;
11 import java.io.IOException;
12 import java.util.List;
13
14 @WebServlet(name = "CityServlet",urlPatterns = "/CityServlet")
15 public class CityServlet extends HttpServlet {
16 protected void doPost(HttpServletRequest request, HttpServletResponse response)
17 throws ServletException, IOException {
18 request.setCharacterEncoding("utf-8");
19 response.setContentType("text/html;charset=utf-8");
20 /*
21 * 1、获取名为pid的参数
22 * 2、使用这个省的id查询数据库，得到List<City>
23 * 3、转换成json，转发给客户端
24 * */
25 int pid = Integer.parseInt(request.getParameter("pid"));
26 Dao dao = new Dao();
27 List<City> cityList = dao.findByProvince(pid);
28 String json = JSONArray.fromObject(cityList).toString();
29 response.getWriter().print(json);
30 }
31 }
1 package domain;
2
3 public class City {
4 private int cid;
5 private String name;
6 private Province province;//多方关联一方
7
8 public int getCid() {
9 return cid;
10 }
11 public void setCid(int cid) {
12 this.cid = cid;
13 }
14 public String getName() {
15 return name;
16 }
17 public void setName(String name) {
18 this.name = name;
19 }
20 public Province getProvince() {
21 return province;
22 }
23 public void setProvince(Province province) {
24 this.province = province;
25 }
26 @Override
27 public String toString() {
28 return "City{" + "cid=" + cid + ", name='" + name + '\'' + ", province=" + province + '}';
29 }
30 }
1 package domain;
2
3 import java.util.List;
4
5 public class Province {
6 private int pid;
7 private String name;
8 private List<City> cityList;//一方关联多方
9
10 public int getPid() {
11 return pid;
12 }
13 public void setPid(int pid) {
14 this.pid = pid;
15 }
16 public String getName() {
17 return name;
18 }
19 public void setName(String name) {
20 this.name = name;
21 }
22 public List<City> getCityList() {
23 return cityList;
24 }
25 public void setCityList(List<City> cityList) {
26 this.cityList = cityList;
27 }
28 @Override
29 public String toString() {
30 return "Province{" + "pid=" + pid + ", name='" + name + '\'' + ", cityList=" + cityList + '}';
31 }
32 }
1 package dao;
2
3 import cn.itcast.jdbc.TxQueryRunner;
4 import domain.City;
5 import domain.Province;
6 import org.apache.commons.dbutils.QueryRunner;
7 import org.apache.commons.dbutils.handlers.BeanListHandler;
8 import java.sql.SQLException;
9 import java.util.List;
10
11 public class Dao {
12 private QueryRunner qr = new TxQueryRunner();
13 //查询所有的省
14 public List<Province> findAllProvince() {
15 try {
16 String sql = "SELECT * FROM t_province";
17 return qr.query(sql,new BeanListHandler<Province>(Province.class));
18 } catch (SQLException e) {
19 throw new RuntimeException(e);
20 }
21 }
22 //查询指定省下的所有市
23 public List<City> findByProvince(int pid) {
24 try {
25 String sql = "SELECT * FROM t_city WHERE pid=?";
26 return qr.query(sql,new BeanListHandler<City>(City.class),pid);
27 } catch (SQLException e) {
28 throw new RuntimeException(e);
29 }
30 }
31 }
json的省市联动的更多相关文章
- Json 基于jQuery+JSON的省市联动效果
helloweba.com 作者:月光光 时间:2012-09-12 21:57 标签: jQuery JSON Ajax 省市联动 省市区联动下拉效果在WEB中应用非常广泛,尤其在一些 ...
- 基于jQuery+JSON的省市联动效果
省市区联动下拉效果在WEB应用中使用非常广泛,尤其在一些会员信息系统.电商网站最为常见,开发者一般使用AJAX实现无刷新下拉联动. 本文将讲述利用jQuery插件,通过读取JSON数据,实现无刷新动态 ...
- jquery.cityselect.js基于jQuery+JSON的省市或自定义联动效果
一.插件介绍 最早做省市联动的时候都特别麻烦,后来在helloweba的一篇文章中看到这个插件,很不错的,后来就一直用了. 省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统.电商网站最 ...
- jquery省市联动，根据公司需求而写
//author:guan //2015-05-25 //省市联动 //实用说明,页面引用如下js //<script src="../js/jquery-1.6.3.min.js&q ...
- 通过Javascript数组设计一个省市联动菜单
通过Javascript数组设计一个省市联动菜单 使用Option内置类来完成下拉选项的创建 2.使用定时器实现一个时钟程序 3.使用PHP+JSON完成语音验证码 网址:http://yuyin.b ...
- html + ashx 实现Ajax省市联动
基本思路:1.了解数据库中省和市的表结构及关联主键 2.创建html页面及select标签 3.通过ajax向ashx(一般处理程序)发送后台请求完成联动效果 表结构: 这里,开始创建一个命为demo ...
- 省市联动JQ封装比较简洁调用的方法
前言 因为省市联动的需求在每个项目几乎存在,所以本人也对此在web页面通过封装比较简洁的JQ方法循环判断调用调用后台获取数据再绑定到Select表单上.如果对代码有什么疑问或者更好办法可以在评论区留言 ...
- select省市联动选择城市 asp.net mvc4
本文在 http://www.cnblogs.com/darrenji/p/3606703.html(感谢博主的分享)基础上加入全国各省市,从文件中读取全国省市县,组成省市联动的选择标签 在Model ...
- 微信小程序省市联动
最近呢刚好做了一个省市联动的功能,今天看到有人问这个怎么做,我就把我做的放上来共享一下: 首先呢,来看看效果,点击文字'点击',弹出选择窗口,点击取消或者确定(取消.确定按钮在选择框上边,截图有些不清 ...
随机推荐
- Leetcode 102 二叉树的层次遍历 Python
二叉树的层次遍历 给定一个二叉树,返回其按层次遍历的节点值. (即逐层地,从左到右访问所有节点). 例如: 给定二叉树: [3,9,20,null,null,15,7], 3 / \ 9 20 ...
- java中mongo的条件查询
@Override public Page<ProductInfo> findAll(Pageable pageable, ProductInfo productInfo) { //创建一 ...
- linux 多线程之间信号传递
函数 sigwait sigwait的含义就如同它的字面意思:等待某个信号的到来.如果调用该函数的线程没有等到它想等待的信号那么该线程就休眠.要达到等到一个信号,我们得做下面的事: 首先,定义一个信号 ...
- C. Edgy Trees Codeforces Round #548 (Div. 2) 【连通块】
一.题面 here 二.分析 这题刚开始没读懂题意,后来明白了,原来就是一个数连通块里点数的问题.首先在建图的时候,只考虑红色路径上的点.为什么呢,因为为了不走红色的快,那么我们可以反着想只走红色的路 ...
- [意识流]简单易懂的AC自动机
为了一言不合就徒手敲AC自动机,决定看一下原理 于是花了一张图, 参考HDU2222的样例 于是看懂这张图的你很快就敲出了如下代码并且AC了 #include<bits/stdc++.h> ...
- 【GIS新探索】GeoHash原理和编解码实现
1.什么是GeoHash geohash基本原理是将地球理解为一个二维平面,将平面递归分解成更小的子块,每个子块在一定经纬度范围内拥有相同的编码.不好理解,没关系,我来找个图. 就像上面这张图,一个坐 ...
- [Xamarin.Android] 結合Windows Azure與Google cloud message 來實現Push Notification （转帖）
這一篇要討論如何使用Xamarin.Android 整合GCM以及Windows Azure來實作Android手機上的推播通知服務. 這篇文章比較著重概念的部分,在開始讀這篇之前,也可以先參考一下X ...
- 谈谈数据库的ACID
一.事务 定义:所谓事务,它是一个操作序列,这些操作要么都执行,要么都不执行,它是一个不可分割的工作单位. 准备工作:为了说明事务的ACID原理,我们使用银行账户及资金管理的案例进行分析. // 创建 ...
- C# string 特殊的引用类型
.Net 框架程序设计(修订版)中有这样一段描述:String类型直接继承自Object,这使得它成为一个引用类型,也就是说线程上的堆栈上不会驻留有任何字符串.(译注:注意这里的“直接继承”.直接继承 ...
- PHP 对目录下所有TXT进行遍历 并正则进行处理 preg_replace
<?php set_time_limit(); //遍历 指定目录下的所有 文件/ $pattern是要匹配的 文件规则 function file_list($dir,$pattern=&qu ...