Java Web 应用开发案例｜使用 AJAX 实现省市区三级联动效果

作者：TiAmo

2023-07-27
江苏
本文字数：2262 字
阅读完需：约 7 分钟

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 requestHttpServletResponse 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":"蓟县"}]

复制代码

发布于: 6 小时前阅读数: 17

原文链接:【http://xie.infoq.cn/article/0d9f1e13e2f78101a75712c3d】。文章转载请联系作者。

TiAmo

关注

有能力爱自己，有余力爱别人！ 2022-06-16 加入

CSDN全栈领域优质创作者，万粉博主；阿里云专家博主、星级博主、技术博主、阿里云问答官，阿里云MVP；华为云享专家；华为Iot专家；

发布

暂无评论

创作场景

Java Web 应用开发案例｜使用 AJAX 实现省市区三级联动效果

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

TiAmo

评论