省市联动(struts2+ajax+非数据库)

最新推荐文章于 2017-03-15 19:52:48 发布

码农1425

最新推荐文章于 2017-03-15 19:52:48 发布

阅读量334

点赞数

CC 4.0 BY-SA版权

分类专栏： java

本文链接：https://blog.youkuaiyun.com/qq_25707185/article/details/52972522

java 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个基于前后端分离模式的省份城市联动实现方案。通过使用Ajax进行异步请求，前端可以动态更新城市列表。后端采用Struts框架，根据省份查询对应的城市列表，并通过JSON格式返回给前端。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//前台 代码

$.ajax(
	        {
		      type:"POST",
		      url:"${pageContext.request.contextPath}/findCityByProvinceRequest?id="+new Date().getTime(),
		      data:{"province":province},
		      success:function(backData,textStatus,ajax){}
            }
        );
	<select id="province">
		<option>选择省份</option>
		<option>广东</option>
		<option>湖南</option>
	</select>
	<select id="city">
		<option>选择城市</option>
	</select>
        
<script type="text/javascript">
		$("#province").change(function(){
			//删除原城市下拉框中的内容，除第一项外
			$("#city option:gt(0)").remove();
			var province = $("#province option:selected").text();
			if("选择省份" != province){
				$.ajax({
					"type":"POST",
					"url":"${pageContext.request.contextPath}/findCityByProvince?time="+new Date().getTime(),
					"sendData":{"province":province},
					"success":function(backData,textStatus,ajax){
						//js对象
						var city = backData.cityList;
						//jquery对象
						var $city = $(city);
						//each()
						$city.each(function(){
							//this表示每个城市
							var $option = $("<option>" + this + "</option>");
							$("#city").append( $option );
						});
					}
				});
			}
		});
	</script>

//后台struts代码
public class ProvinceCityAction extends ActionSupport{
	private String province;//广东
	public void setProvince(String province) {
		this.province = province;
	}
	public String findCityByProvince() throws Exception {
		cityList = new ArrayList<String>();
		if("广东".equals(province)){
			cityList.add("湛江");
			cityList.add("汕头");
		}else if("湖南".equals(province)){
			cityList.add("邵阳");
			cityList.add("浏阳");
		}
		return "ok";
	}
	private List<String> cityList;
	public List<String> getCityList() {
		return cityList;
	}
	/**
	 * var backData = {
	 * 					 "cityList":["邵阳","浏阳"]
	 * 				  }
	 */
}
        
<struts>

   <package name="timePackage" extends="json-default" namespace="/">
   		
   		<global-results>
   			<result name="ok" type="json"/>
   		</global-results>

		<!-- 获取服务端时间 -->
   		<action 
   			name="loadTimeRequest" 
   			class="cn.itcast.javaee.js.time.TimeAction" 
   			method="loadTimeMethod"/>

		<!-- 检查用户名和密码是否存在 -->
   		<action 
   			name="checkRequest" 
   			class="cn.itcast.javaee.js.register.RegisterAction" 
   			method="checkMethod"/>
   			
   		<!-- 根据省份查询城市 -->	
   		<action 
   			name="findCityByProvince" 
   			class="cn.itcast.javaee.js.provincecity.ProvinceCityAction" 
   			method="findCityByProvince"/>
 
   </package>

</struts>