SpringMVC前后端数据交互

news/2024/11/28 6:44:16/

一、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)方式二:全局配置


http://www.ppmy.cn/news/1550553.html

相关文章

Vue框架开发一个简单的购物车(Vue.js)

让我们利用所学知识来开发一个简单的购物车 &#xff08;记得暴露属性和方法&#xff01;&#xff01;&#xff01;&#xff09; 首先来看一下最基本的一个html框架 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"&…

Rust语言俄罗斯方块(漂亮的界面案例+详细的代码解说+完美运行)

tetris-demo A Tetris example written in Rust using Piston in under 500 lines of code 项目地址: https://gitcode.com/gh_mirrors/te/tetris-demo 项目介绍 "Tetris Example in Rust, v2" 是一个用Rust语言编写的俄罗斯方块游戏示例。这个项目不仅是一个简单…

RabbitMQ 安装延迟队列插件 rabbitmq_delayed_message_exchange

前言&#xff1a; RabbitMQ 延迟队列插件&#xff08;rabbitmq_delayed_message_exchange&#xff09;是一个社区开发的插件&#xff0c;它为 RabbitMQ 添加了支持延迟消息的功能。通过这个插件&#xff0c;用户可以创建一种特殊的交换机类型 x-delayed-message&#xff0c;该…

【React】React 组件通信:多种方式与最佳实践

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 React 组件通信&#xff1a;多种方式与最佳实践组件通信的基本概念父子组件通信…

责任链模式在spring security过滤器链中的应用

责任链模式&#xff08;Chain of Responsibility Pattern&#xff09;是一种行为型设计模式&#xff0c;它允许多个对象按照顺序处理请求&#xff0c;并且每个对象可以选择自己是否处理该请求或将其传递给下一个对象。 在Spring Security中&#xff0c;责任链模式得到了广泛应…

C++多线程——线程

1、线程与进程 进程是一个具有独立功能程序的运行实体&#xff0c;如某一个程序&#xff0c;运行时便产生一个进程&#xff1b;通常一个进程包含一个或多个线程。普通C程序多是只含有一个线程的进程&#xff0c;但是大多数情况下遇到的是多线程的进程。 线程与进程都是操作系统…

IDEA自定义帆软函数步骤详解

前序: 在帆软里面有很多内置函数可以供我们使用,比如计算总和的SUM()函数, 计算绝对值的ABS()函数等等,但是很多时候随着业务的复杂性,这些函数已经不满足于我们复杂的计算要求,所以我们可以自定义一些函数来满足我们的需求。 自定义函数列表 (一)如何新增自定义函数 …

urllib3只支持OpenSSL1.1.1

1 现象 urllib3 v2.0 only supports OpenSSL 1.1.1, currently the ssl module is compiled with OpenSSL 1.1.0j 20 Nov 2018.2 解决方法 降低urllib3的版本。 从pycharm中&#xff0c;先卸载原有的urllib3版本。 菜单“File|Settings|Project:python|Project Interprete…