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 ...
随机推荐
- 推荐Java程序员阅读的书籍(转)
作为Java程序员来说,最痛苦的事情莫过于可以选择的范围太广,可以读的书太多,往往容易无所适从.我想就我自己读过的技术书籍中挑选出来一些,按照学习的先后顺序,推荐给大家,特别是那些想不断提高自己技术水 ...
- Kafka开发环境搭建（五）
如果你要利用代码来跑kafka的应用,那你最好先把官网给出的example先在单机环境和分布式环境下跑通,然后再逐步将原有的consumer.producer和broker替换成自己写的代码.所以在阅 ...
- [转载] java的书
1. Java 语言基础 谈到Java 语言基础学习的书籍,大家肯定会推荐Bruce Eckel 的<Thinking in Java >.它是一本写的相当深刻的技术书籍,Java 语言基 ...
- GUI程序设计
1. 对话框(JDialog)使用示例 例1. JDialog简单使用示例. import javax.swing.JLabel; public class demoJDialog { JFrame ...
- Linux经常使用命令(三) - pwd
Linux中用 pwd 命令来查看"当前工作文件夹"的完整路径. 简单得说,每当你在终端进行操作时.你都会有一个当前工作文件夹. 在不太确定当前位置时.就会使用pwd来判定当前文件 ...
- ftp 命令行操作 经常使用命令
> ftp <host> [port] > pwd # 查看当前文件夹 > dir # 查看FTPserver中的文件及文件夹 > mkdir <dirn ...
- 为什么要使用href=”javascript:void(0);”？
JavaScript中语句最后的分号是可以缺省的,那为何要使用javascript:;而不是javascript:呢? 是习惯还是规范,我疑惑了! 具有代码洁癖的coder们,没事多写一个分号,圣洁的 ...
- java基础-四大特征
- iOS单元測试：Specta + Expecta + OCMock + OHHTTPStubs + KIF
框架选择 參考这篇选型文章,http://zixun.github.io/blog/2015/04/11/iosdan-yuan-ce-shi-xi-lie-dan-yuan-ce-shi-kuang ...
- Linux命令行和Shell高效率使用方法
Ctrl+R快速搜索history Ctrl+P显示上一条命令 快速执行一条history命令:!!/!-number ======================================== ...