ajax版省市联动

最新推荐文章于 2026-06-23 13:52:18 发布

原创最新推荐文章于 2026-06-23 13:52:18 发布 · 186 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#ajax #js #javascript

本文介绍了一种使用Ajax技术实现的省市联动效果，通过下拉菜单选择省份后，能够动态从服务器获取对应城市的列表。文章提供了完整的HTML、CSS和JavaScript代码示例，展示了如何创建XMLHttpRequest对象与服务器进行异步通信，以及如何处理服务器返回的数据。

ajax版省市联动

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!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版省市联动</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>
<h2>ajax版省市联动</h2>
<h3>
<font color="red">你的家乡在哪里？</font>
</h3>
<!-- 在实际应用中，省下拉框中的内容应该动态生成，我这里为了测试，写的比较简单 -->
省:
<select id="province" onchange="getServerCityByProvinceId(this.value)">
<option value="0">-请选择-</option>
<option value="1">广东</option>
<option value="2">江西</option>
<option value="3">浙江</option>
</select>
市:
<select id="city">
<option>-请选择-</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}/City?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) {
		//先清空下市
		cleanCity();
		var resultCitys = xmlHttpRequest.responseText;
		var citys = resultCitys.split(",");
		debug(citys + "-总共" + citys.length + "个市");
		for (var i = 0; i < citys.length; i++) {
		debug(citys[i]);
		var optionNode = document.createElement("option");
		optionNode.text = citys[i]; 
		optionNode.value = citys[i]; 
		//citySelectNode.options[i] = optionNode;
		citySelectNode.appendChild(optionNode);
		}
		//隐藏加载图片
		hideLoading();
	}
	
}

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

</script>
</html>