ajax js java省市三级联动菜单,javaweb--json--ajax--mysql实现省市区三级联动(附三级联动数据库)(示例代码)...
在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 classProvince {privateString provinceid;privateString province;private ListcityList;publicString getProvinceid() {returnprovinceid;
}public voidsetProvinceid(String provinceid) {this.provinceid =provinceid;
}publicString getProvince() {returnprovince;
}public voidsetProvince(String province) {this.province =province;
}public ListgetCityList() {returncityList;
}public void setCityList(ListcityList) {this.cityList =cityList;
}
}
省servlet:==================================json转换==============================
public voiddoGet(HttpServletRequest request, HttpServletResponse response)throwsServletException, IOException {
response.setContentType("text/html;charset=utf-8");/** 1.得到dao所有的省
* 2.将list转换成json
* 3.发送给客户端*/Dao dao=newDao();
List plist=dao.getAllProvince();
String json=JSONArray.fromObject(plist).toString();
response.getWriter().print(json);
}
异步显示省:jsp==========这个只是ajax实现省份的代码,全部代码在后面:(重点:如何实现ajax+json衔接)
functioncreateXMLHttpRequest(){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.οnlοad= function() {/*一、发送异步请求,页面加载完成,每个省份生成一个option添加到,下*/
//1.得到核心对象
var xmlHttp=createXMLHttpRequest();//2.打开链接
xmlHttp.open("GET","",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的实际值赋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);
}
}
};
};
省市区三级联动
${test}
省:
===请选择===
市:
===请选择===
区(县):
===请选择===
三、省市区三级联动数据库:
四、完整代码
ajax js java省市三级联动菜单,javaweb--json--ajax--mysql实现省市区三级联动(附三级联动数据库)(示例代码)...相关推荐
- ajax js java省市三级联动菜单,AJAX省市区三级联动下拉菜单(java版)
此小程序的功能主要是采用异步请求方式从数据库中调取省市区信息显示到下拉列表: 代码如下: 建立数据库中的代码和一些配置文件信息就省略了,主要有javascript中的代码为: $(document). ...
- ajax里绑定框,Select级联菜单,用Ajax获取Json绑定下拉框(jQuery)
需求类似这样 ↓ ↓ ↓ --> 菜单A发生变化,动态取数据填充下拉菜单B. JS代码如下: $(function () { $("#TeamSelect").chan ...
- ajax获取java session的值_jquery 怎么获取 ajax中的session值
jquery 怎么获取 ajax中的session值 15 例如HttpContext.Current.Session["LogUserAccount"] = LogUserAcc ...
- java查看附近门店_微信公众号获取用户地理位置并列出附近的门店的示例代码...
思路分析: 1.在微信公众号内获取用户地理位置 需要js-sdk签名包(关于如何获取文档有介绍) 2.根据获取的地理位置ajax去后台请求,通过sql语句,查询中距离最近的门店(sql语句在网上搜的, ...
- java读取word文件并设置其字体样式_Java读取word文件,字体,颜色(示例代码)
在Android读取Word文件时,在网上查看时可以用tm-extractors,但好像没有提到怎么读取Word文档中字体的颜色,字体,上下标等相关的属性.但由于需要,要把doc文档中的内容(字体,下 ...
- java html读取数据库数据类型,从Word(Docx)读取方程式和公式到html并使用java保存数据库(示例代码)...
我有一个单词/ docx文件,其中包含图像下的方程式 我想要读取文件word / docx的数据并保存到我的数据库中,当需要时我可以从数据库中获取数据并在我的html页面上显示我使用apache Po ...
- java输出数组的最大值_JAVA 键盘输入数组,输出数组内容和最大值、最小值(示例代码)...
package shuzu; import java.util.Scanner; public class shuzu { /** * @param args */ public static voi ...
- java php python 高并发_关于php如何调用Python快速发送高并发邮件的示例代码
1 简介 在PHP中发送邮件,通常都是封装一个php的smtp邮件类来发送邮件.但是PHP底层的socket编程相对于python来说效率是非常低的.CleverCode同时写过用python写的爬虫 ...
- java poi word 复制_Java 使用POI填充Word表格内容和复制模板行属性方法示例代码
1、填充Word表格内容/** * 循环填充表格内容 * @param xwpfDocument * @param params * @param tableIndex * @throws Excep ...
- java 二级联动_java实现的二级联动菜单效果
本文实例讲述了java实现的二级联动菜单效果.分享给大家供大家参考,具体如下: JSP代码: 二级菜单联动演示 var req; window.οnlοad=function() {//页面加载时的函 ...
最新文章
- 分享一个web页面背景全屏的jquery插件Fullscreen Background
- 联想笔记本ideapad700 15isk添加内存
- 在Init之前究竟执行了什么?
- Hyperledger Fabric 排序服务核心原理和工作过程
- linux fedora35安装Pantheon桌面环境命令整理
- php框架中什么是渲染,thinkPHP5框架渲染模板的3种方式简述
- python去掉人像白边_python 使用plt画图,去除图片四周的白边方法
- C语言(CED)判断一个数是否是2的整数幂的简便方法!
- MAVEN 的常用命令
- 基于汇编语言及Proteus仿真的CPU8086水库水位监视系统
- linux远程连接交换机,思科:路由器、交换机 ssh远程连接
- 遵循PSR-4的自动加载
- React-flux杂记
- 史上最迷你人脸数据集olivettifaces基于卷积神经网络模型+迁移学习构建人脸识别模型实战
- [20141216]sqlplus的set appinfo.txt
- 【安全测试】AppScan:下载与安装
- 【Spring配置文件】Spring定时器的使用及配置
- 共模电压 matlab,SPWM死区对三电平高压变频器共模电压的影响
- storm apache java_Apache Storm 示例 Java 拓扑 - Azure HDInsight | Microsoft Docs
- 港股打新丨放弃药明巨诺,搞蚂蚁金服
热门文章
- 达内培训视频下载python
- 深入浅出设计模式---3、代理模式和工厂模式
- DOOM启世录的启示
- 班级量化考核系统php代码,学生信息量化考核管理系统
- u大师装iso系统linux,【iso怎么用u盘装系统】iso镜像怎么用u盘装_iso用u盘装系统-系统城...
- ExtJS入门到精通视频教程下载 ExtJS视频教程
- ubuntu安装gcc
- 时间序列入门概念整理
- eclipserunas里没有选项_在电脑浏览器里阅读某一微信公众号所有文章
- 涂抹oracle源代码,涂抹Oracle:三思笔记之一步一步学ORACLE