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 ...
随机推荐
- Arduino + SmartAirFilter 制作智能感应的 PM 空气净化器
先说 SmartAirFilters 知道 SmartAirFilters 源自微博上转发的非常火的那个帖子,和动辄七八千元的商用产品比,几百元的 SmartAirFilters(下面简称电扇) 确实 ...
- 《MacTalk·人生元编程》
<MacTalk·人生元编程> 基本信息 <MacTalk·人生元编程> 基本信息 作者:池建强 出版社:人民邮电出版社 ISBN:9787115342232 上架时间:201 ...
- Coursera课程《大家的编程》（Python入门）中课程目录
Getting Started with Python Getting Started with Python is the first course in the specialization Py ...
- hadoop基准測试
写測试hadoop jarhadoop-0.20.2-test.jar TestDFSIO -write -nrFiles 10 -fileSize 1000 ----- TestDFSIO ---- ...
- atoi()，atof等函数的实现
atoi()函数的功能:将字符串转换成整型数:atoi()会扫描参数nptr字符串,跳过前面的空格字符,直到遇上数字或正负号才开始做转换,而再遇到非数字或字符串时('\0')才结束转化,并将结果返回( ...
- 如何查看ETW Trace?
三种方法: LogParser Tractrpt - C:\Windows\System32 SvcTraceViewer.exe 后面的链接中有使用的详细步骤. 参考资料 ========= ...
- 图解Eclipse或者SpringSource Tool Suite 创建模块化Maven项目
第一步:Package Explorer里选择右键,新建Maven项目,如果没有在Other里找,还没有确认一下是否安装了Maven插件 第二步:在Wizards向导里可以通过搜索,找到Maven P ...
- Cognos开发图表乱码问题
在此之前提到过在利用TR建模导入IQD数据源的时候遇到乱码的一种解决方案: http://www.cnblogs.com/wxjnew/p/3374029.html 今天说的是在RS中开发新报表的时候 ...
- debug输出rect，size和point的宏
#define NSLogRect(rect) NSLog(@"%s x:%.4f, y:%.4f, w:%.4f, h:%.4f", #rect, rect.origin.x, ...
- JVM总结-内存监视手段及各区域内存溢出解决
转载:https://blog.csdn.net/xuqu_volition/article/details/53786096 引言 本文仅关注一些常见的虚拟机内存监视手段,以及JVM运行时数据区各个 ...