使用Ajax怎么实现一个三级联动功能？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
10年积累的
成都做网站、网站制作经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先
建设网站后付款的网站建设流程，更有
抚顺县免费网站建设让你可以放心的选择与我们合作。
前言：
利用Ajax来实现一个地区的三级联动，用Java代码来读json文件，先eclipse做一个简单的，最基础的。（json我用的jackson来解析，也可用fastjson-阿里巴巴的等还有很多）提供代码，思路之类的，注释也没有自己去想去琢磨出来的思路好
first：首先先要熟悉json文件，并要想好利用什么类型去解析，这是最难的，好找一个没人的地方戴上耳机（对于初学）我是用maven来做的用到的jar坐标 ：
redis.clients
jedis
2.9.0
compile
javax.servlet
javax.servlet-api
3.1.0
provided
com.fasterxml.jackson.core
jackson-databind
2.11.2
文件位置：
second：首先创建一个html文件 three.html
加了一个字体居中和大小的样式以至于不会太难看，太原生
首先来实现–省--的局部刷新，利用Ajax
$(function(){
$.post("province",function(data){
$.each(data,function(){
$("#province").append(""+this.name+"");
})
},"json")
})
然后来写对应的ProvinceController.class的代码（主要是逻辑，为什么我要用List>类型）
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> province = om.readValue(fi, new TypeReference>>() {});//jackson解析的方法，为什么是这个方法，百度学的 利用TypeReference可解析你想要得到的类型
List> list = new ArrayList<>();
Iterator> iterator = province.iterator();//我用的迭代器遍历的 foreach等 也可以
while(iterator.hasNext()) {
Map 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("");
$.each(data, function(){
$("#city").append(""+this.name+"");
})
},"json");
});再写对应的CityController.class(代码类似)我为什么还会强转List>类型
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> province = om.readValue(fi, new TypeReference>>() {});
List> list = new ArrayList<>();
Iterator> iterator = province.iterator();
while(iterator.hasNext()) {
Map map2 = iterator.next();
if(map2.get("code").equals(code)) {
map2.remove("code");
map2.remove("name");
list=(List>) map2.get("city");
break;
}
}
List> list1 = new ArrayList<>();
Iterator> iterator2 = list.iterator();
while(iterator2.hasNext()) {
Map next = iterator2.next();
next.remove("area");
list1.add(next);
}
om.writeValue(resp.getWriter(), list1);
}
}不懂的话，可以先看一看city_code.json文件，多想一想
继续来three.html
$("#city").on("change", function(){
let code = $(this).find(":selected").val();
$.post("village",{"code":code}, function(data){
$("#village").empty();
$("#village").append("");
$.each(data, function(){
$("#village").append(""+this.name+"");
})
},"json");代码雷同以至于VillageController.class也是雷同，加了一些判断而已多了一个循环，
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("/village")
public class VillageController 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");
String cityCode = (String)req.getSession().getAttribute("cityCode");
ObjectMapper om = new ObjectMapper();
String path = req.getServletContext().getRealPath("/WEB-INF/classes/city_code.json");
FileInputStream fi = new FileInputStream(path);
List> province = om.readValue(fi, new TypeReference>>() {});
List> list = new ArrayList<>();
Iterator> iterator = province.iterator();
while(iterator.hasNext()) {
Map map2 = iterator.next();
if(map2.get("code").equals(cityCode)) {
map2.remove("code");
map2.remove("name");
list=(List>) map2.get("city");
break;
}
}
List> list1 = new ArrayList<>();
Iterator> iterator2 = list.iterator();
while(iterator2.hasNext()) {
Map next = iterator2.next();
if(next.get("code").equals(code)) {
next.remove("code");
next.remove("name");
list1 = (List>)next.get("area");
}
}
om.writeValue(resp.getWriter(), list1);
}
}看完上述内容，你们掌握使用Ajax怎么实现一个三级联动功能的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！
名称栏目：使用Ajax怎么实现一个三级联动功能-创新互联
文章位置：
http://cdkjz.cn/article/dgcphi.html
