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）。
<!-- fastjson2 -->
<dependency>
<groupId>com.alibaba.fastjson2</groupId>
<artifactId>fastjson2</artifactId>
<version>2.0.37</version>
</dependency>
<!-- fastjson -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>2.0.32</version>
</dependency>
<!-- jackson-core -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.16.0</version>
</dependency>
<!-- jackson-databind -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.16.0</version>
</dependency>
<!-- jackson-annotations -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-annotations</artifactId>
<version>2.16.0</version>
</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）方式二：全局配置
原文地址：https://blog.csdn.net/z_y_j229970438/article/details/143033183
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！