Spring MVC -- 返回数据(静态页面+非静态页面+JSON对象+请求转发与请求重定向)

目录

1. 返回静态页面

2. 返回非静态页面

2.1 @ResponseBody 返回页面内容

 2.2 @RestController = @ResponseBody + @Controller

2.3 示例:实现简单计算的功能

3. 返回JSON对象

 3.1 实现登录功能,返回 JSON 对象

4. 请求转发(forward)或请求重定向(redirect)

4.1 请求转发:forward

 4.2 请求重定向:redirect

 4.3 请求转发和请求重定向的区别

4.4 区别


我们知道默认请求下无论是Spring MVC或者是Spring Boot返回的是视图(xxx.html),而现在都是前后端分离的,后端只需要返给给前端数据即可,这个时候我们就需要使用@ResponseBody 注解了。

1. 返回静态页面

直接在这里返回的,那么返回的就是静态页面的名称,比如

@RequestMapping("/resp")
@Controller
//@ResponseBody
public class RespController {
    @RequestMapping("/Hi")
    public String sayHi(){
        return "/hello.html";
    }
}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.
0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>hello,spring mvc</title>
    <script src="index.js"></script>
</head>
<body>
<h1>Hello,Spring MVC.</h1>
</body>
</html>

可以看到前面返回的内容是 hello.html,这里通过一级目录 sayhi,也可以访问到这个页面,说明返回的虽然是 String 类型,但实际上是一个页面

2. 返回非静态页面

2.1 @ResponseBody 返回页面内容

@ResponseBody 可以修饰类也可以修饰方法

  • 修饰类: 表示当前类中的所有方法都会返回一个非静态页面的数据
  • 修饰方法:表示当前方法返回的是一个非静态页面的数据
@Controller
@ResponseBody
public class TestController {

    @RequestMapping("/Hi")
    public String sayHi() {
        return "hello.html";
    }
}

 2.2 @RestController = @ResponseBody + @Controller

@RequestMapping("/resp")
//@Controller
//@ResponseBody
@RestController
public class RespController {
    @RequestMapping("/Hi")
    public String sayHi(){
        return "/hello.html";
    }
}

2.3 示例:实现简单计算的功能

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.
0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>document</title>
    <script src="index.js"></script>
</head>
<body>
<form action="/calc">
    <div style="margin-top:100px;text-align: center;">
        <h1>计算器</h1>
        数字1:<input name="num1" type="text"><br>
        数字2:<input name="num2" type="text"><br>
        <input type="submit" value=" 点击相加 ">
    </div>
</form>
</body>
</html>
@Controller
@ResponseBody
public class CalcController {
    @RequestMapping("/calc")
    public String calc(Integer num1,Integer num2){
        if (num1 == num2 || num2 == null){
            return "参数错误";
        }
        return "结果=" + (num1 + num2);
    }
}

3. 返回JSON对象

    @RequestMapping("/respjson")
    public HashMap<String, String> respJson() {
        HashMap<String, String> map = new HashMap<>();
        map.put("Java", "Java Value");
        map.put("MySQL", "MySQL Value");
        map.put("Redis", "Redis Value");
        return map;
    }

 

 

我们写的明明是HashMap,到前端就变成json了,

这要归功于框架

 3.1 实现登录功能,返回 JSON 对象

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.
0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="js/jquery-2.1.4.min.js"></script>
    <title>Document</title>
    <script>
        // ajax 提交
        function mysub() {
            // 判空
            // var username = $("#username");
            //这里注意如果在js中有多个 jquery 那么这里的$,是不合适的,$相当于小名,jQuery相当于大名,最好使用大名
            var username = jQuery("#username");
            var password = jQuery("#password");
            if(jQuery.trim(username.val()) == "") {
                alert("请先输入用户名!");
                username.focus; // 让光标重置到此元素
                return;
            }
            if(jQuery.trim(password.val()) == "") {
                alert("请先输入密码!");
                password.focus();
                return;
            }
            jQuery.ajax({
                url:"/user/login2",
                type:"POST",
                data:{"username":username.val(),
            "password":password.val()},
                success:function(result) {
                    alert(JSON.stringify(result));
                }
            });
        }
    </script>
</head>
<body>
<div style="text-align: center;">
    <h1>登录</h1>
    ⽤户:<input id="username">
    <br>
    密码:<input id="password" type="password">
    <br>
    <input type="button" value=" 提交 " onclick="mysub()" style="margin-top: 20px;margin-left: 50px;">
</div>
</body>
</html>
@Slf4j
@Controller
@ResponseBody  
@RequestMapping("/user") 
public class UserController {

    @RequestMapping("/login2")
    public HashMap<String, Object> login2(String username, String password) {
        HashMap<String, Object> result = new HashMap<>();
        int state = 200;
        int data = -1; // 等于1,登录成功,否则登录失败
        String msg = "未知错误";
        if(StringUtils.hasLength(username) && StringUtils.hasLength(password)) {
          if(username.equals("admin") && password.equals("admin")) {
              data = 1;
              msg = "";
          } else {
              msg = "用户名或密码错误!";
          }
        } else { //说明参数为空
            msg = "非法参数";
        }
        result.put("state", state);
        result.put("data", data);
        result.put("msg",msg);
        return result;
    }
}

 

4. 请求转发(forward)或请求重定向(redirect)

forward vs redirect
return不但可以返回一个视图,还可以实现跳转,跳转的方式有两种:

  • forward是请求转发;
  •  redirect:请求重定向。请求转发和重定向的使用对比:

4.1 请求转发:forward

请求转发是服务器端帮用户实现的

@Controller
public class TestController {

    //请求转发方式1
    @RequestMapping("/fw")
    public String myForward() {
        return "forward:/hello.html";
    }

    //请求转发方式2
    @RequestMapping("/fw2")
    public void myForward2(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.getRequestDispatcher("/hello.html").forward(request,response);
    }
}

 4.2 请求重定向:redirect

 重定向的请求发生在客户端(浏览器端)

@Controller
public class TestController {

    //请求重定向方式1
    @RequestMapping("/rd")
    public String myRedirect() {
        return "redirect:/hello.html";
    }
    
    //请求重定向方式2
    @RequestMapping("/rd2")
    public void myRedirect2(HttpServletResponse response) throws IOException {
        response.sendRedirect("/hello.html");
    }
}

 4.3 请求转发和请求重定向的区别

跳转的实现方式有两种:请求转发(Forward)和请求重定向(Redirect)

请求转发就像你(客户端)对你妈妈(服务端)说你饿了,你妈妈帮你点了外卖,在这个过程中你(客户端)只接触到你妈妈,剩下的事都是你妈妈(服务端)来完成的,这就是请求转发

请求重定向就像你(客户端)对你妈妈(服务端)说你饿了,你妈妈说她没时间你找你爸去,然后你找了你爸爸,这就变成了你找你爸爸帮忙了,这就是请求重定向

4.4 区别

1.定义

请求转发:发生在服务器端的程序当中,当服务器收到客户端请求后,会先将请求转发给目标地址,然后再将地址返回的结果转发给客户端

请求重定向:服务器接收到客户端的请求后,会给客户端一个临时响应头,这个临时响应头中记录了,客户端需要再次发送请求(重定向)的URL地址,客户端收到地址后,会将请求发送到新的地址中

2.数据共享

请求转发是服务器端实现的,整个执行过程,客户端只需要发送一次请求,所以整个交互过程中使用的都是同一个 Request 请求对象和 Response 响应对象,因此请求和返回的数据是共享的
请求重定向客户端发送两次完全不同的请求,所以两次请求中的数据是不同的

3.请求方

请求转发是服务器端的行为

请求重定向是客户端的行为(浏览器)

4.代码实现不同

5.最终的URL地址

请求转发是服务器端代为请求,所以整个请求过程中 URL 地址是不变的


请求重定向,是服务器端告诉客户端,访问另一个地址所以浏览器会重新再发送一个请求因此 URL 地址放生了改变

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/42895.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

计讯物联5G千兆网关TG463赋能无人船应用方案,开启自动巡检的智能模式

方案背景 水电站、水库、堤坝等水利工程水下构筑物常年处于水下&#xff0c;并在复杂的水流环境下运行&#xff0c;难免会出现磨蚀、露筋等损伤&#xff0c;而传统的安全监测方式一般是通过潜水员检查上层水柱或通过降低水位进行人工巡查&#xff0c;不仅成本高&#xff0c;效…

STM32(HAL库)驱动AD8232心率传感器

目录 1、简介 2、CubeMX初始化配置 2.1 基础配置 2.1.1 SYS配置 2.1.2 RCC配置 2.2 ADC外设配置 2.3 串口外设配置 2.4 GPIO配置 2.5 项目生成 3、KEIL端程序整合 3.1 串口重映射 3.2 ADC数据采集 3.3 主函数代码整合 4 硬件连接 5 效果展示 1、简介 本文通过STM32…

Vue3 Vite electron 开发桌面程序

Electron是一个跨平台的桌面应用程序开发框架&#xff0c;它允许开发人员使用Web技术&#xff08;如HTML、CSS和JavaScript&#xff09;构建桌面应用程序&#xff0c;这些应用程序可以在Windows、macOS和Linux等操作系统上运行。 Electron的核心是Chromium浏览器内核和Node.js…

【C++基础(五)】类和对象(上)

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:C初阶之路⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学习C   &#x1f51d;&#x1f51d; 类和对象-上 1. 前言2. 类的引入3. 类的定义4. 类的…

Obsidian同步到Notion

插件介绍 将Obsidian的内容同步到Notion需要使用一个第三方插件"Obsidian shared to Notion"EasyChris/obsidian-to-notion: Share obsidian markdown file to notion and generate notion share link 同步obsdian文件到notion&#xff0c;并生成notion分享链接&am…

[SSM]手写Spring框架

目录 十一、手写Spring框架 第一步&#xff1a;创建模块myspring 第二步&#xff1a;准备好要管理的Bean 第三步&#xff1a;准备myspring.xml配置文件 第四步&#xff1a;核心接口实现 第五步&#xff1a;实例化Bean 第六步&#xff1a;给Bean属性赋值 第七步&#xff…

JVM运行时数据区——方法区、堆、栈的关系

方法区存储加载的字节码文件内的相关信息和运行时常量池&#xff0c;方法区可以看作是独立于Java堆的内存空间&#xff0c;方法区是在JVM启动时创建的&#xff0c;其内存的大小可以调整&#xff0c;是线程共享的&#xff0c;并且也会出现内存溢出的情况&#xff0c;也可存在垃圾…

Android - 集成三方模组原厂WiFi Hal库问题

Android - 集成三方模组原厂WiFi Hal库问题 最近Android 11产品平台上需要集成三方WiFi/AP模组厂商提供的hal静态库时遇到一个问题&#xff1a;将三方的库代码集成进系统&#xff0c;并正确配置、编译出lib_driver_cmd_xxx.a(xxx一般是厂商的名字缩写&#xff0c;仅仅是个后缀用…

在英特尔 CPU 上微调 Stable Diffusion 模型

扩散模型能够根据文本提示生成逼真的图像&#xff0c;这种能力促进了生成式人工智能的普及。人们已经开始把这些模型用在包括数据合成及内容创建在内的多个应用领域。Hugging Face Hub 包含超过 5 千个预训练的文生图 模型。这些模型与 Diffusers 库 结合使用&#xff0c;使得构…

【算法基础:搜索与图论】3.4 求最短路算法(Dijkstrabellman-fordspfaFloyd)

文章目录 求最短路算法总览Dijkstra朴素 Dijkstra 算法&#xff08;⭐原理讲解&#xff01;⭐重要&#xff01;&#xff09;&#xff08;用于稠密图&#xff09;例题&#xff1a;849. Dijkstra求最短路 I代码1——使用邻接表代码2——使用邻接矩阵 补充&#xff1a;稠密图和稀疏…

WPF实战项目十(API篇):引入工作单元UnitOfWork

1、通过github地址&#xff1a;https://github.com/arch/UnitOfWork&#xff0c;下载UnitOfWork的代码&#xff0c;将工作单元部分的代码引用到自己的项目&#xff0c;新增UnitOfWork文件夹。 2、在UnitOfWork文件夹下引用UnitOfWork下的IPagedList.cs、PagedList.cs类&#xf…

iOS--编译连接的过程_2

文章目录 iOS编译&#xff08;一&#xff09;编译器前端 编译器后端执行一次XCode build的流程 IPA包的内容二进制文件的内容iOS Link Map File文件说明1. Link Map File 是什么2. Link Map File 有什么用3. 生成 Link Map File查看Link Map File1&#xff09;路径部分计算机系…

Docker 核心概念深度解析:探索容器、镜像和仓库在Docker生态系统中的重要作用和 应用

&#x1f337;&#x1f341; 博主 libin9iOak带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——libin9iOak的博客&#x1f390; &#x1f433; 《面试题大全》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33…

机器学习算法基础-覃秉丰 笔记版

文章目录 笔记回归sklearn-LASSOsklearn-一元线性回归sklearn-多元线性回归sklearn-岭回归sklearn-弹性网ElasticNetsklearn-逻辑回归sklearn-非线性逻辑回归标准方程法-岭回归梯度下降法-一元线性回归梯度下降法-多元线性回归梯度下降法-逻辑回归梯度下降法-非线性逻辑回归线性…

【Java基础教程】(四十三)多线程篇 · 下:深入剖析Java多线程编程:同步、死锁及经典案例——生产者与消费者,探究sleep()与wait()的差异

Java基础教程之多线程 下 &#x1f539;本节学习目标1️⃣ 线程的同步与死锁1.1 同步问题的引出2.2 synchronized 同步操作2.3 死锁 2️⃣ 多线程经典案例——生产者与消费者&#x1f50d;分析sleep()和wait()的区别&#xff1f; &#x1f33e; 总结 &#x1f539;本节学习目标…

ARM练习

通过汇编语言完成LED1-3循环点亮练习 .text .global _start _start: /**********LED1点灯**************/ /*初始化RCC*/ RCC_INIT:LDR R0,0X50000A28LDR R1,[R0]ORR R1,R1,#(0X1<<4)ORR R2,R1,#(0x1<<5)STR R1,[R0]STR R2,[R0]LED1_INIT:设置输出模式LDR R0,0X5…

企业网络安全合规框架体系

云安全联盟大中华区发布报告《企业网络安全合规框架体系》&#xff08;以下简称报告&#xff09;&#xff0c;该报告对典型业务场景给出了参考实例&#xff0c;供广大甲方单位、集成商、咨询机构参考。 近些年&#xff0c;随着国内网络安全领域相关法律、法规、政策文件、标准规…

数据结构--图的遍历 BFS

数据结构–图的遍历 BFS 树的广度优先遍历 从 1 结点进行 b f s bfs bfs的顺序&#xff1a; 【1】 【2】【3】【4】 【4】【6】【7】【8】 图的广度优先遍历 从 2 号点开始 b f s bfs bfs的顺序&#xff1a; 【2】 【1】【6】 【5】【3】【7】 【4】【8】 树 vs 图 不存在“回…

ChatGPT:人工智能语言模型的革命性进步

&#x1f337;&#x1f341; 博主 libin9iOak带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——libin9iOak的博客&#x1f390; &#x1f433; 《面试题大全》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33…

PHP后台登录功能单账号登录限制

PHP后台登录功能单账号登录限制 单账号登陆是什么第一步创建数据表第二步创建登录页面test2.html第三步创建登录提交test2.php第四步访问后台首页第五步演示 单账号登陆是什么 一个用户只能登录一个账号通常被称为单账号登录限制或单用户单账号限制。这意味着每个用户只能使用…