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 ...
- 微信小程序省市联动
最近呢刚好做了一个省市联动的功能,今天看到有人问这个怎么做,我就把我做的放上来共享一下: 首先呢,来看看效果,点击文字'点击',弹出选择窗口,点击取消或者确定(取消.确定按钮在选择框上边,截图有些不清 ...
随机推荐
- 【FAQ】Maven 本地仓库明明有jar包，pom文件还是报错解决办法
方法一: 找到出错的jar包文件位置,删掉_maven.repositories文件 方法二: maven中的本地仓库的index索引没有更新导致 解决方案: 在eclipse中打开菜单 window ...
- [RHEL] RHEL7.0 下 Postfix + Dovecot 实现邮件发送
RHEL7.0 下 Postfix + Dovecot 实现邮件发送 一.前言 大家都对邮件服务(mail service)很感兴趣嘛.我在自己 博客站 预言了自己会实战一次,访问量一天到十几(毕竟平 ...
- centos启动错误：Inodes that were part of a corrupted orphan linked list found.
centos启动时,提示错误: /dev/mapper/VolGroup-lv_root contains a file system with errors,check forced. /dev/m ...
- mysql的left join、 right join和inner join
1.定义 left join:左联接,返回包括左表中的所有记录和右表中符合条件的记录. right join:右联接,返回包括右表中的所有记录和左表中符合条件的记录. inner join:等值联接, ...
- npm install 报错：ERR! code EINTEGRITY 解决方案
npm升级后,npm install 报错了,报错信息:ERR! code EINTEGRITY到处百度搜索解决方案,终于找到了!“npm cache verify”这条命令帮助了不少人 npm ca ...
- php 前台生成多维数组 后台批量添加
同一个地方绊倒两次,记录一下哈 1)前台表单,看 name <div class="tab-pane row " id="tab-1" > < ...
- 查看APK包签名的方法。
1.查看 keystore $ keytool -list -keystore debug.keystore 结果: Keystore type: JKS Keystore provider: SUN ...
- C#面试：委托
面试常见题: 1.委托是什么?★☆ 2.为什么需要委托?★☆ 3.委托能用来做什么?★☆ 4.如何自定义委托★☆ 5..NET默认的委托类型有哪几种?★☆ 6.怎样使用委托?★★★ 7.多播委托是什么 ...
- CKEditor图片上传实现详细步骤(使用Struts 2)
本人使用的CKEditor版本是3.6.3.CKEditor配置和部署我就不多说. CKEditor的编辑器工具栏中有一项“图片域”,该工具可以贴上图片地址来在文本编辑器中加入图片,但是没有图片上传. ...
- 用sql语句导出oracle中的存储过程和函数
用sql语句导出oracle中的存储过程和函数: SET echo off ; SET heading off ; SET feedback off ; SPOOL 'C:/PRC.SQL' repl ...