如何操作Ajax实现地域三级联动详解

操作Ajax来实现一个地域的三级联动,用Java代码来读json文件,先eclipse做一个简朴的,最基本的。(json我用的jackson来理会,也可用fastjson-阿里巴巴的等尚有许多)提供代码,思路之类的,注释也没有本身去想去琢磨出来的思路好

first:首先先要熟悉json文件,并要想好操作什么范例去理会,这是最难的,最好找一个没人的处所戴上耳机(对付初学)我是用maven来做的用到的jar坐标 :

<dependency> <groupId>redis.clients</groupId> <artifactId>jedis</artifactId> <version>2.9.0</version> <scope>compile</scope> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>3.1.0</version> <scope>provided</scope> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.11.2</version> </dependency>

文件位置:

如何操纵Ajax实现地区三级联动详解

second:首先建设一个html文件 three.html

如何操纵Ajax实现地区三级联动详解

如何操纵Ajax实现地区三级联动详解

加了一个字体居中和巨细的样式以至于不会太丢脸,太原生

首先来实现–省--的局部刷新,操作Ajax

<script type="text/javascript"> $(function(){ $.post("province",function(data){ $.each(data,function(){ $("#province").append("<option value="+this.code+">"+this.name+"</option>"); }) },"json") }) </script>

然厥后写对应的ProvinceController.class的代码(主要是逻辑,为什么我要用List<Map<String,Object>>范例)

package com.daben.controller; import java.io.FileInputStream; import java.io.IOException; import java.util.ArrayList; import java.util.Iterator; import java.util.List; import java.util.Map; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.fasterxml.jackson.core.type.TypeReference; import com.fasterxml.jackson.databind.ObjectMapper; @WebServlet("/province") public class ProvinceController extends HttpServlet{ private static final long serialVersionUID = -6513954606070061277L; @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { this.doPost(req, resp); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { resp.setContentType("appliaction/json;charset=utf-8");//可加可不加,json可在前端标注也可在后端 看本身习惯 我前后都加了 ObjectMapper om = new ObjectMapper(); //jackson焦点类 String path = req.getServletContext().getRealPath("/WEB-INF/classes/city_code.json");//操作servletContext(也有叫appliaction)来拿到文件的真实路径,也可以操作加载器拿都一样 FileInputStream fi = new FileInputStream(path);//流 List<Map<String, Object>> province = om.readValue(fi, new TypeReference<List<Map<String,Object>>>() {});//jackson理会的要领,为什么是这个要领,百度学的 操作TypeReference可理会你想要获得的范例 List<Map<String,Object>> list = new ArrayList<>(); Iterator<Map<String, Object>> iterator = province.iterator();//我用的迭代器遍历的 foreach等 也可以 while(iterator.hasNext()) { Map<String, Object> map2 = iterator.next(); map2.remove("city");//可写也可不写 list.add(map2); } om.writeValue(resp.getWriter(), list); } }

在three.html添加改变事件

代码较量简朴,就是跟简朴的清空 赋值 取值

$("#province").on("change", function(){ let code = $(this).find(":selected").val(); $.post("city",{"code":code}, function(data){ $("#city").empty(); $("#city").append("<option>---市---</option>"); $.each(data, function(){ $("#city").append("<option value="+this.code+">"+this.name+"</option>"); }) },"json"); });

再写对应的CityController.class(代码雷同)我为什么还会强转List<Map<String,Object>>范例

package com.daben.controller; import java.io.FileInputStream; import java.io.IOException; import java.util.ArrayList; import java.util.Iterator; import java.util.List; import java.util.Map; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.fasterxml.jackson.core.type.TypeReference; import com.fasterxml.jackson.databind.ObjectMapper; @WebServlet("/city") public class CityController extends HttpServlet{ private static final long serialVersionUID = -6513954606070061277L; @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { this.doPost(req, resp); } @SuppressWarnings("unchecked") @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { resp.setContentType("appliaction/json;charset=utf-8"); String code = req.getParameter("code"); req.getSession().setAttribute("cityCode", code); ObjectMapper om = new ObjectMapper(); String path = req.getServletContext().getRealPath("/WEB-INF/classes/city_code.json"); FileInputStream fi = new FileInputStream(path); List<Map<String, Object>> province = om.readValue(fi, new TypeReference<List<Map<String,Object>>>() {}); List<Map<String,Object>> list = new ArrayList<>(); Iterator<Map<String, Object>> iterator = province.iterator(); while(iterator.hasNext()) { Map<String, Object> map2 = iterator.next(); if(map2.get("code").equals(code)) { map2.remove("code"); map2.remove("name"); list=(List<Map<String,Object>>) map2.get("city"); break; } } List<Map<String,Object>> list1 = new ArrayList<>(); Iterator<Map<String,Object>> iterator2 = list.iterator(); while(iterator2.hasNext()) { Map<String,Object> next = iterator2.next(); next.remove("area"); list1.add(next); } om.writeValue(resp.getWriter(), list1); } }

不懂的话,可以先看一看city_code.json文件,多想一想

继承来three.html

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wsdfgw.html