一、准备工作

1.1 建立SpringBoot项目

使用IntelliJ IDEA建立SpringBoot项目，引入Lombok 和Web两个依赖。

1.2 确定项目目录结构

项目目录结构如下图，需要注意的是前端资源放在static文件夹下：
在这里插入图片描述

二、代码

2.1 后端代码

2.1.1 控制层

JsonController.java

package com.cloudpig.ajaxjson.controller;

import com.cloudpig.ajaxjson.pojo.Department;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@RestController
@RequestMapping("json")
public class JsonController {

    @GetMapping("object")
    public Department getDepartment() {

        return getDepartment("HR", "人力资源部");
    }

    @GetMapping("list")
    public List<Department> getDepartments() {
        ArrayList<Department> departments = new ArrayList<>();

        departments.add(getDepartment("HR", "人力资源部"));
        departments.add(getDepartment("HR", "人力资源部"));
        departments.add(getDepartment("HR", "人力资源部"));

        return departments;
    }

    private Department getDepartment(String id, String name) {
        Department department = new Department();

        department.setId(id);
        department.setName(name);

        return department;
    }

    @GetMapping("map")
    public Map<String, String> getMap() {
        Map<String, String> map = new HashMap<>();

        map.put("HR", "人力资源部");
        map.put("IT", "信息技术部");
        map.put("PD", "采购部");

        return map;
    }
}

2.1.2 实体类

Department.java

package com.cloudpig.ajaxjson.pojo;

import lombok.Data;

@Data
public class Department {

    private String id;

    private String name;

}

2.2 前端代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX测试</title>
    <script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="js/ajax.js" type="text/javascript"></script>
</head>
<body>
    <input id="getObject" type="button" value="获取对象">
    <input id="getList" type="button" value="获取集合">
    <input id="getMap" type="button" value="获取键值对">
</body>
</html>

ajax.js

$(function () {
    $('#getObject').click(function () {
        console.log("---获取对象---")
        $.ajax({
            method: "GET",
            url: "/json/object",
            success: function (department) {
                console.log(department.id);
                console.log(department.name);
            }
        });
    });
    $('#getList').click(function () {
        console.log("---获取集合---")
        $.ajax({
            method: "GET",
            url: "/json/list",
            success: function (list) {
                $.each(list, function (index, department) {
                    console.log("index = " + index);
                    console.log(department.id);
                    console.log(department.name);
                });
            }
        });
    });
    $('#getMap').click(function () {
        console.log("---获取键值对---")
        $.ajax({
            method: "GET",
            url: "/json/map",
            success: function (map) {
                $.each(map, function (key, value) {
                    console.log(key);
                    console.log(value);
                });
            }
        });
    })
});