用jsp实现省市区三级联动下拉
不少系统都需要实现省市区三级联动下拉,像人口信息管理、电子商务网站、会员管理等,都需要填写地址相关信息。而用ajax实现的无刷新省市区三级联动下拉则可以改善用户体验,目前基本上所有网站都是采用这一种方式。现在ajax的使用已经不像最初那样使用最原始的方法了,因为有很多的js框架供我们选择,我们只需要调用它们的一个方法就可以实现ajax功能,而其他的则交给js组件去完成。
最近整理了一份最新的全国省市区县数据库,再加上之前还没有在jsp中实现过省市区三级联动下拉,于是今天就花了一点时间结合jQuery框架来实现。
下面简单描述一下老k这次利用jsp+jquery实现省市区三级联动下拉的过程。
1.数据库准备
本实例使用的数据是MySQL,把demo.sql导入到数据库中即可。
2.Java后端
新建一个servlet,实现从数据库中读取数据,并把返回结果以json的格式输出到前端。要使用servlet,还需要在web.xml中进行配置。
3.jsp前端
调用jquery ajax方法调用servlet获取数据,前端利用json的相关js组件来把json字符串转换成js对象并循环生成下拉选项数据。为第一级和第二级下拉分别加上onchange事件。
到此已经大功告成,具体的代码可以下载本文java实例源码:jsp结合jquery实现省市区三级联动下拉源代码查看,下载后用myeclipse导入并部署到tomcat就可以访问项目看到效果了。程序比较容易扩展,如果数据齐全,实现n级联动下拉也是轻而易举的。
http://blog.csdn.net/kalision/article/details/39229953
http://pan.baidu.com/share/link?shareid=449587&uk=3288691396
用jsp实现省市区三级联动下拉的更多相关文章
- JQ与AJAX 省市区三级联动下拉框
用于初学者学习基本的联动下拉框,废话不多说,见代码 首先看控制器里的3个下拉框对应代码: public ActionResult GetProvinceList() { ProvinceReposit ...
- JS(JQuery) 省市区三级联动下拉选择
引入 area.js /* * 全国三级城市联动 js版 */ function Dsy(){ this.Items = {}; } Dsy.prototype.add = function(id,i ...
- 项目总结01:JSP mysql SpringMvc下中国省市县三级联动下拉框
JSP mysql SpringMvc下中国省市县三级联动下拉框 关键词 JSP mysql数据库 SpringMvc ajax Controller层 Service层 中国地区 省 ...
- PHP用ajia代码写三级联动下拉
下面是我做三级联动下拉的步骤以及逻辑 第一步:先做一个省市区表格 第二步:建个PHP页面显示用我是在<body>里放<div>用来接收要显示的省市区表格信息,里面嵌入jquer ...
- Android实现三级联动下拉框 下拉列表spinner
Android实现(省.市.县)三级联动下拉框 下拉列表spinner 转载请注明出处: http://www.goteny.com/articles/2013/11/46.html http://w ...
- Web 1三级联动 下拉框 2添加修改删除 弹框
Web 三级联动 下拉框 using System; using System.Collections.Generic; using System.Linq; using System.Web; u ...
- JS年月日三级联动下拉框日期选择代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery+html三级联动下拉框
jquery+html三级联动下拉框及详情页面加载时的select初始化问题 html写的三个下拉框,如下: <select name="ddlQYWZYJ" id=&q ...
- jquery+ligerform三级联动下拉框
如下为ligerform里的三级联动下拉框: var formData=[ {display:,width:,space:,type:"select",group:"区域 ...
随机推荐
- php new self()关键字的用法
今天开框架源码,发现有用到new self()的用法 有点不懂 在网上查了一下,给大家说一下: 在类中 self的用法 和this的用法差不多 , php new self() 一般在类内部使用 ...
- 百练oj 2815:城堡问题(dfs)
传送门: http://bailian.openjudge.cn/practice/2815 2815:城堡问题 查看 提交 统计 提示 提问 总时间限制: 1000ms 内存限制: 65536kB ...
- centos安装nodejs二进制包
1.下载nodejs的二进制包 wget https://nodejs.org/dist/v6.3.1/node-v6.3.1-linux-x64.tar.xz 2.解压下载的安装包 tar xf n ...
- Java虚拟机垃圾回收(三): 7种垃圾收集器(转载)
1.垃圾收集器概述 垃圾收集器是垃圾回收算法(标记-清除算法.复制算法.标记-整理算法.火车算法)的具体实现,不同商家.不同版本的JVM所提供的垃圾收集器可能会有很在差别,本文主要介绍HotSpot虚 ...
- Xtrabackup备份与恢复MySQL
1.innobackupex备份原理 .innobackupex启动并fork一个进程启动xtrabackup,然后等待xtrabackup备份InnoDB文件; .xtrabackup备份时存在两个 ...
- JAVA如何跨项目调用接口
public String load(String url, String query) throws Exception { URL restURL = new URL(url); /* * 此处的 ...
- python核心编程2 第十五章 练习
15-1.识别下列字符串 :“bat ”.“bit ”.“but ”.“hat ”.“hit” 或 “hut ” import re from random import choice strtupl ...
- 【c学习-13】
/*库函数 1:数学函数库:math.h abs():绝对值; acos(),asin(),atan():cos,sin,tan的倒数 exp():指数的次幂 pow(x,y):x的y次幂 log() ...
- Java源码解析——集合框架(五)——HashMap源码分析
HashMap源码分析 HashMap的底层实现是面试中问到最多的,其原理也更加复杂,涉及的知识也越多,在项目中的使用也最多.因此清晰分析出其底层源码对于深刻理解其实现有重要的意义,jdk1.8之后其 ...
- react native 踩坑之 SectionList state更新 不执行render重新渲染页面
官方文档中指出 SectionList 本组件继承自PureComponent而非通常的Component,这意味着如果其props在浅比较中是相等的,则不会重新渲染.所以请先检查你的renderIt ...