省份-城市-区域三级联动【Struts2 + JSON版】

最新推荐文章于 2018-04-23 19:58:39 发布

Tomsheng321

最新推荐文章于 2018-04-23 19:58:39 发布

阅读量1.3k

点赞数

分类专栏： JS

JS 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

07_provincecityarea.jsp

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>省份-城市-区域三级联动【Struts2 + JSON版】</title>
    <script type="text/javascript" src="js/ajax.js"></script>
  </head>
  <body>
	
	<select id="provinceID" style="width:111px">
		<option>选择省份</option>
		<option>湖北</option>
		<option>湖南</option>
		<option>广东</option>
	</select>
	
	<select id="cityID" style="width:111px">
		<option>选择城市</option>
	</select>
	
	<select id="areaID" style="width:111px">
		<option>选择区域</option>
	</select>
	
	
	
	
	<!-- 省份->城市 -->
	<script type="text/javascript">
		document.getElementById("provinceID").onchange = function(){
			//清空城市下拉框
			var cityElement = document.getElementById("cityID");
			cityElement.options.length = 1;
			//清空区域下拉框
			var areaElement = document.getElementById("areaID");
			areaElement.options.length = 1;
			
			var province = this[this.selectedIndex].innerHTML;
			if("选择省份" != province){
				//NO1)
				var ajax = createAJAX();
				//NO2)
				var method = "POST";
				var url = "${pageContext.request.contextPath}/findCityByProvinceRequest?time="+new Date().getTime();
				ajax.open(method,url);
				//NO3)
				ajax.setRequestHeader("content-type","application/x-www-form-urlencoded")
				//NO4)
				var content = "bean.province=" + province;
				ajax.send(content);
				
				//-------------------------------------------等待
				
				//NO5
				ajax.onreadystatechange = function(){
					if(ajax.readyState == 4){
						if(ajax.status == 200){
							//NO6)返回JAVA格式的JSON文本
							var jsonJAVA = ajax.responseText;
							
							//p所代表的是java格式的json文本，是不能直接被js执行的
							//解决方案：将java格式的json文本，转成js格式的json文本
							//如何做：用js提供的一个函数搞定
							var jsonJS = eval("("+jsonJAVA+")");
							
							var array = jsonJS.cityList;
							var size = array.length;
							for(var i=0;i<size;i++){
								var city = array[i];
								var option = document.createElement("option");
								option.innerHTML = city;
								cityElement.appendChild(option);
							}
						}
					}			
				}
			}
		}
	</script>

	
	<!-- 城市->区域 -->
	<script type="text/javascript">
		document.getElementById("cityID").onchange = function(){
			var areaElement = document.getElementById("areaID");
			areaElement.options.length = 1;
			var city = this[this.selectedIndex].innerHTML;
			if("选择城市" != city){
				//NO1)
				var ajax = createAJAX();
				//NO2)
				var method = "POST";
				var url = "${pageContext.request.contextPath}/findAreaByCityRequest?time="+new Date().getTime();
				ajax.open(method,url);
				//NO3)
				ajax.setRequestHeader("content-type","application/x-www-form-urlencoded")
				//NO4)
				var content = "bean.city=" + city;
				ajax.send(content);
				
				//------------------------------------------等待
				
				//NO5)
				ajax.onreadystatechange = function(){
					
					if(ajax.readyState == 4){
						if(ajax.status == 200){	
							//NO6)
							var jsonJAVA = ajax.responseText;
							var jsonJS = eval("("+jsonJAVA+")");
							var array = jsonJS.areaList;
							var size = array.length;
							for(var i=0;i<size;i++){
								var area = array[i];
								var option = document.createElement("option");
								option.innerHTML = area;
								areaElement.appendChild(option);
							}
						}
					}
				}
				
			}
		}
	</script>
	

  </body>
</html>

ProvinceCityAreaAction.java

package cn.itcast.javaee.js.provincecityarea;

import java.util.ArrayList;
import java.util.List;

import com.opensymphony.xwork2.ActionSupport;

/**
 * 省份-城市-区域三级联动【Struts2 + JSON版】
 * @author AdminTC
 */
public class ProvinceCityAreaAction extends ActionSupport{
	private Bean bean;
	public Bean getBean() {
		return bean;
	}
	public void setBean(Bean bean) {
		this.bean = bean;
	}
	/**
	 * 根据省份获取城市 
	 */
	public String findCityByProvince() throws Exception {
		cityList = new ArrayList<String>();
		if("湖北".equals(bean.getProvince())){
			cityList.add("武汉");
			cityList.add("赤壁");
		}else if("湖南".equals(bean.getProvince())){
			cityList.add("郴州");
			cityList.add("张家界");
			cityList.add("浏阳");
		}else if("广东".equals(bean.getProvince())){
			cityList.add("阳江");
			cityList.add("清远");
			cityList.add("佛山");
			cityList.add("湛江");
		}
		//让struts2框架帮你将List/Set/Map<String>转成JSON文本
		return SUCCESS;
	}
	
	
	/**
	 * 根据城市获取区域 
	 */
	public String findAreaByCity() throws Exception {
		areaList = new ArrayList<String>();
		if("阳江".equals(bean.getCity())){
			areaList.add("AA");
			areaList.add("BB");
		}else if("清远".equals(bean.getCity())){
			areaList.add("CC");
			areaList.add("DD");;
		}else if("佛山".equals(bean.getCity())){
			areaList.add("EE");
			areaList.add("FF");
		}else if("湛江".equals(bean.getCity())){
			areaList.add("GG");
			areaList.add("HH");
		}else if ("武汉".equals(bean.getCity())) {
			areaList.add("II");
			areaList.add("JJ");
			areaList.add("KK");
		}else if ("赤壁".equals(bean.getCity())) {
			areaList.add("LL");
			areaList.add("MM");
		}else if ("郴州".equals(bean.getCity())) {
			areaList.add("NN");
			areaList.add("OO");
		}else if ("张家界".equals(bean.getCity())) {
			areaList.add("PP");
			areaList.add("QQ");
		}else if ("浏阳".equals(bean.getCity())) {
			areaList.add("RR");
			areaList.add("SS");
			areaList.add("TT");
		}
		return SUCCESS;
	}
	private List<String> areaList;//区域的集合
	private List<String> cityList;//城市的集合
	public List<String> getCityList() {
		return cityList;
	}
	public List<String> getAreaList() {
		return areaList;
	}
}

struts.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>

	<package name="myPackage" extends="json-default" namespace="/">
		
		<!-- 全局结果类型 -->
		<global-results>
			<result name="success" type="json"/>
		</global-results>
				
		<!-- 省份->城市 -->
		<action 
			name="findCityByProvinceRequest" 
			class="cn.itcast.javaee.js.provincecityarea.ProvinceCityAreaAction" 
			method="findCityByProvince">
		</action>
		
		
		<!-- 城市->区域 -->
		<action 
			name="findAreaByCityRequest" 
			class="cn.itcast.javaee.js.provincecityarea.ProvinceCityAreaAction" 
			method="findAreaByCity">
		</action>
		
	</package>

</struts>

输出结果：

Tomsheng321

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
省份-城市-区域三级联动【Struts2 + JSON版】

07_provincecityarea.jsp 省份-城市-区域三级联动【Struts2 + JSON版】选择省份湖北湖南广东选择城市选择区域城市 --> document.getElementById("provinceID").onchange = f
复制链接

扫一扫