json版(ajax第2个版本)省市联动效果_provinces[this.value];-CSDN博客

本文介绍了一个使用JSON和AJAX实现的省市联动效果，通过下拉菜单选择省份后，能够动态加载并显示对应城市的列表。示例代码展示了如何在Java环境中设置省份数据，并通过AJAX调用服务器获取城市信息。
json版(ajax第2个版本)省市联动效果

<%@page import="java.util.HashMap"%>
<%@page import="java.util.Map"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
	<%
	//实际项目中应该是从数据库中读取数据，这里为了测试，所以偷懒直接在这里写省的集合
	//省集合
	Map<String, String> provinces = new HashMap<String, String>();
	provinces.put("1", "江西省");
	provinces.put("2", "广东省");
	provinces.put("3", "浙江省");
	request.setAttribute("provinces", provinces);
	%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>(ajax第2个版本)省市联动效果</title>
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/body.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/mark.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/input2.css">
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/loading.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/console.js"></script>
</head>
<body>
	<center>
		<h3><font color="red">json版</font>(ajax第2个版本)省市联动效果</h3>
		<div class="testDiv2" id="showImg"></div>
		省:<select id="province" onchange="getServerCityByProvinceId(this.value)" style="width: 100px;height: 35px;">
		<option value="0">-请选择-</option>
		<c:forEach var="province" items="${requestScope.provinces}">
		<option value="${province.key}">${province.value}</option>
		</c:forEach>
		</select>
		市:<select id="city" style="width: 100px;height: 35px;">
		<option value="0">-请选择-</option>
		</select>
	</center>
</body>
<script type="text/javascript">

var xmlHttpRequest;
function createXmlHttpRequest(){
	//判断不同浏览器，采用不同方式创建XMLHttpRequest对象
	if (window.ActiveXObject) {
		//IE浏览器
		try {									
			xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e) {
			xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
		}
		return xmlHttpRequest;
	}else if(window.XMLHttpRequest){
		//其他浏览器如Firefox、Chrome等等
		return new XMLHttpRequest();
	}
}

//根据省id获取服务器上的市
function getServerCityByProvinceId(provinceId){
	if (provinceId == '0') {
		cleanCity();
		return;
	}
	//1.创建XMLHttpRequest对象
	xmlHttpRequest = createXmlHttpRequest();
	//2.设置回调函数
	xmlHttpRequest.onreadystatechange = getCitys;
	//请求的目标地址
	var url = "${pageContext.request.contextPath}/JsonCity?provinceId=" + provinceId;
	//3.初始化XMLHttpRequest组件
	//addTimestampParameter(url)函数不太好的就是，URL本身可能带有一些参数，那就要判断是加"?"还是加"&"了
	//xmlHttpRequest.open("GET", addTimestampParameter(url), true);
	xmlHttpRequest.open("GET", url, true);
	//xmlHttpRequest.open("POST", url, true);
	//推荐使用下面这种方式，简洁灵活，不影响URL参数
	xmlHttpRequest.setRequestHeader('If-Modified-Since', '0');
	//4.发送请求
	xmlHttpRequest.send(null);
	//显示加载图片
	showLoading(document.getElementById("city"), "${pageContext.request.contextPath}/img/loading1.gif");
}

//获得服务器端响应后返回的结果(根据省id返回该省下的全部市)
function getCitys(){
	var citySelectNode = document.getElementById("city");
	if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
		//隐藏加载图片
		hideLoading();
		//先清空下市
		cleanCity();
		var cityList = xmlHttpRequest.responseText;
		var citys = eval("(" + cityList + ")");
		debug("服务器端返回的json字符串结果为<font color='red'>" + cityList + "</font>");
		debug("<font color='blue'>总共" + citys.length + "个市</font>" + "  " + citys);
		for (var i = 0; i < citys.length; i++) {
		debug("市：" + citys[i].cityName);
		var optionNode = document.createElement("option");
		optionNode.text = citys[i].cityName; 
		optionNode.value = citys[i].cityId; 
		//citySelectNode.options[i] = optionNode;
		citySelectNode.appendChild(optionNode);
		var provinceSelectNode = document.getElementById("province");
		var provinceSelectNodeText = provinceSelectNode.options[provinceSelectNode.selectedIndex].text + "图片如下<br>"; 
		var imgStr = '<img width="790px" height="270px" title="ajax获取到服务器上的图片" src="${pageContext.request.contextPath}' + citys[i].imgPath + '">';
		document.getElementById("showImg").innerHTML = provinceSelectNodeText + imgStr;
		}
	}
}

//清空市
function cleanCity(){
	var citySelectNode = document.getElementById("city");
	citySelectNode.options.length = 0;
	//使用dom编程潜规则 (Option和Image)
	citySelectNode.options[0] = new Option("-请选择-", "0"); 
	document.getElementById("showImg").innerHTML = "";
}

</script>
</html>