前端如何利用form表单传数组

狂风中的少年 提交于 2020-03-10 03:32:04

在写前端的时候碰到了传数组的问题,于是我利用form表单测试了一下。

如何利用form表单传数组

form表单的常用形式如下:

<form action="http://192.168.43.158:8082/uploadImage"  method="post" enctype="multipart/form-data">
    <input type="file" name="filename" size="45"><br>
    <input type="submit" name="submit" value="submit">
</form>

根据我目前的需求:传数组

<form action="http://192.168.43.158:8082/game/examination/addMul"  method="post" enctype="multipart/form-data">
    <form>
        <div class="form-control">
            books1:
            <input type="text" name="books[]" />
        </div>
        <br>
        <div class="form-control">
            books2:
            <input type="text" name="books[]" />
        </div>
        <input type="submit" value="Submit" />
    </form>
</form>

关于form表单,一个

表示一行,所以写多个
表示多行,在submit的时候就是一个数组了

Java后端的接收

关于后端我是用的SpringMvc,所以接收传值常用@RequestParam和@RequestBody两个注解

  • 关于@RequestParam注解,赋值的过程在我看来更像是从map中取值(default key就是变量名),所以我还真不是很确定能取到值

跟随前人的足迹

  • 网上有很多关于此的文章,我找了一个看起来比较靠谱的做法,套到我的代码中去
@PostMapping("/addMul")
    public HashMap addMulQuestion(@RequestParam(value = "books[]", required = false) ArrayList<String> books) {
        System.out.println(books);
        return null;
    }

结果

确实有打印,说明此方法可行

摸索

各位仔细回看一下代码会发现我的前端代码的name=“books[]”,而后端接收的value的name也是"books[]",那么我是否有理由猜测,其实根本没必要命名成数组,只要名字统一即可,在底层如果有value名字相同的就会自动封装成数组

验证

我将name改成books

<form action="http://192.168.43.158:8082/game/examination/addMul"  method="post" enctype="multipart/form-data">
    <form>
        
        <div class="form-control">
            books1:
            <input type="text" name="books" />
        </div>
        <br>
        <div class="form-control">
            books2:
            <input type="text" name="books" />

        </div>
        <input type="submit" value="Submit" />
    </form>
</form>

后端也做相应的改变

@PostMapping("/addMul")
    public HashMap addMulQuestion(@RequestParam(value = "books[]", required = false) ArrayList<String> books) {


        System.out.println(books);

        return null;
    }

测试结果是:

测试结果

  • 我的猜想是对的

为了进一步证实猜想,我用postman再一次验证了一下

请求.png
结果.png

结论

发送key相同的表单,@RequestParam接收会自动封装成数组

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!