一、准备工作

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);});}});})
});

三、测试

分别点击三个按钮，在Chrome浏览器的开发者工具中观察打印数据。

锋利的JQuery：Ajax方法获取后端Json数据（Object、List、Map）并遍历相关推荐

ajax仿百度搜索效果,利用autocomplete.js实现仿百度搜索效果（ajax动态获取后端[C#]数据）...
实现功能描述: 1.实现搜索框的智能提示 2.第二次浏览器缓存结果 3.实现仿百度搜索 * { margin: 0px; padding: 0px; } #wrapper { height: 100% ...
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
1.jquery通过ajax方法获取json数据不执行success回调问题描述:jquery通过ajax方法获取json数据不执行success回调方法问题原因:json格式存在问题或不符合标准 ...
jquery通过ajax方法获取json数据不执行success
1.jquery通过ajax方法获取json数据不执行success回调问题描述:jquery通过ajax方法获取json数据不执行success回调方法问题原因:json格式存在问题或不符合标准 ...
jquery ajax 不执行success,jQuery通过ajax方法获取json数据不执行success的原因及解决方法...
1.jquery通过ajax方法获取json数据不执行success回调问题描述:jquery通过ajax方法获取json数据不执行success回调方法问题原因:json格式存在问题或不符合标准 ...
用JQuery中的Ajax方法获取web service等后台程序中的方法
用JQuery中的Ajax方法获取web service等后台程序中的方法 1.准备需要被前台html页面调用的web Service,这里我们就用ws来代替了,代码如下: using System; ...
jquery封装的ajax方法获取web服务器时间
解决方案: Ajax HTTP Head法原理: 一般服务器在发送静态页面的时候(apache, nginx, lighttpd就目前所知)都是会在 HTTP 头里带一个Date的头信息的,那么我用 ...
再谈Jquery Ajax方法传递到action
之前写过一篇文章Jquery Ajax方法传值到action,本文是对该文的补充. 假设 controller中的方法是如下: public ActionResult ReadPerson(Perso ...
jq封装接口ajax,jquery ajax方法封装及api文件设计的代码示例
本篇文章给大家带来的内容是关于jquery ajax方法封装及api文件设计的代码示例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 封装 jquery ajax 文件/** * 封 ...
ajax json 渲染 html,jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
本文实例讲述了jquery+ajax+js实现请求json格式数据并渲染到html页面操作.分享给大家供大家参考,具体如下: 1.先给json格式的数据: [ {"id":1,&q ...

锋利的JQuery：Ajax方法获取后端Json数据（Object、List、Map）并遍历

一、准备工作

1.1 建立SpringBoot项目

1.2 确定项目目录结构

二、代码

2.1 后端代码

2.1.1 控制层

2.1.2 实体类

2.2 前端代码

三、测试

锋利的JQuery：Ajax方法获取后端Json数据（Object、List、Map）并遍历相关推荐

最新文章

热门文章