jquery+struts2+json省市县三级联动

最新推荐文章于 2021-11-25 21:02:18 发布

chundonghan

最新推荐文章于 2021-11-25 21:02:18 发布

阅读量1.3k

点赞数 1

分类专栏： javaweb 文章标签： jquery struts2.0 json

本文链接：https://blog.csdn.net/chundonghan/article/details/50878716

版权

javaweb 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前台页面

<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
	//加载页面 自动读取数据库省信息
	$(function() {
		var url = "${pageContext.request.contextPath}/json/jsonProvince";
		$.getJSON(url, function(data) {
			for (var i = 0; i < data.length; i++) {
				var ProvinceId = data[i].province_id;
				var province = data[i].province;
				$("#selectProvince").append(
						"<option value='"+ProvinceId+"'>" + province
								+ "</option>");
			}
		});
	});

	$(function() {
		$("#selectProvince").change(function() {
			var val = $(this).val();
			$("#selectCity :not(:first)").remove();
			$("#selectTown :not(:first)").remove();
			var url = "${pageContext.request.contextPath}/json/jsonCity";
			var args = {"province_id" : val};
			$.getJSON(url, args, function(data) {
				for (var i = 0; i < data.length; i++) {
					var cityId = data[i].city_id;
					var city = data[i].city;
					$("#selectCity").append(
							"<option value='"+cityId+"'>"
									+ city + "</option>");
				}
			});
		});

		$("#selectCity").change(function() {
			var val = $(this).val();
			$("#selectTown :not(:first)").remove();
			var url = "${pageContext.request.contextPath}/json/jsonTown";
			var args = {"city_id" : val};
			$.getJSON(url, args, function(data) {
				for (var i = 0; i < data.length; i++) {
					var townId = data[i].town_id;
					var town = data[i].town;
					$("#selectTown").append(
							"<option value='"+townId+"'>"
									+ town + "</option>");
				}
			});
		});
	});
</script>

<body>

	<select id="selectProvince" name="province_id">
		<option value="0">请选择。。。</option>
		
	</select>
	<select id="selectCity" name="city_id">
		<option value="0">请选择。。。</option>

	</select>
	<select id="selectTown" name="town_id">
		<option value="0">请选择。。。</option>

	</select>

</body>

struts.xml

<package name="json" namespace="/json" extends="struts-default"> 
	<action name="jsonProvince" class="com.demo.action.ProvinceAction" method="ajaxProvince"></action>
	<action name="jsonCity" class="com.demo.action.ProvinceAction" method="ajaxCity"></action> 
	<action name="jsonTown" class="com.demo.action.ProvinceAction" method="ajaxTown"></action>
		
</package>

action类

@Controller
public class ProvinceAction extends ActionSupport{
	@Autowired
	private ProvinceService provinceService;
	@Autowired
	private CityService cityService;
	@Autowired
	private TownService townService;

	private Town town;
	private List<Town> townList;

	public Town getTown() {
		return town;
	}
	public void setTown(Town town) {
		this.town = town;
	}
	public List<Town> getTownList() {
		return townList;
	}
	public void setTownList(List<Town> townList) {
		this.townList = townList;
	}
	private City city;
	private List<City> cityList;

	public City getCity() {
		return city;
	}
	public void setCity(City city) {
		this.city = city;
	}
	public List<City> getCityList() {
		return cityList;
	}
	public void setCityList(List<City> cityList) {
		this.cityList = cityList;
	}
	private Province province;
	private List<Province> provinceList;
	public Province getProvince() {
		return province;
	}
	public void setProvince(Province province) {
		this.province = province;
	}
	public List<Province> getProvinceList() {
		return provinceList;
	}
	public void setProvinceList(List<Province> provinceList) {
		this.provinceList = provinceList;
	}
	private int province_id;
	private int city_id;

	public int getCity_id() {
		return city_id;
	}
	public void setCity_id(int city_id) {
		this.city_id = city_id;
	}
	public int getProvince_id() {
		return province_id;
	}
	public void setProvince_id(int province_id) {
		this.province_id = province_id;
	}
	public String ajaxProvince(){
		HttpServletResponse response = ServletActionContext.getResponse();  
		response.setContentType("text/html;charset=UTF-8");     
		response.setCharacterEncoding("UTF-8");// 防止弹出的信息出现乱码    
		PrintWriter writer=null;
		try {
			writer = response.getWriter();
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		provinceList=provinceService.findAllProvince();
		JSONArray jsonArray = JSONArray.fromObject(provinceList); 
		writer.print(jsonArray.toString());
		return null;
	}
	public String ajaxCity(){
		HttpServletResponse response = ServletActionContext.getResponse();  
		response.setContentType("text/html;charset=UTF-8");     
		response.setCharacterEncoding("UTF-8");// 防止弹出的信息出现乱码    
		PrintWriter writer=null;
		try {
			writer = response.getWriter();
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		provinceList=provinceService.findAllProvince();
		cityList=cityService.findAllCity(province_id);
		JSONArray jsonArray = JSONArray.fromObject(cityList); 
		writer.print(jsonArray.toString());
		return null;
	}
	public String ajaxTown(){
		HttpServletResponse response = ServletActionContext.getResponse();  
		response.setContentType("text/html;charset=UTF-8");     
		response.setCharacterEncoding("UTF-8");// 防止弹出的信息出现乱码    
		PrintWriter writer=null;
		try {
			writer = response.getWriter();
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		townList=townService.findAllTown(city_id);
		JSONArray jsonArray = JSONArray.fromObject(townList); 
		writer.print(jsonArray.toString());

		return null;
	}

}

--the end--

chundonghan

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery+struts2+json省市县三级联动

前台页面<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.7.1.min.js"> //加载页面自动读取数据库省信息 $(function() { var url = "${pageContext.request.contextPath}/json/jsonProvin
复制链接

扫一扫

专栏目录