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>
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> 輸出結果：
