jquery json ajax三级联动
province_city_area.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
</head>
<body>
<select id="provinceID">
<option>选择省份</option>
<option>湖南</option>
<option>广东</option>
<option>湖北</option>
</select>
<hr/>
<select id="cityID">
<option>选择城市</option>
</select>
<hr/>
<select id="areaID">
<option>选择区域</option>
</select>
<script type="text/javascript">
//省份-城市
$("#provinceID").change(function(){
//清空城市下拉框中的内容，除提示信息外
$("#cityID option:gt(0)").remove();
$("#areaID option:gt(0)").remove();
//获取选中的省份
var province = $("#provinceID option:selected").html();
var url = "${pageContext.request.contextPath}/ProvinceCityAreaJsonServlet?time="+new Date().getTime();
var sendData = {"province":province,"method":"provinceToCity"};
$.post(url,sendData,function(backData,textStatus,xhr){
//解析字符串
var jsonString = eval("("+backData+")");
var size = jsonString.city.length;
for(var i=0;i<size;i++){
//获取每一个城市
var city = jsonString.city[i];
var $option = $("<option>" + city + "</option>")
$("#cityID").append( $option );
}
});
});
//城市-区域
$("#cityID").change(function(){
$("#areaID option:gt(0)").remove();
var city = $("#cityID option:selected").html();
var url = "${pageContext.request.contextPath}/ProvinceCityAreaJsonServlet?time="+new Date().getTime();
var sendData = {"city":city,"method":"cityToArea"};
$.post(url,sendData,function(backData,textStatus,xhr){
var jsonString = eval("("+backData+")");
var size = jsonString.area.length;
for(var i=0;i<size;i++){
var area = jsonString.area[i];
var $option = $("<option>" + area + "</option>")
$("#areaID").append( $option );
}
});
});
</script>
</body>
</html>
ProvineCityAreaJsonServlet.java
package cn.itcast.web.servlet; import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; public class ProvinceCityAreaJsonServlet extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
String method = request.getParameter("method");
if("provinceToCity".equals(method)){
this.provinceToCity(request,response);
}else if("cityToArea".equals(method)){
this.cityToArea(request,response);
}
}
//省份到城市
private void provinceToCity(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
String province = request.getParameter("province");
String javaString = null;
if("广东".equals(province)){
javaString = "{city:['广州','深圳']}";
}else if("湖南".equals(province)){
javaString = "{city:['长沙','株洲']}";
}else if("湖北".equals(province)){
javaString = "{city:['武汉','黄冈']}";
}
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write(javaString);
}
//城市到区域
private void cityToArea(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
String city = request.getParameter("city");
String javaString = null;
if("广州".equals(city)){
javaString = "{area:['天河','白云']}";
}else if("深圳".equals(city)){
javaString = "{area:['南山','宝安']}";
}else if("长沙".equals(city)){
javaString = "{area:['天心','雨花']}";
}else if("株洲".equals(city)){
javaString = "{area:['雨湖','麓山']}";
}else if("武汉".equals(city)){
javaString = "{area:['汉口','武昌']}";
}else if("黄冈".equals(city)){
javaString = "{area:['红安','黄梅']}";
}
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write(javaString);
}
}
jquery json ajax三级联动的更多相关文章
- JQuery+Json 省市区三级联动
一.画面以及JS <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content=&qu ...
- Json 基于jQuery+JSON的省市联动效果
helloweba.com 作者:月光光 时间:2012-09-12 21:57 标签: jQuery JSON Ajax 省市联动 省市区联动下拉效果在WEB中应用非常广泛,尤其在一些 ...
- 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下 ...
- 项目一:第九天 1、前台客户登录 2、Jquery citypicker省市区三级联动插件 4、业务受理（在线下单）
1. 前台客户登录 2. Jquery citypicker省市区三级联动插件 3. 百度地图介绍 4. 业务受理(在线下单) 1 实现前台系统登录功能 1.1 Md5加密 admin(明文)---- ...
- 简单jquery实现select三级联动
简单的jquery实现select三级联动 代码如下: <!DOCTYPE html> <html> <head> <meta charset="u ...
- ajax验证表单元素规范正确与否 ajax展示加载数据库数据 ajax三级联动
一.ajax验证表单元素规范正确与否 以用ajax来验证用户名是否被占用为例 1创建表单元素<input type="text" id="t"> 2 ...
- 使用JSon实现三级联动
JSon实现三级联动 我觉得我这个方法比较麻烦,但是目前技术还比较弱,所以先做个笔记自己理解.目前没有和后台交互,只是在前台页面实现了 jQuery和JSon数据实现的,代码如下: <!DOCT ...
- jQuery实现select三级联动
参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQue ...
- 份-城市，基于jQuery的AJAX二级联动,用Struts2整合AJAX【非数据库版】
package loaderman.provincecity; import java.io.IOException; import java.util.LinkedHashSet; import j ...
随机推荐
- 【BZOJ】【3262】陌上花开
树套树 orz zyf 这题的思路……算是让我了解到了树套树的一种用途吧 三维...第一维排序,第二维树状数组,第三维treap 具体实现就是每个树状数组的节点保存一颗treap,然后就可以查询了. ...
- multiple definition of 问题解决方法
在最近的项目里,由于我想重载结构体的==操作符,然而大意的我把重载的过程写在了头文件里,所以导致了multiple definition of的错误.现在总结下解决方法: 首先,最关键的,不要把全局变 ...
- Java基础（九）：抽象类
在面向对象的概念中,所有的对象都是通过类来描绘的,但是反过来,并不是所有的类都是用来描绘对象的,如果一个类中没有包含足够的信息来描绘一个具体的对象,这样的类就是抽象类. 抽象类除了不能实例化对象之外, ...
- Ubuntu14.04下Neo4j图数据库官网安装部署步骤（图文详解）（博主推荐）
不多说,直接上干货! 说在前面的话 首先,查看下你的操作系统的版本. root@zhouls-virtual-machine:~# cat /etc/issue Ubuntu 14.04.4 LTS ...
- 菜鸟运维笔记：小记编译安装Nginx所遇到的坑
转载请注明出处:http://blog.csdn.net/guodongxiaren/article/details/40950249 谢谢合作 前言 无论是CentOS,或是Debian/Ubunt ...
- Faiss学习：一
在多个GPU上运行Faiss以及性能测试 一.Faiss的基本使用 1.1在CPU上运行 Faiss的所有算法都是围绕index展开的.不管运行搜索还是聚类,首先都要建立一个index. import ...
- oracle 之flashback 深入研究。
oracle 之flashback 深入研究. 今天是2013-08-24,开始进行oracle flashback 内部原理研究,记录一下笔记. SQL> startup ORACLE ins ...
- 如何在hosts文件添加自己想要解析的网站？及修改hosts的作用
http://union.zhuna.cn/help/144.asp 在Windows2003/XP系统中位于C:\Winnt\System32\Drivers\Etc 目录中,找到host文件. 首 ...
- Sql_Handle and Plan_Handle Explained
For batches, the SQL handles are hash values based on the SQL text. For database objects such as sto ...
- 转：Python模块学习 ---- httplib HTTP协议客户端实现
httplib 是 python中http 协议的客户端实现,可以使用该模块来与 HTTP 服务器进行交互.httplib的内容不是很多,也比较简单.以下是一个非常简单的例子,使用httplib获取g ...