实现Ajax实现省市区三级级联，需要Java解析json技术
整体Demo下载地址如下: 点我下载
address.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
/**
* 得到XMLHttpRequest对象
*/
function getajaxHttp() {
var xmlHttp;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("您的浏览器不支持AJAX！");
return false;
}
}
}
return xmlHttp;
}
/**
* 发送ajax请求
* url--请求到服务器的URL
* methodtype(post/get)
* con (true(异步)|false(同步))
* functionName(回调方法名，不需要引号,这里只有成功的时候才调用)
* (注意：这方法有二个参数，一个就是xmlhttp,一个就是要处理的对象)
*/
function ajaxrequest(url, methodtype, con, functionName) {
//获取XMLHTTPRequest对象
var xmlhttp = getajaxHttp();
//设置回调函数（响应的时候调用的函数）
xmlhttp.onreadystatechange = function() {
//这个函数中的代码在什么时候被XMLHTTPRequest对象调用？
//当服务器响应时，XMLHTTPRequest对象会自动调用该回调方法
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
functionName(xmlhttp.responseText);
}
}
};
//创建请求
xmlhttp.open(methodtype, url, con);
//发送请求
xmlhttp.send();
}
window.onload=function(){
ajaxrequest("addressSerlvet?method=provincial","POST",true,addrResponse);
}
//动态获取省的信息
function addrResponse(responseContents){
var jsonObj = new Function("return" + responseContents)();
for(var i = 0; i < jsonObj.addrList.length;i++){
document.getElementById('select').innerHTML +=
"<option value='"+jsonObj.addrList[i].id+"'>"
+jsonObj.addrList[i].address+
"</option>"
}
}
//选中省后
function pChange(){
//先将市的之前的信息清除
document.getElementById('selectCity').innerHTML="<option value='-1'>请选择市</option>";
//再将区的信息清除
document.getElementById('selectArea').innerHTML="<option value='-1'>请选择区</option>";
//再将用户的输入清楚
document.getElementById("addr").innerHTML="";
var val = document.getElementById('select').value;
if(val == -1){
document.getElementById('selectCity')[0].selected = true;
return;
}
//开始执行获取市
ajaxrequest("addressSerlvet?method=city&provincial="+val,"POST",true,cityResponse);
}
//获取市的动态数据
function cityResponse(responseContents){
var jsonObj = new Function("return" + responseContents)();
for(var i = 0; i < jsonObj.cityList.length;i++){
document.getElementById('selectCity').innerHTML +=
"<option value='"+jsonObj.cityList[i].id+"'>"
+jsonObj.cityList[i].address+
"</option>"
}
}
//选中市以后
function cChange(){
var val = document.getElementById('selectCity').value;
//开始执行获取区
ajaxrequest("addressSerlvet?method=area&cityId="+val,"POST",true,areaResponse);
}
//获取区的动态数据
function areaResponse(responseContents){
var jsonObj = new Function("return" + responseContents)();
for(var i = 0; i < jsonObj.areaList.length;i++){
document.getElementById('selectArea').innerHTML +=
"<option value='"+jsonObj.areaList[i].id+"'>"
+jsonObj.areaList[i].address+
"</option>"
}
}
//点击提交按钮
function confirM(){
//获取省的文本值
var p = document.getElementById("select");
var pTex = p.options[p.options.selectedIndex].text;
if(p.value=-1){
alert("请选择省");
return;
}
//获取市的文本值
var city = document.getElementById("selectCity");
var cityTex = city.options[city.options.selectedIndex].text;
if(city.value=-1){
alert("请选择市");
return;
}
//获取区的文本值
var area = document.getElementById("selectArea");
var areaTex = area.options[area.options.selectedIndex].text;
if(area.value=-1){
alert("请选择区");
return;
}
//获取具体位置id文本值
var addr = document.getElementById("addr").value;
//打印
document.getElementById("show").innerHTML = "您选择的地址为 " + pTex + " " + cityTex + " " + areaTex + " " + addr;
}
</script>
<body>
<select id="select" onchange="pChange()">
<option value="-1">请选择省</option>
</select>
<select id="selectCity" onchange="cChange()">
<option value='-1'>请选择市</option>
</select>
<select id="selectArea" onchange="aChange()">
<option value='-1'>请选择市</option>
</select>
<input type="text" id="addr" />
<button onclick="confirM();">确定</button>
<div id="show"></div>
</body>
</html>
