jquery+ajax+%24.getJson.docx
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<%
Stringpath=request.getContextPath();
StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<basehref="<%=basePath%>">
<metahttp-equiv="pragma"content="no-cache">
<metahttp-equiv="cache-control"content="no-cache">
<metahttp-equiv="expires"content="0">
<metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">
<metahttp-equiv="description"content="Thisismypage">
<title>省市县级联</title>
<scripttype="text/javascript"src="jquery/jquery-1.4.2.js"></script>
<scripttype="text/javascript"src="extjs/ext/jquery.json.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$.getJSON(
"city",
function(data){
$.each(data,function(cityIndex,city){
alert(city["cityname"]);
$("#province").empty();//清空省列表
$("#province").append("<optionvalue='0'>----选择省份----</option>");//添加一个初始化选择项
$("#province").append("<optionvalue="+city["cityid"]+">"+city["cityname"]+"</option>");
});
}
);
});
functionfindCity(){
$("#city").empty();//清空城市列表
$("#city").append("<optionvalue='0'>----选择城市----</option>");//添加一个初始化选择项
$("#district").empty();//清空区县列表
$("#district").append("<optionvalue='0'>----选择县区----</option>");//添加初始化区县
$.ajax({
type:"POST",//发送给服务器的类型是post
url:"city",//发送到服务器的地址
data:"op=findCity&pid="+$("#province").val(),//请求的参数
dataType:"Json",//接受返回的数据类型
success:function(data){//定义回调函数success为成功返回
//1.转换成jquery对象,2.查找里面的citys节点,3.查找里面的ctiy节点
$(data).find("citys").find("city").each(function(){//遍历city节点
varcid=$(this).find("cid").text();//获取cid的值
varcname=$(this).find("cname").text();//获取cname的值
$("#city").append("<optionvalue='"+cid+"'>"+cname+"</option>");//添加到city列表中
});
}
});
}
functionfindDistrict(){
$("#district").empty();
$("#district").append("<optionvalue='0'>----选择县区----</option>");
$.ajax({
type:"POST",
url:"district.do",
data:"op=findDistrct&cid="+$("#city").val(),
dataType:"xml",
success:function(data){
$(data).find("districtList").find("district").each(function(){
vardid=$(this).find("did").text();
vardname=$(this).find("dname").text();
$("#district").append("<optionvalue='"+did+"'>"+dname+"</option>");
});
}
});
}
</script>
</head>
<body>
<selectid="province"onchange="findCity()">
<optionvalue="0">----选择省份----</option>
<c:forEachitems="${provinceList}"var="p">
<optionvalue="${p.pid}">${p.pname}</option>
</c:forEach>
</select>
<selectid="city"onchange="findDistrict()">
<optionvalue="0">----选择城市----</option>
</select>
<selectid="district">
<optionvalue="0">----选择县区----</option>
</select>
</body>
</html>