1.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.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="cn.itcast.javaee.js.provincecityarea.ProvinceCityAreaAction" method="findCityByProvince"> </action> <!-- 根据城市查询区域 --> <action name="findAreaRequest" class="cn.itcast.javaee.js.provincecityarea.ProvinceCityAreaAction" method="findAreaByCity"> </action> </package> </struts>
2.Bean.java
package cn.itcast.javaee.js.provincecityarea; /** * 实体，封装省份和城市 * @author AdminTC */ 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; } }
3. Action
package cn.itcast.javaee.js.provincecityarea; 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{ cityList = provinceCityAreaService.findCityByProvince(bean.getProvince()); //将List集合转成JSON文本 return SUCCESS; } /** * 根据城市查询区域 */ public String findAreaByCity() throws Exception{ 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; } }
4.Ajax异步请求
<%@ 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>