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 ...
- 微信小程序省市联动
最近呢刚好做了一个省市联动的功能,今天看到有人问这个怎么做,我就把我做的放上来共享一下: 首先呢,来看看效果,点击文字'点击',弹出选择窗口,点击取消或者确定(取消.确定按钮在选择框上边,截图有些不清 ...
随机推荐
- [Objective-C语言教程]扩展（30）
类扩展与类别有一些相似之处,但它只能添加到编译时具有源代码的类中(类与类扩展同时编译). 类扩展声明的方法是在原始类的实现块中实现的,因此不能在框架类上声明类扩展,例如Cocoa或Cocoa Touc ...
- web worker的用法及应用场景（转）
首先简单介绍一下什么是web worker.我们都知道在浏览器中javascript的执行是单线程的,页面上的javascript在执行时会阻塞浏览器的响应,这非常影响用户体验,所以ajax应运而生了 ...
- Java_多线程
线程(Thread) 1.线程是CPU进行资源调度的最小单位 2.线程是进程实际运行的单位,处理进程中无数的小任务 3.线程共享代码和数据空间 4.一个进程可以并发多个线程,线程之间切换系统开销很小 ...
- Python的垃圾回收机制以及引用计数
Python中的计数引用 在Python中,由于Python一门动态的语言,内部采用的指针形式对数据进行标记的,并不像c/c++那样,通过指定的数据类型并分配相应的数据空间,Python中定义的变量名 ...
- C#-进制转换、基础语句、语句的总结与练习——★for循环：九九乘法表、三角形、菱形★
//for循环嵌套练习——打一个九九乘法表 ; i <= ; i++) { ; j <= i; j++) { Console.Write(j + "×" + i + & ...
- mariadb(mysql)的安装
1 使用官方源安装mariadb vim /etc/yum.repos.d/MariaDB.repo 添加repo仓库配置内容 [mariadb] name=MariaDB baseurl=http: ...
- Q147 对链表进行插入排序
插入排序的动画演示如上.从第一个元素开始,该链表可以被认为已经部分排序(用黑色表示). 每次迭代时,从输入数据中移除一个元素(用红色表示),并原地将其插入到已排好序的链表中. 插入排序算法: 插入排序 ...
- Service层异常处理
1.在service方法里面如果对异常进行了捕获的话,该事务是不会进行回滚的 * 默认spring事务只在发生未被捕获的 runtime excetpion()时才回滚. * * spring aop ...
- c# 操作excle[转]
//引用Microsoft.Office.Interop.Excel.dll文件 //添加using using Microsoft.Office.Interop.Excel; using Excel ...
- 我最近用Python写了一个算法，不需要写任何规则就能自动识别一个网页的内容
我最近用Python写了一个算法,不需要写任何规则就能自动识别一个网页的内容,目前测试了300多个新闻网站的新闻页,都能准确识别