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

在写前端的时候碰到了传数组的问题，于是我利用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两个注解

由于form表单不能用@RequestBody接收（具体原因可以看看这段踩坑过程Springboot出现Content type ‘application/x-www-form-urlencoded;charset=UTF-8’ not supported），所以考虑用@RequestParam接收。

关于@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;
    }