在web中,实现三级联动很常见,尤其是利用jquery+json。但是从根本上来说jquery并不是最能让人容易理解的,接下来从最基本的javascript开始,实现由javascript+json+mysql实现三级联动:

一、涉及到的知识点:

1.ajax:(异步的javascript and xml)

1.简单来说就是不用刷新整个页面实现局部页面的动态改变:也就是不用重新发布工程而做到改变想要改变的数据。

2.实现异步的四个步骤:

1.得到核心对象

2.打开链接

3.发送

4.添加监听

2.json :用到的主要方法:

JSONArray.fromObject(object);将list数组转为json

JSONObject.fromObject(object);将javabean转为json

tostring();得到json串

3.javabean基于数据库的设计(算不上什么方法只能说是对数据库以及java面向对象的理解):

一对多,多对一,一对一表之间的设计关系,面向对象是关键:一个省有多个市,因此省bean中可以有list集合存市,但是市属于哪个省,也应该设计省对象记住市

事例演示:

二,核心代码:

首先是异步显示省的javabean:

public class Province {

    private String provinceid;
private String province;
private List<City> cityList;
public String getProvinceid() {
return provinceid;
}
public void setProvinceid(String provinceid) {
this.provinceid = provinceid;
}
public String getProvince() {
return province;
}
public void setProvince(String province) {
this.province = province;
}
public List<City> getCityList() {
return cityList;
}
public void setCityList(List<City> cityList) {
this.cityList = cityList;
} }

省servlet:==================================json转换==============================

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
/*
* 1.得到dao所有的省
* 2.将list<Province>转换成json
* 3.发送给客户端
*/
Dao dao=new Dao();
List<Province> plist=dao.getAllProvince();
String json=JSONArray.fromObject(plist).toString();
response.getWriter().print(json); }

异步显示省:jsp==========这个只是ajax实现省份的代码,全部代码在后面:(重点:如何实现ajax+json衔接)

<script type="text/javascript">
function createXMLHttpRequest(){
try {
return new XMLHttpRequest();//大多数浏览器
} catch (e) {
try {
return new ActiveXObject("msxml2.XMLHTTP");//IE6
} catch (e) {
try {
return new ActiveXObject("Micorsoft.XMLHTTP");//IE5甚至更早
} catch (e) { }
}
}
}
window.onload = function() { /*
一、发送异步请求,页面加载完成,每个省份生成一个option添加到,<select id="province">下
*/
//1.得到核心对象
var xmlHttp=createXMLHttpRequest();
//2.打开链接
xmlHttp.open("GET","<c:url value='/servlet/ProvinceServlet'/>",true);//要实现这个必须导入taglib标签体
//3.发送
xmlHttp.send(null);
//4.添加监听 xmlHttp.onreadystatechange=function(){
if (xmlHttp.readyState==4 && xmlHttp.status==200){
var proArry = eval("(" + xmlHttp.responseText + ")");//执行json字符串--得到数组
//遍历数组
for ( var i = 0; i < proArry.length; i++) {
var pro = proArry[i];//得到每个pro对象
var optionEle = document.createElement("option");//创建<option>元素
//给option的实际值赋pro.provinceid(省id) 而不是pro.province(省名称)
optionEle.value = pro.provinceid;
var textNode = document.createTextNode(pro.province);
optionEle.appendChild(textNode); //最后:把option元素添加到select元素中 document.getElementById("province").appendChild(optionEle);
}
}
};
};
</script>
<!--body部分的设计-->
<body >
<h1>省市区三级联动</h1>${test}
省:
<select name="province" id="province">
<option>===请选择===</option>
</select>
市:
<select name="city" id="city">
<option>===请选择===</option>
</select>
区(县):
<select name="area" id="area">
<option>===请选择===</option>
</select> </body>

三、省市区三级联动数据库:

https://files.cnblogs.com/files/wangsr-suc/Province_city_areas.zip

四、完整代码

点击下载

javaweb--json--ajax--mysql实现省市区三级联动(附三级联动数据库)的更多相关文章

  1. 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能

    使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下 ...

  2. jQuery读取json文件,实现省市区/县(国标)三级联动

    最近做一个微信项目,需要用户填写所在的省市区/县,决定使用jQuery读取json文件来实现省市区/县的联动. 其实很简单,jQuery文档也有详细解释: 代码如下: html <table w ...

  3. 项目总结01:JSP mysql SpringMvc下中国省市县三级联动下拉框

    JSP mysql SpringMvc下中国省市县三级联动下拉框 关键词 JSP  mysql数据库  SpringMvc  ajax   Controller层  Service层  中国地区  省 ...

  4. 原生JS实现省市区(县)三级联动选择

    原文地址→看过来 写在前面 前段时间写一个关于天气的东西,里面的省市区(县)城市选择让我很头疼,在网上搜索出来大都是借助插件或者第三方库,感觉这样做代码会很重,所以索性就把几种城市选择的方式实现一遍, ...

  5. Django ajax MYSQL Highcharts<1>

    Another small project with django/Ajax/Mysql/Highcharts. 看下效果图  - delivery dashboard .嘿嘿 是不是还蛮好看的. 废 ...

  6. JSON & Ajax

    Ajax是异步JavaScript和XML是用来在客户端作为一组相互关联的Web开发技术,以创建异步Web应用程序. Ajax模型,Web应用程序可以发送数据和检索数据从一个服务器,而不干扰现有的页面 ...

  7. MySQL 中国省市区SQL表数据

    MySQL 中国省市区SQL表数据   1.查省SELECT * FROM china WHERE china.Pid=02.查市SELECT * FROM chinaWHERE china.Pid= ...

  8. 超全面的JavaWeb笔记day15<mysql数据库>

    1.数据库的概述 2.SQL 3.DDL 4.DML 5.DCL 6.DQL MySQL 数据库 1 数据库概念(了解) 1.1 什么是数据库 数据库就是用来存储和管理数据的仓库! 数据库存储数据的优 ...

  9. 无法远程连接mysql,连接后也没有权限创建数据库

    问题现象:无法远程连接mysql,连接后也没有权限创建数据库 问题原因: MySql-Server 出于安全方面考虑只允许本机(localhost, 127.0.0.1)来连接访问. 这对于 Web- ...

  10. MySQL执行原理,逻辑分层、更改数据库处理引擎

    MySQL执行原理,逻辑分层.更改数据库处理引擎 作者:Stanley 罗昊 [转载请注明出处和署名,谢谢!] 用了那么长时间的MySQL,sql语句相信早已烂熟于心,于是,我就试着去了解它的执行原理 ...

随机推荐

  1. shiro 安全管理框架配置

    step1  web.xml <!-- Shiro filter start --> <filter> <filter-name>shiroFilter</f ...

  2. 从零开始的全栈工程师——利用CSS3画一个正方体 ( css3 )

    transform属性 CSS3的变形(transform)属性让元素在一个坐标系统中变形.transform属性的基本语法如下: transform:none | <transform-fun ...

  3. jQuery登录倒计时

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...

  4. 浅谈SQL Server中的事务日志(五)----日志在高可用和灾难恢复中的作用

    简介 日志的作用是保证持久性和数据一致性,通过日志可以实现数据的Undo与Redo,因此通过日志,SQL Server不仅仅可以实现灾难恢复,还可以通过日志的Redo来实现高可用性.本篇文章主要讲述日 ...

  5. 破解Power Designer 12.5

    PowerDesigner15.1破解补丁链接: https://pan.baidu.com/s/1boJoT6B 密码: 9x77 解压,将文件 pdflm15.dll替换安装目录的同名文件即可.

  6. C# 取整问题

    关于C#里的取整问题,有向上和向下两种取整方式[1]向上取整a=1.2345string res = Math.Ceiling(Convert.ToDecimal(a)).ToString();str ...

  7. Selenium2学习(十三)-- JS处理滚动条

    前言 selenium并不是万能的,有时候页面上操作无法实现的,这时候就需要借助JS来完成了. 常见场景: 当页面上的元素超过一屏后,想操作屏幕下方的元素,是不能直接定位到,会报元素不可见的. 这时候 ...

  8. 恢复scout工具栏

    删除scout安装路径 C:\PROGRAM FILES\SIEMENS\STEP7\U7UMC\DATA\WRKBNCH 下的三个文件: acppersi.dat uespersi.dat uesu ...

  9. 第一次团队Scrum

                                    长大一条龙之成绩查询 一.项目介绍             本项目的意义在于锻炼团队的scrum能力,加强团队合作能力.确定本项目采用的 ...

  10. 小故事学设计模式之Observer : (三) 老婆帮忙订机票

    (IT的事就是过场多,过场多了就容易忘,所以我们不妨看一个记一个,这也是一个办法,顺便还能跟同行们交流一下)  要和老婆一起回老家了, 成都离我们安徽太远, 两个人飞一下过去就要花掉近三千块, 于是我 ...