SpringBoot ( 四 ) 接值

news2024/11/17 15:32:45

2.5.接值

通过方法的参数来接收请求传来值

请求时传值的方式有三种方式 :

URL?name=value
form表单
Ajax 异步传值

接收传来的值有三类 :

单一值
对象
数组

2.5.0.传值

2.5.0.1.URL?传值

URL?标识1=值1&标识2=值2

URL后面使用 ? 连接参数, 每组参数使用 = 连接标识与值, 多组参数使用 & 连接

以超链接为例 , 通过URL? 进行传值

    <a href="/test/test04?name=wang&age=12">test04</a> <br>

2.5.0.2.form表单传值

<input name="标识" value="值">

在表单中可以 , , 等标签传递值, name属性 是传值的标识 , value属性 是要传递的值

以表单为例, 进行传值

    <form action="/test/test04" method="post" >
        <input name="name" value="wang"> 
        <input name="age" value="12">
        
        <input type="submit" value="提交">
    </form>

2.5.0.3.Ajax 异步传值

var data = { "标识1" : "值1", "标识2" : "值2" }

将要传递的信息封装成 JSON 结构, 通过 Ajax异步进行传值

这里使用 JQuery 的 Ajax 写法 , 修改 fn 函数

    function fn() {
        var url = "/test/test04";
        var data = {"name":"wang", "age":12};
        $.ajax({
            async: true,
            type: "POST",
            url: url,
            data: data
        })
    }

2.5.1.接单一值

通过方法的参数接单一结构的值

在Controller类中增加 test04 方法

    @RequestMapping("/test/test04")
    public String test04(String name , Integer age){
        System.out.println("name = " + name);
        System.out.println("age = " + age);
        System.out.println(" controller 中的测试方法 test 04 ");
        return "ref";
    }

在页面上分别点击 , 进行传值测试在idea的控制台都可以看到接收到的值

注意要测试 Ajax 页面要导入 JQuery的依赖 js 包

2.5.1.1.@RequestParam注解

在不使用 @RequestParam注解的情况要 , 方法形式参数的名要与传值的标识对应

使用@RequestParam注解后, 可以通过注解与传值的标识对应, 而方法的形式参数名就不受限制

修改 test04方法为 name参数增加 @RequestParam注解 , 并通过注解与传值标识匹配

    @RequestMapping("/test/test04")
    public String test04(@RequestParam("name") String n , Integer age){
        System.out.println("name = " + n);
        System.out.println("age = " + age);
        System.out.println(" controller 中的测试方法 test 04 ");
        return "ref";
    }

现在测试依然能得到打印结果

2.5.1.2.@RequestParam注解属性

但使用了@RequestParam注解后就必须传递对应的参数

当然也可以通过设置@RequestParam注解的属性进行调整

将页面表单中的注释掉

    <form action="/test/test04" method="post" >
<!--        <input name="name" value="wang">-->
        <input name="age" value="12">

        <input type="submit" value="提交">
    </form>

再测试, 会报 400 异常

修改 @RequestParam注解的属性

required : 是否是必须的

defaultValue : 没有接到值时, 默认设置的值

    @RequestMapping("/test/test04")
    public String test04(@RequestParam(value = "name", required = false, defaultValue = "hello") String n , Integer age){
        System.out.println("name = " + n);
        System.out.println("age = " + age);
        System.out.println(" controller 中的测试方法 test 04 ");
        return "ref";
    }

2.5.2.对象接值

将传递信息封装成实体类对象, 通过实体类对象接值

2.5.2.1.创建实体类User

创建 entity 包(文件夹) , 在entity包(文件夹)下创建User实体类

在这里插入图片描述

User实体类

package com.yuan.entity;

import lombok.Data;

@Data
public class User {

    private String name;
    private Integer age;

}

2.5.2.2.增加新的处理方法

添加test05方法, 参数为 User 类

    @RequestMapping("/test/test05")
    public String test05(User user){
        System.out.println("name = " + user.getName());
        System.out.println("age = " + user.getAge());
        System.out.println(" controller 中的测试方法 test 05 ");
        return "ref";
    }

2.5.2.3.修改页面并测试

修改start.html页面请求URL

    <a href="/test/test05?name=wang&age=12">test05</a> <br>

    <form action="/test/test05" method="post" >
        <input name="name" value="wang">
        <input name="age" value="12">

        <input type="submit" value="提交">
    </form>

在浏览器发语法 , 就可以在idea控制台看到接收到信息

2.5.3.数组接值

2.5.3.1. , 传数组

多个相同的传值标识, 可以传递数组

修改start.html页面

    <a href="/test/test06?ids=1&ids=2&ids=3">test06</a> <br>

    <form action="/test/test06" method="post" >
        <input name="ids" value="1">
        <input name="ids" value="2">
        <input name="ids" value="3">

        <input type="submit" value="提交">
    </form>

增加接值方法test06并测试

    @RequestMapping("/test/test06")
    public String test06(Integer[] ids){
        System.out.println("Arrays.toString(ids) = " + Arrays.toString(ids));
        System.out.println(" controller 中的测试方法 test 06 ");
        return "ref";
    }

2.5.3.2.Ajax传数组(一)

传递 JS数组结构

修改start.html页面

    function fn() {
        var url = "/test/test07";
        // var data = { "ids" : [1, 2, 3] };
        var idss = $("[name=ids]").map(function () {
            return this.value
        }).get()
        var data = {"ids": idss}
        
        $.ajax({
            async: true,
            type: "POST",
            url: url,
            data: data
        });
    }

添加新的接值方法test07并测试, 注意这里增加 @RequestParam("ids[]") 注解

    @RequestMapping("/test/test07")
    public String test07(@RequestParam("ids[]") Integer[] ids){
        System.out.println("Arrays.toString(ids) = " + Arrays.toString(ids));
        System.out.println(" controller 中的测试方法 test 07 ");
        return "ref";
    }

2.5.3.3.字符串传数组

用 “,” 将信息连接成一个字符串进行传递

修改start.html页面

    <a href="/test/test06?ids=1,2,3">test06</a> <br>

    <form action="/test/test06" method="post" >
        <input name="ids" value="1,2,3">
        
        <input type="submit" value="提交">
    </form>

使用接值方法test06并测试

    @RequestMapping("/test/test06")
    public String test06(Integer[] ids){
        System.out.println("Arrays.toString(ids) = " + Arrays.toString(ids));
        System.out.println(" controller 中的测试方法 test 06 ");
        return "ref";
    }

2.5.3.4.Ajax传数组( 二 )

从表单中获取数据, 组成数组, 再将数组使用 ","连接起来

修改start.html页面

    function fn() {
        var url = "/test/test06";
        var idss = $("[name=ids]").map(function () {
            return this.value
        }).get()
        console.log(idss)
        var data = {"ids": idss.join(",")}
        $.ajax({
            async: true,
            type: "POST",
            url: url,
            data: data
        });
    }

使用接值方法test06并测试

    @RequestMapping("/test/test06")
    public String test06(Integer[] ids){
        System.out.println("Arrays.toString(ids) = " + Arrays.toString(ids));
        System.out.println(" controller 中的测试方法 test 06 ");
        return "ref";
    }