jquery+ajax+%24.getJson.docx
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html
<head>
<base href="<%=basePath%>">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv
<title>省市縣級聯</title>
<script type="text/javascript" src="jquery/jquery-1.4.2.js"></script>
<script type="text/javascript" src="extjs/ext/jquery.json.js"></script>
<script type="text/javascript">
$(document).ready(function
$.getJSON(
"city",
function(data){
$.each(data,function(cityIndex,city){
alert(city["cityname"]);
$("#province").empty(); //清空省列表
$("#province").append("<option value='0'>----選擇省份----</option>"); //新增一個初始化選擇項
$("#province").append("<option value="+city["cityid"]+">"+city["cityname"]+"</option>");
});
}
);
});
function findCity(){
$("#city").empty(); //清空城市列表
$("#city").append("<option value='0'>----選擇城市----</option>"); //新增一個初始化選擇項
$("#district").empty(); //清空區縣列表
$("#district").append("<option value='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節點
var cid=$(this).find("cid").text(); //獲取cid 的值
var cname=$(this).find("cname").text(); //獲取 cname的值
$("#city").append("<option value='"+cid+"'>"+cname+"</option>"); //新增到city 列表中
});
}
});
}
function findDistrict(){
$("#district").empty();
$("#district").append("<option value='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 (){
var did=$(this).find("did").text();
var dname=$(this).find("dname").text();
$("#district").append("<option value='"+did+"'>"+dname+"</option>");
});
}
});
}
</script>
</head>
<body>
<select id="province" onchange="findCity()">
<option value="0">----選擇省份----</option>
<c:forEach items="${provinceList}"var="p">
<option value="${p.pid }">${p.pname }</option>
</c:forEach>
</select>
<select id="city" onchange="findDistrict()">
<option value="0">----選擇城市----</option>
</select>
<select id="district">
<option value="0">----選擇縣區----</option>
</select>
</body>
</html>