省份-城市-區域三級聯動【struts2 + ajax +非資料庫版】
阿新 • • 發佈：2018-12-04
package loaderman; /** * 實體，封裝省份和城市 */ public class Bean { private String province;//省份 private String city;//城市 public Bean(){} public String getProvince() { return province; } public void setProvince(String province) { this.province = province; }public String getCity() { return city; } public void setCity(String city) { this.city = city; } }
package loaderman; import java.util.List; import com.opensymphony.xwork2.ActionSupport; /** * 後臺控制器 */ public class ProvinceCityAreaAction extends ActionSupport{//業務層 private ProvinceCityAreaService provinceCityAreaService = new ProvinceCityAreaService(); //Bean是實體，封裝省份和城市 private Bean bean; public Bean getBean() { return bean; } public void setBean(Bean bean) { this.bean = bean; } /** * 根據省份查詢城市*/ public String findCityByProvince() throws Exception{ System.out.println("查詢城市進來了"); cityList = provinceCityAreaService.findCityByProvince(bean.getProvince()); //將List集合轉成JSON文字 return SUCCESS; } /** * 根據城市查詢區域 */ public String findAreaByCity() throws Exception{ System.out.println("查詢區域進來了"); areaList = provinceCityAreaService.findAreaByCity(bean.getCity()); //將List集合轉成JSON文字 return SUCCESS; } private List<String> cityList;//需要轉成JSON的集合，且為其設定值 private List<String> areaList;//需要轉成JSON的集合，且為其設定值 public List<String> getCityList() {//外掛會呼叫getXxx()方法來獲取需要轉成JSON的集合 return cityList; } public List<String> getAreaList() { return areaList; } }
package loaderman; import java.util.ArrayList; import java.util.List; /** * 業務層 */ public class ProvinceCityAreaService { /** * 根據省份查詢城市 */ public List<String> findCityByProvince(String province) throws Exception{ List<String> cityList = new ArrayList<String>(); if("廣東".equals(province)){ cityList.add("廣州"); cityList.add("深圳"); cityList.add("中山"); }else if("湖南".equals(province)){ cityList.add("長沙"); cityList.add("株洲"); } return cityList; } /** * 根據城市查詢區域 */ public List<String> findAreaByCity(String city) throws Exception{ List<String> areaList = new ArrayList<String>(); if("廣州".equals(city)){ areaList.add("天河"); areaList.add("白雲"); }else if("深圳".equals(city)){ areaList.add("寶安"); areaList.add("南山"); }else if("中山".equals(city)){ areaList.add("AA"); areaList.add("BB"); }else if("長沙".equals(city)){ areaList.add("CC"); areaList.add("DD"); }else if("株洲".equals(city)){ areaList.add("EE"); areaList.add("FF"); } return areaList; } }
<?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.3.dtd"> <struts> <!-- 理論：struts2的外掛包，就能將Action中的List轉成JSON文字 》匯入struts2-json-plugin-2.3.1.1.jar包到/WEB-INF/lib目錄下 》自已的包繼承json-default包，且json-default包繼承struts-default包 那麼自已的包能用到json-default和struts-default這二個包中的功能 》在Action中寫一個getXxx()方法返回需要轉成JSON字串的物件 --> <package name="mypackage" extends="json-default" namespace="/"> <!-- 全域性結果 --> <global-results> <result name="success" type="json"/> </global-results> <!-- 根據省份查詢城市 --> <action name="findCityRequest" class="loaderman.ProvinceCityAreaAction" method="findCityByProvince"> </action> <!-- 根據城市查詢區域 --> <action name="findAreaRequest" class="loaderman.ProvinceCityAreaAction" method="findAreaByCity"> </action> </package> </struts>
<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>省份-城市-區域三級聯動</title> <script type="text/javascript" src="js/jquery-1.8.2.js"></script> </head> <body> <select id="province"> <option>選擇省份</option> <option>湖南</option> <option>廣東</option> </select> <select id="city"> <option>選擇城市</option> </select> <select id="area"> <option>選擇區域</option> </select> <!-- 省份--城市 --> <script type="text/javascript"> //定位"省份"下拉框，同時提交change事件 $("#province").change(function(){ //清空城市下拉框中的內容，除第一項外 $("#city option:gt(0)").remove(); //清空區域下拉框中的內容，除第一項外 $("#area option:gt(0)").remove(); //獲取選中的省份 var province = $("#province option:selected").text(); //如果不是"選擇省份"的話 if("選擇省份" != province){ //非同步傳送請求到伺服器 //引數一：url表示請求的路徑 var url = "${pageContext.request.contextPath}/findCityRequest?time="+new Date().getTime(); //引數二：sendData表示以JSON格式傳送的資料 var sendData = { "bean.province" : province }; //引數三：function(){}處理或回撥函式 $.post(url,sendData,function(backData,textStatus,ajax){ //測試 //alert( ajax.responseText ); //測試，backData是一個js物件，cityList是屬性 var array = backData.cityList; //陣列的長度 var size = array.length; //迭代陣列 for(var i=0;i<size;i++){ //獲取陣列中的每個元素 var city = array[i]; //建立option元素 var $option = $("<option>"+city+"</option>"); //將option元素新增到城市下拉框中 $("#city").append( $option ); } }); } }); </script> <!-- 城市--區域 --> <script type="text/javascript"> //定位"城市"下拉框，同時提交change事件 $("#city").change(function(){ //清空區域下拉框中的內容，除第一項外 $("#area option:gt(0)").remove(); //獲取選中的城市 var city = $("#city option:selected").text(); //如果不是"選擇省份"的話 if("選擇城市" != city){ //非同步傳送請求到伺服器 //引數一：url表示請求的路徑 var url = "${pageContext.request.contextPath}/findAreaRequest?time="+new Date().getTime(); //引數二：sendData表示以JSON格式傳送的資料 var sendData = { "bean.city" : city }; //引數三：function(){}處理或回撥函式 $.post(url,sendData,function(backData,textStatus,ajax){ //測試 //alert( ajax.responseText ); //測試，backData是一個js物件，cityList是屬性 var array = backData.areaList; //陣列的長度 var size = array.length; //迭代陣列 for(var i=0;i<size;i++){ //獲取陣列中的每個元素 var area = array[i]; //建立option元素 var $option = $("<option>"+area+"</option>"); //將option元素新增到區域下拉框中 $("#area").append( $option ); } }); } }); </script> </body> </html>