01、案例：省市区三级联动

省市区三级联动，在位置查找时非常有用，如查找景点、查找酒店等操作。

项目操作步骤如下

(1) 定义省、市、区三个实体对象。

public class Province{
private String id;
private String name;
private List < City> cityList;
}
public class City{
private String id;
private String name;
private List < Country> countryList;
}
public class Country {
private String id;
private String name;
}

(2) 新建city.jsp，显示省市区信息。

< table border ="1">
< tr >< td>省级 :</td >
<td>< select name ="shengSelect"onchange = "getShiList()";
id="shengID”onclick = getShengName()">
<option value ="nulISelect">-- 请选择--</option>
<c:forEach var ="sheng" items ="{SarrSheng}">
S{sheng.id}">
< option value =${sheng.name}
</option>
</c:forEach >
</select ></td>
< td>市级: </td>"getQvList()">
<td>< select name ="shiSelect” id="shiID"onchange< option> --请选择 --</option ></select ></td><td>区县: </td><td>< select name ="gvSelect"id ="gvID”onclick = "getQvName()">-- 请选择-- </option >< option ></select ></td>
</tr >
</table>

(3) 访问 http://localhost:8080/CityThree/， web.xml中的欢迎页指向GetShengSvl。

<welcome- file-list >
< welcome - file> GetShengSvl </welcome - file></welcome- file-list>

(4) 新建控制器GetShengSvl。

@WebServlet("/GetShengSvl"
public class GetShengSvl extends HttpServlet{
   

读取所有省的数据,并转向 city.jsp 。

public void doPost(HttpServletRequest request
HttpServletResponse response)
throws ServletException，IOException{
   
 (TestBiz testBiz = new TestBiz();
List < Province> arrSheng = testBiz.getAllSheng();
if(arrSheng != null){
   
request.setAttribute("arrSheng"，arrSheng);
request.getRequestDispatcher("/WEB - INF/main/city.jsp”)
forward(request，response)
}

(5) 参见city.jsp，所有省的数据是使用JSTL填充的。

<c:forEach var ="sheng” items ="S(arrSheng]">
<option value ="s(sheng.id">Ssheng.name
</option>
</c:forEach >

(6) 在city.jsp页选择省的数据，会触发下拉框的onchange()事件。

function getShiList()
if($("# shengID").val() != "nullSelect"){
   
$ .getJSON("GetShiSvl",{
   sheng: ("# shengID").val()},
function callback(data)
$("# shiID").empty();
S (data).each( function(i){
   
S("<option value=” + datalil.id + ">"
+ data[i].name +"</option >").appendTo("# shiID");;
}）；
$ ("# shiID").change();  //触发#shiID的onChange 事件

else{
     
S ("# shiID").empty();
$ ("# qvID").empty();
$("< option >-- 请选择 -- </option >").appendTo("# shiID");
$("<option>--请选择 -- </option >").appendTo("#qvID");
}
}

(7) 新建控制器GetShiSvl，根据省的id返回该省下的所有市数据。

public void doPost(HttpServletRequest request, HttpServletResponse response）
throws ServletException， IOException{
   
String shengID = request.getParameter("sheng”);
TestBiz testBiz = new TestBiz();
List < City> cityList = testBiz.getShiBySheng(shengID)；
JSONArray jsonArray = JSONArray.fromObject(cityList);
response.setCharacterEncoding("utf - 8")；
response.getWriter().print(jsonArray.toString())
}

(8) 选择市，会触发下拉框的onchange()事件。

function getOvList(){
   
 {
   mathJaxContainer[0]} ("# shiID").val(),
sheng:$("# shengID").val())，function callback(data){
   
("# qvID").empty();
S (data).each(function(i){
   
$("<option value=" + datalil.id + ">"
+ data[i].name +"</option >").appendTo("# qvID");;
});
$("# qvID").click();

(9) 新建控制器GetQvSvl，根据市的id返回该市下的所有区县数据。

@WebServlet("/GetQvSvl") 
public class GetQvSvl extends HttpServlet{
   
public void service(HttpServletRequest request,HttpServletResponse response)
throw ServletException,IOException{
   
String provinceID = request.getParamenter("sheng");
String CityID = request.getParamenter("shi");
TestBiz biz = new TestBiz();
List<Country>qvList = biz.getCountrys(provinceID,CityID);
JSONArray jsonArray = JSONArray.fromObject(qvList);
response.setCharracterEncoding("UTF-8");
response.GetWriter().print(jsonArray.toString())
}
}

(10) 选择省，根据省的id返回该省下的所有市数据，JSON格式如下：

[("id":"tj01","name":"和平区"),
["id":"tj02","name":"河东区"},
["id":"tj03","name":"河西区"},
{
   "id":"tj04","name":"南开区"},
{
   "id":"tj05","name":"河北区"),
{
   "id":"tj06","name""红桥区"),
{
   "id":"tj07","name":"塘沽区"),
"id":"tj08","name":"汉沽区"),
{
   "id":"tj0g""name":"大港区"),
{
   "id":"tj10","name":"东丽区"),
"d":"tj11","name":"西青区"),
["id""tj12","name":"津南区"],
"id":"tj13","name":"北辰区"),
"d":"tj14","name":"武清区"),
"d"."tj15”"name":"宝抵区"}]

(11) 选择市，根据市的id返回的该市下的所有区县数据，JSON格式如下：

[("id":"tj16","name":"宁河县"),
"id":"tj17","name":"静海县"},
"id":"tj18","name":"蓟县"}]