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

您所在的位置:网站首页 layui表单提交数据vue 前端如何利用form表单传数组

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

2023-07-28 18:05| 来源: 网络整理| 查看: 265

前端如何利用form表单传数组 在写前端的时候碰到了传数组的问题,于是我利用form表单测试了一下,如何利用form表单传数组。Java后端的接收跟随前人的足迹摸索验证结论

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

form表单的常用形式如下:

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

books1: books2:

关于form表单,一个

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

Java后端的接收

关于后端我是用的SpringMvc,所以接收传值常用@RequestParam

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

跟随前人的足迹

网上有很多关于此的文章,我找了一个看起来比较靠谱的做法,套到我的代码中去

@PostMapping("/addMul") public HashMap addMulQuestion(@RequestParam(value = "books[]", required = false) ArrayList books) { System.out.println(books); return null; }

确实有打印,说明此方法可行 在这里插入图片描述

摸索

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

验证

我将name改成books

books1: books2:

后端也做相应的改变

@PostMapping("/addMul") public HashMap addMulQuestion(@RequestParam(value = "books[]", required = false) ArrayList books) { System.out.println(books); return null; }

测试结果是:

在这里插入图片描述

我的猜想是对的

为了进一步证实猜想,我用postman再一次验证了一下 在这里插入图片描述 在这里插入图片描述

结论

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

原文链接https://blog.csdn.net/symuamua/article/details/104759182



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3