序言：

通过Ajax实现地区三级联动，使用 Java代码读取 json文件，首先 eclipse做一个简单的、最基本的工作。(json我用的 jackson，也可用fastjson-阿里巴巴等等)提供代码、思路之类的，注释也没自己去想去琢磨出来的思路好

first：首先要熟悉 json文件，然后要知道应该使用哪种类型进行解析，这是最难的，最好在没有人的地方找个耳机听一下(初学时)我用 maven制作的 jar坐标：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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实现地区三级联动_ajax

second：首先创建一个html文件 three.html

怎么通过Ajax实现地区三级联动_ajax_02

怎么通过Ajax实现地区三级联动_ajax_03

加了一个字体居中和大小的样式以至于不会太难看，太原生

首先来实现–省--的局部刷新，利用Ajax

1
2
3
4
5
6
7
8
9
<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>>类型）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
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添加改变事件

代码比较简单，就是跟简单的清空 赋值 取值

1
2
3
4
5
6
7
8
9
10
$("#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>>类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
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

1
2
3
4
5
6
7
8
9
$("#city").on("change", function(){
            let code = $(this).find(":selected").val();
            $.post("village",{"code":code}, function(data){
                $("#village").empty();
                $("#village").append("<option>---县---</option>");
                $.each(data, function(){
                    $("#village").append("<option value="+this.code+">"+this.name+"</option>");
                })
            },"json");

代码雷同以至于VillageController.class也是雷同，加了一些判断而已多了一个循环，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
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(www.babamamabbs.com);
        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(cityCode)) {
                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();
                if(next.get("code").equals(code)) {
                    next.remove("code");
                    next.remove("name");
                    list1 = (List<Map<String,Object>>)next.get("area");
                }
        }
        om.writeValue(resp.getWriter(), list1);
         
    }
     
}

结：只提供了代码，但是为什么这样何不自己去想一想？


转自脚本之家