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 ...
随机推荐
- 程序员眼中的RSA算法
RSA算法是数学应用于实际的一项伟大发明,起数学过程相对而言还是比较专业的,有兴趣可以看看. RSA算法的证明过程,详见:http://www.ruanyifeng.com/blog/2013/06/ ...
- mysql的TABLE_SCHEMA的sql和information_schema表, MySQL管理一些基础SQL语句, Changes in MySQL 5.7.2
3.查看库表的最后mysql修改时间, 如果第一次新建的表可能还没有update_time,所以这里用了ifnull,当update_time为null时用create_time替代 select T ...
- 硬件负载均衡F5和软负责均衡Nginx
请直接搜索相关文章了解:http://www.ideadata.com.cn/wisdomAction/readWisdom.do?id=75 F5,硬件 优点:能够直接通过智能交换机实现,处理能 ...
- Javascript中的Array(数组) 、{}(映射) 与JSON解析
做网页总会使用javascript,使用javascript总会使用JSON.最近用到一下,就写写. 下面是总结: 1.将javascript中的Array和{}转化为json字符串可以使用json2 ...
- LoadTestAgentResultsLateException in VS2010
遇到报错, 首先得先仔细读读人家给的出错信息. 而不是先怀疑是自己什么地方弄错了, 胡乱修改. 比如说, 遇到下面的报错: LoadTestAgentResultsLateException R ...
- Word Break II leetcode java
题目: Given a string s and a dictionary of words dict, add spaces in s to construct a sentence where e ...
- android 时间控件概述
android的自带时间选择控件,是一个让用户既能输入的又能选择的样子.这本来没有太大的问题了. 但是,坑爹的android是开源的.自带的时间控件在某些机型上,早已经是面目全非了,在用以一个普通用户 ...
- Jenkins——应用篇——插件使用——Publish over SSH
本文是jenkins应用系统文章的一部分,大部分来自工作和学习中的实践,部分内容来自官方文档和网友的文章,引用的文章会在"參考资料"部分附上原始链接,如无意中侵犯您的权利.请联系Q ...
- 如何在Linux上面安装GCC 4.1.2
安装步骤: 1.首先下载GCC 4.1.2的source code package: $ wget http://mirrors.ustc.edu.cn/gnu/gcc/gcc-4.1.2/gcc-4 ...
- Ensemble_learning 集成学习算法 stacking 算法
原文:https://herbertmj.wikispaces.com/stacking%E7%AE%97%E6%B3%95 stacked 产生方法是一种截然不同的组合多个模型的方法,它讲的是组合学 ...