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

news2024/11/17 12:19:54

文章目录

  • 1. 默认情况下返回静态页面
  • 2. 返回一个非静态页面的数据
    • 2.1 @ResponseBody 返回页面内容
    • 2.2 @RestController = @ResponseBody + @Controller
  • 3. 实现登录功能,返回 JSON 对象
    • 3.1 前端使⽤ ajax,后端返回 json 给前端
    • 3.2 前端发送 JSON 的标准格式
  • 4. 请求转发(forward)或请求重定向(redirect)
    • 4.1 请求转发:forward
    • 4.2 请求重定向:redirect
  • 5. 请求转发和请求重定向的区别

1. 默认情况下返回静态页面

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

@Controller
public class TestController {

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 style="color: red">我是 hello.html</h1>
</body>
</html>

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

2. 返回一个非静态页面的数据

2.1 @ResponseBody 返回页面内容

@ResponseBody 可以修饰类也可以修饰方法
修饰类: 表示当前类中的所有方法都会返回一个非静态页面的数据
修饰方法:表示当前方法返回的是一个非静态页面的数据

@Controller
@ResponseBody
public class TestController {

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

在这里插入图片描述

2.2 @RestController = @ResponseBody + @Controller

直接使用 @RestController,代替@ResponseBody 和 @Controller 两个注解,返回页面内容

@RestController
public class TestController {

    @RequestMapping("/sayhi")
    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>计算器示例</title>
</head>
<body>
<form action="/calc">
    <h1>计算器</h1>
    数字1: <input name="num1" type="text"><br>
    数字2: <input name="num2" type="text"><br>
    <input type="submit" value=" 点击相加 ">
</form>
</body>
</html>
package com.example.demo.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class CalcController {

    @RequestMapping("/calc")
    public String calc(Integer num1, Integer num2) {
        if (num1 == null || num2 == null) return "<h1>参数错误!</h1>";
        return "<h1>结果:" + (num1 + num2) + "</h1><a href='javascript:history.go(-1)'>返回</a>";
    }

}

在这里插入图片描述

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

3.1 前端使⽤ ajax,后端返回 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;
    }
}

在这里插入图片描述
在这里插入图片描述

3.2 前端发送 JSON 的标准格式

在这里插入图片描述

在这里插入图片描述


后端接收 JSON 数据的标准格式:
在这里插入图片描述
在这里插入图片描述

4. 请求转发(forward)或请求重定向(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");
    }
}

在这里插入图片描述

5. 请求转发和请求重定向的区别

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

请求转发就好比:张三(客户端)找李四帮忙(服务器端),而李四说我没空,但我可以让王五帮你的忙,在这个过程中张三只找了一个人,剩下的事情都是李四完成的,这个就是请求转发

请求重定向就好比:张三(客户端)找李四帮忙(服务器端),而李四说我没空,你去要王五帮你的忙吧,于是张三就是找王五帮忙了,这就是请求重定向
具体的区别有下面几点:

  1. 定义:

请求转发: 发生在服务器端的程序中,当服务器收到客户请求后,会先将请求转发给目标地址,然后再将地址返回的结果转发给客户端
请求重定向:服务器端接收到客户端的请求后,会给客户端返回一个临时响应头,这个临时响应头中记录了,客户端需要再次发送请求(重定向)的URL地址,客户端收到地址后,会将请求发送到新的地址中

  1. 数据共享

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

  1. 请求方

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

  1. 代码实现不同

  2. 最终的 URL地址

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ChatGPT 怎么用最新详细教程一看就会

ChatGPT 以其强大的信息整合和对话能力惊艳了全球&#xff0c;在自然语言处理上面表现出了惊人的能力。这么强大的工具我们都想体验一下&#xff0c;那么 ChatGPT 怎么用呢&#xff1f;本文将给你逐步详细介绍。 使用 ChatGPT 主要有4步&#xff1a; 注册 ChatGPT 账号通过短…

Maven_第五章 核心概念

目录第五章 其他核心概念1、生命周期①作用②三个生命周期③特点2、插件和目标①插件②目标3、仓库第五章 其他核心概念 1、生命周期 ①作用 为了让构建过程自动化完成&#xff0c;Maven 设定了三个生命周期&#xff0c;生命周期中的每一个环节对应构建过程中的一个操作。 …

智慧办公管理系统

随着大数据、物联网和新一代通讯技术的发展&#xff0c;智慧地球、智慧城市、智慧办公正在逐步变成现实。 智慧办公管理系统主要分为会议室管理、考勤管理以及系统设置三部分功能。 架构图&#xff1a; 功能介绍 一、会议室管理 &#xff08;1&#xff09;、会议室信息 会议室…

如何将 Windows 11/10 许可证转移到另一台 PC

如果您最近购买了新的台式机或笔记本电脑&#xff0c;您可能希望在上面安装 Windows 11。对于某些用户来说&#xff0c;为新计算机购买新的 Windows 11 许可证可能会有点贵。 但是&#xff0c;如果您在旧计算机上安装了 Windows 11 并购买了一台新计算机来替换它&#xff0c;您…

JavaSE-线程池(1)- 线程池概念

JavaSE-线程池&#xff08;1&#xff09;- 线程池概念 前提 使用多线程可以并发处理任务&#xff0c;提高程序执行效率。但同时创建和销毁线程会消耗操作系统资源&#xff0c;虽然java 使用线程的方式有多种&#xff0c;但是在实际使用过程中并不建议使用 new Thread 的方式手…

【c++】数据类型

文章目录整型实型科学计数法sizeof关键字字符型字符串类型转义字符bool布尔类型c规定在创建一个变量或者常量时&#xff0c;必须要指定出相应的数据类型&#xff0c;否则无法给变量分配内存。 整型 作用&#xff1a;整型变量表示的是整数类型的数据。 实型 float f3.14; //默…

JavaCollection集合

5 Collection集合 5.1 Collection集合概述 是单列集合的顶层接口&#xff0c;它表示一组对象&#xff0c;这些对象也称Collection元素JDK不提供此接口的直接实现&#xff0c;它提供更具体的子接口&#xff08;Set 和 List&#xff09;实现 package ceshi;import java.util.A…

【C++1】函数重载,类和对象,引用,/string类,vector容器,类继承和多态,/socket,进程信号

文章目录1.函数重载&#xff1a;writetofile()&#xff0c;Ctrue和false&#xff0c;C0和非02.类和对象&#xff1a;vprintf构造函数&#xff1a;对成员变量初始化析构函数&#xff1a;一个类只有一个&#xff0c;不允许被重载3.引用&#xff1a;C中&取地址&#xff0c;C中…

C语言深度剖析之文件操作

&#x1f497; &#x1f497; 博客:小怡同学 &#x1f497; &#x1f497; 个人简介:编程小萌新 &#x1f497; &#x1f497; 如果博客对大家有用的话&#xff0c;请点赞关注加关注 &#x1f31e; 什么是文件 磁盘上的文件是文件。 但是在程序设计中&#xff0c;我们一般谈的文…

计算机组成原理(四)

1.理解存储器的分类方法&#xff1b;理解存储器的层次结构&#xff1b;熟悉存储器的几个技术指标&#xff08;主要是存储容量、存取时间、存取周期、存储器带宽等&#xff09;&#xff1b; 存储器分类方法&#xff1a;   按与CPU的连接和功能分类&#xff1a;     主存储…

关于HLS直播Buffer PlayQueue多图分析

文章目录前言hls配置m3u8单码流1.开始进入播放页&#xff0c;默认是暂停态2.等几十秒后的状态3.开始播放后的状态其他多码流前言 hls配置 backBufferLength:60 // 默认无限制 缓存媒体播放后要保留的最长持续时间&#xff08;以秒为单位&#xff09;。 liveSyncDurationCount…

【优化算法1】模拟退火算法(含MATLAB实例)

模拟退火算法&#xff08;含MATLAB实例&#xff09;模拟退火算法1.1 简介1.2 原理1.3 MATLAB实例模拟退火算法 1.1 简介 模拟退火算法的思想借鉴于物体退火过程&#xff1a;当温度很高时&#xff0c;物体内能比较大&#xff0c;其内部粒子处于快速无序运动状态&#xff1b;当…

【计算机网络期末复习】第一章 概述

✍个人博客&#xff1a;https://blog.csdn.net/Newin2020?spm1011.2415.3001.5343 &#x1f4e3;专栏定位&#xff1a;为想复习学校计算机网络课程的同学提供重点大纲&#xff0c;帮助大家渡过期末考~ &#x1f4da;专栏地址&#xff1a; ❤️如果有收获的话&#xff0c;欢迎点…

第一个C语言代码(visual studin创建调试以及项目文件功能讲解)

这里我主要使用visual Studio进行编程 目录 一.创建项目 二.编写代码 1.代码编写 2.代码分析 3.main() 4.注释符 5.{} 花括号 6.声明 7.赋值 8.printf()函数 9.return 0; 一.创建项目 这里大家可能会比较疑惑&#xff0c;为啥都是C&#xff0c;没看见C的项目&…

C++:AVL树

AVL树的概念 二叉搜索树虽可以缩短查找的效率&#xff0c;但如果数据有序或接近有序二叉搜索树将退化为单支树&#xff0c;查找元素相当于在顺序表中搜索元素&#xff0c;效率低下&#xff0c;时间复杂度为O&#xff08;N&#xff09;&#xff1b; 两位俄罗斯的数学家G.M.Ade…

机试_4_数学问题

在机试中&#xff0c;我们经常会面对这样一类问题&#xff0c;它们并不涉及很深奥的算法和数据结构&#xff0c;而只与数理逻辑相关&#xff0c;将这类题目称为数学问题。 这类问题通常不需要用到特别高深的数学知识&#xff0c;而只需要掌握简单的数理逻辑知识。本文重点记录…

解决访问GitHub时出现的“您的连接不是私密连接”的问题!

Content问题描述解决办法问题描述 访问github出现您的连接不是私密连接问题&#xff0c;无法正常访问&#xff0c;如下图所示&#xff1a; 解决办法 修改hosts文件。hosts文件位于&#xff1a;C:\Windows\System32\drivers\etc\hosts 首先在https://www.ipaddress.com/查找两…

Linux之case语句和循环语句

一、case语句1.case语句的结构case语句主要适用于以下情况&#xff1a;某个变量存在多种取值&#xff0c;需要对其中的每一种取值分别执行不同的命令序列。这种情况与多分支的if语句非常相似&#xff0c;只不过if语句需要判断多个不同的条件&#xff0c;而case语句只是判断一个…

Linux高级命令之查找文件命令

查找文件命令学习目标能够说出查找文件使用的命令1. find命令及选项的使用命令说明find在指定目录下查找文件(包括目录)find命令选项:选项说明-name根据文件名(包括目录名)字查找find命令及选项的效果图:2. find命令结合通配符的使用通配符:是一种特殊语句&#xff0c;主要有星…

Linux中几个在终端中有趣的命令

uhh…最近我不知道该更新些什么&#xff0c;所以就更新Linux几个很有趣的命令 文章目录前言1.命令&#xff1a;sl安装 sl输出2. 命令&#xff1a;telnet命令&#xff1a;fortune安装fortune4.命令&#xff1a;rev&#xff08;反转&#xff09;安装rev5. 命令&#xff1a;factor…