SpringMVC前后端数据交互

一、JSON格式数据

1、定义

JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式，已被广泛用于数据保存和交换，是迄今为止最为理想的数据交换语言。

JSON 独立于编程语言

层次结构简洁和清晰

易于人阅读和编写，也易于机器解析和生成

有效的提升网络传输效率

2、数据格式

JSON数据是一系列键值对的集合，它由JSON对象和JSON数组组成，且它们之间可以嵌套使用。

JSON对象

以"{"开始，以"}"结束；每个item都是一个无序键值对，表示为"key : value"；键值对之间使用逗号(英文状态)分隔。

JSON数组

以"["开始，以"]"结束；每一个元素可以是String、Number、Char、Boolean、null、Object对象，甚至可以是嵌套JSON数组；数组元素间使用逗号(英文状态)分隔；Java语言对应操作类JSONArray。

JS定义JSON数据

3、实例操作

（1）项目中引入Jackson/fastjson的依赖，调用JSON转换方法将对象或集合转换成JSON数据，然后通过HttpServletResponse将JSON数据写入到输出流中完成回写，具体实现步骤如下。创建JSONController.java文件，在JSONController类中新增showJson()方法，用于将对象转换成JSON数据并完成回写。

（2）启动项目，浏览器中访问地址http://localhost:8080/api/showJson。访问后，页面显示效果如图所示。

4、@ResponseBody注解

@ResponseBody是将处理器返回的对象通过适当的转换器转换为指定的格式（JSON 或XML格式），写入到HttpServletResponse对象的body区。使用此注解后不会再走视图处理器，而是直接将数据写入到输出流中。

@ResponseBody注解可以标注在方法和类上，标注在类上时，表示该类中所有方法均应用@ResponseBody注解。

如果@ResponseBody注解加在类上，也可以使用@RestController注解代替，该注解相当于@Controller+ @ResponseBody两个注解的结合。

返回值为String

返回值为JavaBean

返回值为集合

如果返回值是字符串，那么直接将字符串写到客户端；如果是一个对象，会将对象转化为JSON字符串，然后写到客户端。

中文乱码

二、Ajax异步请求

1、发送数据方式

地址参数(Url Param)

请求参数(Query Param)

表单提交(form-urlencoded)

异步请求：json格式、二进制格式(form-data)、其他格式

2、定义

Ajax即Asynchronous JavaScript And XML（异步JavaScript和XML），用来描述一种使用现有技术集合的'新'方法，包括：HTML或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

AJAX 并非编程语言，AJAX 仅仅组合了： 1. 浏览器内建的 XMLHttpRequest 对象（从 Web 服务器请求数据） 2. JavaScript 和 HTML DOM（显示或使用数据）

Ajax 是一个令人误导的名称。Ajax 应用程序可能使用 XML 来传输数据，但将数据作为纯文本或 JSON 文本传输也同样常见。

Ajax 允许通过与场景后面的 Web 服务器交换数据来异步更新网页。这意味着可以更新网页的部分，而不需要重新加载整个页面。

3、工作原理

4、JS发送Ajax请求

语法

5、Jquery发送Ajax请求

6、实操

（1）使用Ajax无页面刷新方式，访问后端接口来添加商品数据。创建jsp页面，编写ajax请求。

（2）创建controller，编写接口方法。

（3）在浏览器中访问product_add.jsp页面，访问地址为http://localhost:8080/product_add.jsp。点击添加商品后，页面显示效果如图所示：

三、服务端Session会话

在Web工程中，如果需要跨请求、跨页面共享数据，就需要将数据存储到session域中，即服务器内存中。SpringMVC通常有以下两种方式：

1、方式一：HttpSession

2、方式二：@SessionAtt

3、清除Session

4、案例：实现用户登录。

运行效果如下：输入用户名：张哲、密码：123，登陆成功

否则，登录失败

（1）创建工程，引入JSON相关依赖（Jackson/FastJson）。

<groupId>com.alibaba.fastjson2</groupId>

<artifactId>fastjson2</artifactId>

</dependency>

<groupId>com.alibaba</groupId>

<artifactId>fastjson</artifactId>

</dependency>

<groupId>com.fasterxml.jackson.core</groupId>

<artifactId>jackson-core</artifactId>

</dependency>

<groupId>com.fasterxml.jackson.core</groupId>

<artifactId>jackson-databind</artifactId>

</dependency>

<groupId>com.fasterxml.jackson.core</groupId>

<artifactId>jackson-annotations</artifactId>

</dependency>

（2）在WebContent下新建"statics/js"文件夹，加入JQuery框架脚本"jquery-3.7.1.min.js"。

（3）创建login.jsp页面，通过该页面发送Ajax请求完成登录逻辑功能。页面中引入JQuery框架脚本，并为"提交"按钮增加"onclick"事件，在事件中发送Ajax请求。

（4）在Controller中，新增login()处理Ajax异步登录请求。当账号密码正确时，返回成功信息；否则返回失败信息。

四、解决跨域问题

1、前后端分离

传统的单体架构是前后端不分离的架构。前端（用户界面）和后端（服务器端）代码都在同一个项目中，并且由同一套服务器技术生成。这种情况下，服务器端不仅负责处理业务逻辑，还要负责生成和返回前端的HTML页面。

在前后端分离的架构中，前端和后端是相互独立的两个应用，分别单独部署。前端负责用户界面的展示和交互，后端负责处理业务逻辑和数据处理。前端通过AJAX等技术向后端的API接口发送HTTP请求，后端将处理请求并返回JSON或其他数据格式作为响应。

2、跨域问题

在前后端分离项目中，前端通过Ajax等技术向后端API接口发起请求时都会遇到跨域问题，跨域问题产生的原因是浏览器的同源策略。

3、浏览器同源策略

浏览器的同源策略是一种重要的安全机制，用于防止一个网站的脚本与另一个网站的内容进行交互。确保了敏感数据（如用户登录状态、个人信息等）的安全，防止了恶意脚本对数据的非法访问和操作。

4、CORS解决方案

CORS是一个W3C标准，全称是跨域资源共享（Cross-Origin Resource Sharing）。CORS是通过在服务器端的响应中添加一个 Access-Control-Allow-Origin 标头，指定允许跨域的请求来源，通过这种方式允许指定源向服务器发出异步跨域 HTTP 请求，从而克服了同源使用的限制。

（1）方式一：@CrossOrigin注解

（2）方式二：全局配置