利用Spring Boot处理JSON数据实战(包括jQuery，html，ajax）附源码超详细

爱被打了一巴掌 2023-09-30 16:10 66阅读 0赞

**在Spring Boot的Web应用中 内置了JSON数据的解析功能，默认使用Jackson自动完成解析(不需要解析加载Jackson依赖包）当控制器返回一个Java对象或集合数据时 Spring Boot自动将其转换成JSON数据，使用起来很方便简洁。**

**Spring Boot处理JSON数据时，需要用到两个重要的JSON格式转换注解，分别是@RquestBody**

**@ResponseBody 他们的作用分别如下**

> @RequestBody：用于将请求体中的数据绑定到方法的形参中，该注解应用在方法的形参上

> @ResponseBody：用于直接返回JSON对象 该注解应用在方法上

下面通过一个实例讲解Spring Boot处理JSON数据的过程，该实例针对返回实体对象，ArrayList集合，Map<String,Object>集合以及List<Map<String,Object>>集合分别处理

步骤如下

### 1：创建实体类 ###

在应用的com.ch.ch5\_2.model包中 创建实体类Preson 代码如下

package com.ch.ch5_2.model;
    public class Preson {
    	private String pname;
    	private String password;
    	private Integer page;
    	public String getPname() {
    		return pname;
    	}
    	public void setPname(String pname) {
    		this.pname = pname;
    	}
    	public String getPassword() {
    		return password;
    	}
    	public void setPassword(String password) {
    		this.password = password;
    	}
    	public Integer getPage() {
    		return page;
    	}
    	public void setPage(Integer page) {
    		this.page = page;
    	}
    }

### 2：创建视图页面 ###

在src/main/resources/templates目录下 创建视图页面 input.html 并且引入jQuery框架 并使用它的ajax方法进行异步请求 部分代码如下(此处需要一些Java Web开发的知识 如有不明白的可以参考我之前的博客 进主页就有）

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" th:href="@{css/bootstrap.min.css}" />
    
    <link rel="stylesheet" th:href="@{css/bootstrap-theme.min.css}" />
    
    <script type="text/javascript" th:src="@{js/jquery.min.js}"></script>
    <script type="text/javascript">
    	function testJson() {
    		//获取输入的值pname为id
    		var pname = $("#pname").val();
    		var password = $("#password").val();
    		var page = $("#page").val();
    		alert(password);
    		$.ajax({
    			//发送请求的URL字符串
    			url : "testJson",
    			//定义回调响应的数据格式为JSON字符串，该属性可以省略
    			dataType : "json",
    			//请求类型
    			type : "post",
    			//定义发送请求的数据格式为JSON字符串
    			contentType : "application/json",
    			//data表示发送的数据
    			data : JSON.stringify({pname:pname,password:password,page:page}),
    			//成功响应的结果
    			success : function(data){
    				if(data != null){
    					//返回一个Person对象
    					//alert("输入的用户名:" + data.pname + "，密码：" + data.password + "，年龄：" +  data.page);
    					//ArrayList<Person>对象
    					/**for(var i = 0; i < data.length; i++){
    						alert(data[i].pname);
    					}**/
    					//返回一个Map<String, Object>对象
    					//alert(data.pname);//pname为key
    					//返回一个List<Map<String, Object>>对象
    					for(var i = 0; i < data.length; i++){
    						alert(data[i].pname);
    					}
    				}
    			},
    			//请求出错
    			error:function(){
    				alert("数据发送失败");
    			}
    		});
    	}
    </script>
    </head>
    hicon-pencil"></i>
    							</span>
    							<input class="form-control" type="text"
    							 id="pname" th:placeholder="请输入用户名"/>
    						</div>
    					</div>
    					<div class="form-group">
    						<div class="input-group col-md-6">
    							<span class="input-group-addon">
    								<i class="glyphicon glyphicon-pencil"></i>
    							</span>
    							<input class="form-control" type="text"
    							 id="password" th:placeholder="请输入密码"/>
    						</div>
    					</div>
    					<div class="form-group">
    						<div class="input-group col-md-6">
    							<span class="input-group-addon">
    								<i class="glyphicon glyphicon-pencil"></i>
    							</span>
    							<input class="form-control" type="text"
    							 id="page" th:placeholder="请输入年龄"/>
    						</div>
    					</div>
    					<div class="form-group">
    						<div class="col-md-6">
    							<div class="btn-group btn-group-justified">
    								<div class="btn-group">
    									<button type="button" onclick="testJson()" class="btn btn-success">
    										<span class="glyphicon glyphicon-share"></span>
    										 测试
    									</button>
    								</div>
    							</div>
    						</div>
    					</div>
    				</form>
    			</div>
    		</div>
    	</div>
    </body>
    </html>

### 3：创建控制器 ###

在ch5\_2应用的com.ch.ch5\_2.controller包中 创建控制器类TestJsonController 在该类中有两个处理方法，一个时界面导航方法，一个是接受页面请求的方法 部分代码如下

package com.test.ch3_2.controller;
    import java.util.ArrayList;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestBody;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    import com.ch.ch5_2.model.Preson;
    @Controller
    public class TestJsonController {
    	/**
    	 * 进入视图页面
    	 */
    	@RequestMapping("/input")
    	public String input() {
    		return "input";
    	}
    	/**
    	 * 接收页面请求的JSON数据
    	 */
    	@RequestMapping("/testJson")
    	@ResponseBody
    	/*@RestController注解相当于@ResponseBody ＋ @Controller合在一起的作用。
    	1) 如果只是使用@RestController注解Controller，则Controller中的方法无法返回jsp页面或者html，
    	返回的内容就是Return的内容。
    	2) 如果需要返回到指定页面，则需要用 @Controller注解。如果需要返回JSON，XML或自定义mediaType内容到页面，
    	则需要在对应的方法上加上@ResponseBody注解。
        */
    	public List<Map<String, Object>> testJson(@RequestBody Preson user) {
    		//打印接收的JSON格式数据
    		System.out.println("pname=" + user.getPname() +
    				", password=" + user.getPassword() + ",page=" + user.getPage());
    		//返回Person对象
    	
    		Map<String, Object> map1 = new HashMap<String, Object>();
    		map1.put("pname", "陈恒3");
    		map1.put("password", "54321");
    		map1.put("page", 55);
    		allp.add(map1);
    		return allp;
    	}
    }

然后运行Ch52Application主类 然后访问http://localhost:8080/ch5\_2/input

运行效果如下

![d40580e9ec924d89891b6ebf264ef03b.png][]

[d40580e9ec924d89891b6ebf264ef03b.png]: https://img-blog.csdnimg.cn/d40580e9ec924d89891b6ebf264ef03b.png