第2章 Spring MVC基础：5、JSON数据交互

最新推荐文章于 2022-11-02 10:01:01 发布

ASAYI

最新推荐文章于 2022-11-02 10:01:01 发布

阅读量441

点赞数

分类专栏：我的spring学习之路文章标签： java spring js

本文链接：https://blog.csdn.net/weixin_43820675/article/details/113367339

版权

我的spring学习之路专栏收录该内容

10 篇文章 1 订阅

订阅专栏

学习目标：

JSON数据交互

学习大纲：

一、JSON数据结构
二、JSON数据转换

学习内容：

一、JSON数据结构

JSON（JavaScript Object Notation，JS对象标记）是一种轻量级的数据交换格式。与XML一样，JSON也是基于纯文本的数据格式。它有两种数据结构。

1．对象结构
对象结构以“{”开始，以“}”结束。中间部分由0个或多个以英文“,”分隔的key/value对构成，key和value之间以英文“:”分隔。对象结构的语法结构如下：

{
	key1:value1,
	key2:value2,
	…
}

其中，key必须为String类型，value可以是String、Number、Object、Array等数据类型。

2．数组结构
数组结构以“[”开始，以“]”结束。中间部分由0个或多个以英文“,”分隔的值的列表组成。数组结构的语法结构如下：

[
	value1,
	value2,
	…
]

上述两种（对象、数组）数据结构也可以分别组合构成更为复杂的数据结构。例如：一个student对象包含sno、sname、hobby和college对象，其JSON的表示形式如下：

{
	"sno":"201802228888",
	"sname":"陈恒",
	"hobby":["篮球","足球"],
	"college":{
		"cname":"清华大学",
		"city":"北京"
        }
}

二、JSON数据转换

实现浏览器与控制器类之间的JSON数据交互，Spring MVC提供了MappingJackson2HttpMessageConverter实现类默认处理JSON格式请求响应。该实现类利用Jackson开源包读写JSON数据，将Java对象转换为JSON对象和XML文档，同时也可以将JSON对象和XML文档转换为Java对象。
Jackson开源包及其描述如下所示。
jackson-annotations.jar：JSON转换注解包。
jackson-core.jar：JSON转换核心包。
jackson-databind.jar：JSON转换的数据绑定包。
以上3个Jackson的开源包在写这篇文档时，最新版本是2.12.1，读者可通过地址“https://mvnrepository.com/artifact/com.fasterxml.jackson.core”下载得到。

在使用注解开发时，需要用到两个重要的JSON格式转换注解，分别是@RequestBody和@ResponseBody。
@RequestBody：用于将请求体中的数据绑定到方法的形参中，该注解应用在方法的形参上。
@ResponseBody：用于直接返回JSON对象，该注解应用在方法上。

下面通过一个实例来演示JSON数据交互过程。在该实例中，针对返回实体对象、ArrayList集合、Map<String, Object>集合以及List<Map<String, Object>>集合分别处理。

【例2-5】JSON数据交互过程。
具体实现步骤如下：
1、创建Web应用并导入相关的JAR包
创建Web应用ch2_5，导入如图所示的JAR包。
在这里插入图片描述
2、创建Web和Spring MVC配置类
在ch2_5应用的src目录下，创建名为config的包，并在该包中创建Web配置类WebConfig和Spring MVC配置类SpringMVCConfig。

WebConfig的代码如下：

package config;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.ServletRegistration.Dynamic;
import org.springframework.web.WebApplicationInitializer;
import org.springframework.web.context.support.AnnotationConfigWebApplicationContext;
import org.springframework.web.servlet.DispatcherServlet;
public class WebConfig implements WebApplicationInitializer{
	@Override
	public void onStartup(ServletContext arg0) throws ServletException {
		AnnotationConfigWebApplicationContext ctx 
		= new AnnotationConfigWebApplicationContext();
		ctx.register(SpringMVCConfig.class);//注册Spring MVC的Java配置类SpringMVCConfig
		ctx.setServletContext(arg0);//和当前ServletContext关联
		/**
		 * 注册Spring MVC的DispatcherServlet
		 */
		Dynamic servlet = arg0.addServlet("dispatcher", new DispatcherServlet(ctx));
		servlet.addMapping("/");
		servlet.setLoadOnStartup(1);
	}
}

在SpringMVCConfig配置类中，需要配置静态资源，代码如下：

package config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.view.InternalResourceViewResolver;
@Configuration
@EnableWebMvc
@ComponentScan("controller")
public class SpringMVCConfig implements WebMvcConfigurer {
	/**
	 * 配置视图解析器
	 */
	@Bean
	public InternalResourceViewResolver getViewResolver() {
		InternalResourceViewResolver viewResolver = new InternalResourceViewResolver();
		viewResolver.setPrefix("/WEB-INF/jsp/");
		viewResolver.setSuffix(".jsp");
		return viewResolver;
	}
	/**
	 * 配置静态资源
	 */
	@Override
	public void addResourceHandlers(ResourceHandlerRegistry registry) {
		registry.addResourceHandler("/js/**").addResourceLocations("/js/");
	}
}

三、创建JSP页面，并引入jQuery
首先从jQuery官方网站https://jquery.com/download/下载jQuery插件jquery-3.2.1.min.js，将其复制到Web项目开发目录的WebContent/js目录下；
在这里插入图片描述

然后再JSP页面中，通过<script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>代码将jquery-3.2.1.min.js引入到当前页面中。
在ch2_5应用的WebContent目录下创建JSP文件index.jsp，在该页面中使用AJAX向控制器异步提交数据，代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
	function testJson() {
		//获取输入的值pname为id
		var pname = $("#pname").val();
		var password = $("#password").val();
		var page = $("#page").val();
		$.ajax({
			//请求路径
			url : "${pageContext.request.contextPath }/testJson",
			//请求类型
			type : "post",
			//data表示发送的数据
			data : JSON.stringify({pname:pname,password:password,page:page}),
			//定义发送请求的数据格式为JSON字符串
			contentType : "application/json;charset=utf-8",
			//定义回调响应的数据格式为JSON字符串，该属性可以省略
			dataType : "json",
			//成功响应的结果
			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);
					}
				}
			}

		});
	}
</script>
</head>
<body>
	<form action="">
		用户名：<input type="text" name="pname" id="pname"/><br>
		密码：<input type="password" name="password" id="password"/><br>
		年龄：<input type="text" name="page" id="page"/><br>
		<input type="button" value="测试" onclick="testJson()"/>
	</form>
</body>
</html>

4、创建实体类
在ch2_5应用的src目录下，创建pojo包，并在该包中创建Person实体类。
Person类的代码如下：

package pojo;
public class Person {
	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;
	}
}

5、创建控制器类
在ch2_5应用的src目录下，创建controller包，并在该包中创建TestController控制器类，在处理方法中使用@ResponseBody和@RequestBody注解进行JSON数据交互。
TestController类的代码如下：

package 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 pojo.Person;
@Controller
public class TestController {
	/**
	 * 接收页面请求的JSON数据，并返回JSON格式结果
	 */
	@RequestMapping("/testJson")
	@ResponseBody
	public List<Map<String, Object>> testJson(@RequestBody Person user) {
		//打印接收的JSON格式数据
		System.out.println("pname=" + user.getPname() +
				", password=" + user.getPassword() + ",page=" + user.getPage());
		//返回Person对象
		//return user;
		/**ArrayList<Person> allp = new ArrayList<Person>();
		Person p1 = new Person();
		p1.setPname("陈恒1");
		p1.setPassword("123456");
		p1.setPage(80);
		allp.add(p1);
		
		Person p2 = new Person();
		p2.setPname("陈恒2");
		p2.setPassword("78910");
		p2.setPage(90);
		allp.add(p2);
		//返回ArrayList<Person>对象
		return allp;
		**/
		
		Map<String, Object> map = new HashMap<String, Object>();
		map.put("pname", "陈恒2");
		map.put("password", "123456");
		map.put("page", 25);
		//返回一个Map<String, Object>对象
		//return map;
		//返回一个List<Map<String, Object>>对象
		List<Map<String, Object>> allp = new ArrayList<Map<String, Object>>();
		allp.add(map);
		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;
	}
}

6、测试应用
右击ch2_5应用，选择Run As|Run on Server命令发布并运行应用。
在这里插入图片描述

学习时间：

在这里插入图片描述

学习产出：

1、技术笔记 1 遍
2、CSDN 技术博客 1 篇

ASAYI

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第2章 Spring MVC基础：5、JSON数据交互

学习目标：JSON数据交互学习大纲：一、JSON数据结构二、JSON数据转换学习内容：一、JSON数据结构JSON（JavaScript Object Notation，JS对象标记）是一种轻量级的数据交换格式。与XML一样，JSON也是基于纯文本的数据格式。它有两种数据结构。1．对象结构对象结构以“{”开始，以“}”结束。中间部分由0个或多个以英文“,”分隔的key/value对构成，key和value之间以英文“:”分隔。对象结构的语法结构如下：{ key1:value1,
复制链接

扫一扫