0
点赞
收藏
分享

微信扫一扫

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

菜头粿子园 2023-02-13 阅读 77

文章目录

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. 定义:
  1. 数据共享
  1. 请求方
  1. 代码实现不同

  2. 最终的 URL地址

举报

相关推荐

0 条评论