form表单向后端提交数据后端用List接收

效验list 类型的from 表单方法 本周做了最大的表单的提交,对于必填和部分内容的表单做了完整的效验 因为表单内容较多 我这边封装了很多组件,对每一种类型都做了校验,所以在最外层的父组件使用$refs 找到子组件 在找到子组件的from 表单进行效验 当前表单含有list 类型的校验 做下记录: 表单大约分为常用的表单类型 1、list类型 当前组件是一个列表类型输入框 效验变量key 和value 值 具体代码: 实例图 组件代码: <template> <div... 阅读详情

在项目中需要使用批量操作的时候,后端就需要用List<实体类>进行接收数据,前台数据如下:

<form id="formId" action="/Test_a/insert" method="post">
<table id="tab">
    <tr>
        <td>编号</td>
        <td>日期</td>
        <td>姓名</td>
    </tr>
    <th:block th:each="test:${aList}">
        <tr>
            <td class="testId" th:text="${test.id}"></td>
            <td><input name="createdate" class="createdate" th:value="${#dates.format(test.createdate,'yyyy-MM-dd')}"></td>
            <td><input name="username" class="username" id="username" th:value="${test.username}"></td>
        </tr>
    </th:block>
    <tr>
        <td>
            <input type="submit" id="add" value="添加">
        </td>
    </tr>
</table>
</form>

s本页面的数据是从数据库里查询出来的,然后遍历在文本框内,实际数据如下:

在这里插入图片描述
因为同一个文本中可能会遍历出来多值,存放的数据就如同数组一样。如果使用form表单提交的话,后台用List<实体类>接收会报:

java.lang.NoSuchMethodException: java.util.List.<init>()

意思是指定不明需要在List<实体类>前面加上@RequestBody注解,如下:

public String insert(@RequestBody List<Test_a> test_a) {}

但又会报错:报错结果是:

HttpMediaTypeNotSupportedException: Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported]

报这个错的意思是:form表单提交数据默认的格式是:application/x-www-form-urlencoded;charset=UTF-8,只能处理不带嵌套类型JSON,而我们这表单提交的数据是遍历数据,也就是嵌套的,所以需要想办法把需要传递给后端的数据变成application/json这种格式,所以使用ajax。

$("#add").click(function () {
    //遍历input框里的值
    var username = new Array();
    var i = 0;
    $('.username').each(function(){
        username[i] = $(this).val();
        i = i+1;
    });
    var createdate = new Array();
    var i = 0;
    $('.createdate').each(function(){
        createdate[i] = $(this).val();
        i = i+1;
    });
    //把测试返回的结果放到外面,这样就不会受for循环的影响
    var bol=false;
    bol=alert("测试成功")
    //把input框里的值循环出来,并提交
    for (var i=0;i<username.length;i++) {
        for (var i=0;i<createdate.length;i++) {
            var aa = {username: username[i],createdate:createdate[i]};
            var goodsList = new Array();
            goodsList.push(aa);
            var data = JSON.stringify(goodsList);
            $.ajax({
                type:'post',
                url:'/Test_a/insert',
                data:data,
                contentType : 'application/json',
                success:function (data) {
                   bol=true;
                }
            })
        }
    }
})

controller层接收

 public String insert(@RequestBody List<Test_a> test_a) {
        System.out.println(test_a);
        }

打印结果为:

[Test_a{id=null, createdate=Thu Mar 14 08:00:00 CST 1991, username='44'}]
[Test_a{id=null, createdate=Fri Mar 14 08:00:00 CST 1997, username='44'}]
[Test_a{id=null, createdate=Sat Mar 14 08:00:00 CST 1998, username='44'}]
[Test_a{id=null, createdate=Fri Mar 14 08:00:00 CST 1997, username='44'}]

这样实体类接收就可以接收到数据了,既然接收到了,数据就然后结合mybatis的批量标签,就可以完成批量操作了。

其余方法设想

1、把这些数据全部放入缓存中,需要传递给后端的时候就只传递一组Id,后端通过id取出缓存中的数据,然后进行操作。
2、如果不使用缓存,同理,直接操作数据库,也只需要传递一组id给后端,后端批量查询出来使用即可。

Ant Design Form 表单中 Form.List 给指定 Item 对象插入数据 1、应用场景 如果现在有个数据结构如下的表单,现在需要通过set方式修改其中的某个 name。 { "sights": [{ "name": "张三" }, { "name": "李四" }, { "name": "王五" } ] } <Form form={form}> <Form.List name="sights"> {(fields, fieldsOperation) => ( 阅读详情

相关推荐

前端传List参数的三种正确姿势:GET/表单/JSON全解析

在Web开发中,前端向后端传递列表(List)参数是接口联调的基础场景,其本质涉及HTTP协议约束、数据序列化机制与框架绑定逻辑三重原理。理解URL编码、表单提交与JSON载荷的差异,能避免400错误、空集合、乱码等高频问题。技术价值在于统一前后端契约、提升调试效率、规避安全风险;典型应用场景包括多选筛选、批量操作、微服务间数据同步等。本文聚焦‘前端传List参数’与‘后端请求接收’两大热词,系统梳理传输路径选择、Axios配置要点及Spring Boot参数绑定细节。

weixin_33483304的博客 306

form表单提交List集合

1.需求:想要将Tab表格内的多条数据形成list集合提交到后台 2.做法: 1)首先:页面处理 形成多个相同的input控件,name名称都相同(结果传不到后台...) 处理方式:后台接收的model类的类名家还是那个【i】编码,形成 name=“ListModelName[0].Name” , name="ListModelName[0].Sex", name="Li...

angyi6424的博客 5140

Spring Boot文件上传疑难排查:从Nginx代理到后端配置的完整解决方案

文件上传是Web应用开发中的基础功能,其原理基于HTTP协议的multipart/form-data编码格式,允许客户端在单个请求中发送二进制数据和表单字段。在技术实现上,Spring Boot通过Servlet容器的Multipart解析器处理上传请求,而Nginx等反向代理则负责请求的转发与负载均衡。这一机制的技术价值在于提供了统一、高效的数据传输方式,是用户提交图片、文档等非文本内容的核心入口。然而,在生产环境的复杂应用场景中,尤其是像Ruoyi-AI这类整合了AI能力的项目,文件上传常因配置不当引发

weixin_30383279的博客 109

5.28 反射和写后台接口的一些总结

前端(html、jsp、小程序、安卓),请求后台保存数据,提交一个form表单,后台接收、处理数据,返回给前端一个状态码,最好返回一个json字符串,如果需要给前端直接返回字符串,需要加@ResponseBody标签。 因为json中带有双引号,容易和return的双引号混淆,我们需要对json中的字符串进行转义,再json的引号前加 \ 便是转义 前端如果是向后台请求获取数据,后台会通过...

Ltoto的博客 370

智能仓储管理系统项目实战:从零搭建Spring Boot+Vue前后端分离应用

企业级应用开发的核心在于理解软件架构的分层设计与数据一致性保障。以经典的MVC(模型-视图-控制器)架构为基础,结合Spring Boot和Vue.js等主流技术栈,可以高效构建前后端分离的系统。其技术价值在于通过清晰的职责划分,实现业务逻辑、数据持久化与用户界面的解耦,提升代码的可维护性和团队协作效率。在仓储管理、电商后台等涉及复杂事务和实时数据更新的应用场景中,如何确保库存增减等核心操作的**数据一致性**成为关键挑战。这通常需要借助数据库**事务管理**机制,例如在Spring框架中使用@Transa

weixin_34203832的博客 354

layui将table转化表单显示的方法(即table.render转为表单展示)

现有一个 table.render({ id : 'table', type:'post', elem : '#table', url : url, where : {'Id' : $data.Id}, page:false, cols : [ [ //表头 ]] }) 最简单直接用ajax请求,确保url路径正确 $.ajax({ dataType:'json', type:'post', url:url, data:{'Id': $data.Id}, success:function (data) {

spring mvc前台向后台传递表单数据的几种方式及后台数据的获取

一、一般前台向后台提交数据都会用form表单提交     表单提交信息后最好的获取方式就是映射为实体 &lt;form id="testform" method="post"&gt; &lt;input type="text" name="name" /&gt; &lt;input type="text" name="age" /&a

bai大伯伯的博客 5662

Xilinx_JESD204B

Xilinx_JESD204B_AXI配置 说明:通过FPGA的高速数据接口JESD204B对AD9625进行高速采集。 环境:Vivado2018.3。 IP核:JESD204(7.2)。 参考手册:pg066_jesd204 v7.2。 资料以及IP_licence:JESD204B AXI协议资料:AXI 文章目录JESD204B概述JESD204B接口术语JESD204B 层JESD204B_AXI介绍AXI介绍JESD204B__AXI_Lite接口AXI-Lite接口介绍AXI-Lite接口信号

Crazzy_M的博客 1万+

axiospost请求向后端提交数据

axiospost请求向后端提交数据 Axios向后端提交数据容易接收不到原因是传参方式是request payload,参数格式是json,而并非用的是form传参,所以在后台用接收form数据的方式接收参数就接收不到了。post表单请求提交时,使用的Content-Type是application/x-www-form-urlencoded,而使用原生AJAX的POST请求如果不指 ...

wyw223的博客 2467

最新Python爬虫实战(入门爬虫篇)——案例15:微博热搜数据采集(详细爬虫思路截图+抓包动图演示+完整爬虫代码+详细注释)

本次案例通过 Python 爬虫技术,成功实现了对微博热搜 API 接口数据的批量爬取与 Excel 保存。代码采用模块化设计,包含接口请求、JSON 解析、数据提取、Excel 持久化等完整流程;通过模拟真实浏览器的请求头和 cookies,有效规避基础反爬策略,保证请求的稳定性。整个爬虫逻辑遵循“API请求 → JSON解析 → 数据提取 → 保存到Excel”的标准流程,与异步加载类网站的爬取范式高度一致。AJAX 接口抓包与分析。

努力让自己发光,对的人才能迎着光而来 7万+

微信小程序(云开发) - 实现微信小程序拼团功能+前后台源码/数据库设计,开团参团、自动成团、微信分享链接URL参与拼团、组团人数/倒计时/实时数据、设置拼团人数限制等(拼团退款处理逻辑、订单同步等)

实现微信小程序云开发拼团功能,云开发小程序--微信拼团设计实现,微信小程序实现秒杀、拼团等效果,微信小程序云开发拼团源码完整版 包含前后台和数据库,拼团商城小程序开发,分销,拼团,社群团购,微信小程序—判断参团人数(设置拼团剩余人数数组)拼多多拼团小程序开发,微信云开发教程怎么实现微信小程序云开发拼团功能?云开发如何实现拼团,拼团小程序怎么弄,微信小程序案例:拼团模块,需要朋友助力,详细源码demo示例,如何做拼团功能,云开发小程序如何做拼团功能,外卖电商拼团,仿拼多多拼团,拼团后退款怎么办,拼团后订单管理

🏆 前端领域优质创作者 4627

form提交后台注解拿不到数据_Form表单详解

主要内容Form表单、表单元素、表单元素的属性、HTML5新增type类型和HTML新增属性知乎视频​www.zhihu.com知乎视频​www.zhihu.com知乎视频​www.zhihu.com知乎视频​www.zhihu.com知乎视频​www.zhihu.com知乎视频​www.zhihu.com知乎视频​www.zhihu.com ...

weixin_39664696的博客 373

Unity如何实现3D物体拆解组装

最近有一个需求,是做一个发动机的拆卸和安装功能,其实是一个很简单的功能,但是其中有一个点我觉的非常有意思,就是拖拽组装时,物体如何精准拖到目标位置,思路有了,但是我一直找不到实现方式,早晨刷牙时无意间想到了叉乘,我才有了解决方案。就凭这一次的灵光乍现,也很有必要写篇博客来记录一下。首先,我们先来看下我们要实现的效果,就是对一个发动机(任意多组件物体,如:车)的360°预览查看,手动拖拽拆解,手动拖拽组装。360°旋转视角远近拉伸视角点击拖拽拆卸拖拽组装。

TxNet 1万+

Spring MVC之web前端、后端数据传输方式总结

前后端数据传输方式总结欢迎使用Markdown编辑器1.GET方法传输数据2.POST使用Form表单方法3.POST 使用json传数据,传List<对象>数据4.总结 欢迎使用Markdown编辑器 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。 1.GET方法传输数据 直接在后面添加参数即可 例如 ?count=1&datajs=rcss&prog

qq_38832153的博客 734

飞腾平台(FT2000/4 D2000/8)配置GPIO引脚

飞腾平台配置CPU的引脚为GPIO工作模式的方式有永久型和暂时型: - 永久型是通过UEFI中的MmioWrite32函数来实现的,该方法可以在UEFI阶段就对复用引脚的工作模式配置为GPIO,并且在进入操作系统后仍然不会发生便会; - 临时型是通过rw工具,在系统下手动修改复用引脚的工作模式,该方法在系统重启后会失效,所以是暂时型的。

qq_30135687的博客 5612

【unity小技巧】常用的方法属性和技巧汇总(长期更新,2025/07/02更新)

Unity开发技巧摘要 本文汇总了Unity开发中的实用技巧,包括移动控制、力应用、物体翻转、单例模式实现等。移动方面介绍了MoveTowards、MovePosition、Translate等方法的区别与应用场景;力应用部分详解了AddForce系列方法的参数和使用方式;物体翻转对比了三种实现方案;单例模式提供了标准实现和泛型优化版本;还收录了绝对值计算、鼠标检测、旋转控制、数值取整等实用代码片段。这些经过验证的技巧能有效提升开发效率,文章将持续更新补充新的实用内容。

向宇的博客,专注php/web全栈 unity游戏开发,欢迎大家评论纠错 3345

springmvc list 256越界

背景 前端form表单传值,后端用bean接收, 其中一个参数是所选城市id,前端通过数组传递,后端bean中使用list接收,当所选城市过多时,异常日志报IndexOutOfBounds,索引256越界 原因 springmvc DataBinder默认collection大小为256 解决 使用@InitBinder注解,初始化WebDataBinder,WebDataBinder继承自Dat...

加班的小狮子 711

2022中山大学计算机技术专硕考研初试、复试经验帖

个人简介 推荐几个我自己感觉对考研非常有帮助的小助手吧。可以帮助节省时间! 考研时间规划总览 初试篇 数学 英语 政治 408 复试篇 机试 笔试 面试 关于选导师 个人感言

zik的博客 1万+

九、WEB项目开发之SpringMVC之数据绑定(接收前端参数)

  关于在Controller中如何接收前端参数详解: JAVA类型 form表单 AJAX Controller类 ①:基本类型的封装类:String name=”attr” value=”val” data{“attr”:”val”} @RequestParam(“attr”) String s 或自定义类:String attr ①的数组...

panchang199266的博客 513

OpenCode + Oh My OpenCode:打造你的终极AI编程团队(OpenCode新手入门指南)

本文详细介绍了开源终端AI编程助手 OpenCode 的完整配置教程 🖥️,从安装、AI模型配置到增强插件 Oh My OpenCode 的部署一应俱全。支持 Claude、ChatGPT、Gemini 多模型切换 🤖,还能实现多AI智能体协作开发。步骤清晰适合新手 📝,想在终端用AI写代码的开发者不要错过 ✨

XiaoqiangClub的博客 1万+

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

前端传List给后端的4种工业级方案与避坑指南

HTTP协议本身不支持数组,所谓‘前端传List’本质是将数组序列化为字符串并按约定规则反序列化。理解这一底层原理,是解决参数解析失败、400错误、数据截断等高频问题的关键。主流方案包括Query重复键名、JSON Body、Form Data数组语法和逗号分隔字符串,其中JSON Body因语义清晰、无长度限制、天然支持嵌套结构,已成为现代RESTful API的事实标准;而Spring Boot的@RequestBody注解与Jackson反序列化机制,则是保障List参数准确接收的核心技术支撑。该方案

weixin_32821533的博客 158

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

Kiln Evals V2 手动创建流修复:从 V1 遗留到后端烘焙 LLM Judge 的完整实践指南

> 导读:本文以 Kiln 仓库中 [evals_v2_ui_fix 项目](https://link.gitcode.com/i/640107d3058ca820f076a066adb1e546) 的 [functional_spec.md](https://link.gitcode.com/i/4ce72b98d1e3b6a816ed891fc400751f) 与 [architecture.

gitblog_00423的博客 453

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

廖雪峰Python教程[完整版]

廖雪峰的python教程整理的,已经排好版了,而且还是完整的,适合小白

AdminJS flat 数据扁平化模型:params 存储、flat 工具集与前后端数据流转实战

> 本指南以 [src/utils/flat/flat.doc.md](https://link.gitcode.com/i/ed05ed295c29802b4ffb48086e904e5c) 为核心,完整讲解 AdminJS 如何在 `params` 中扁平化存储嵌套对象与数组、为什么要这样做,以及 `flat` 工具模块(`flatten` / `unflatten` / `get` / `s

gitblog_00662的博客 242

SpringBoot+Vue前后端分离架构实战:从零构建公考复习网站

在Java Web开发领域,SpringBoot以其‘约定大于配置’的理念,极大地简化了企业级应用的搭建和部署流程,成为构建微服务和RESTful API的主流框架。其核心原理在于通过自动配置和起步依赖,快速整合Spring生态,开发者得以专注于业务逻辑的实现。Vue.js作为渐进式前端框架,通过响应式数据绑定和组件化系统,提供了高效、灵活的用户界面构建方案。前后端分离架构正是这两种技术结合的典型实践,后端SpringBoot专注于提供数据接口和业务处理,前端Vue负责交互与展示,通过HTTP协议和JSON

weixin_30698297的博客 377

Django框架整理

Django是一个功能强大的web框架。 前言:框架模式简介 1、MVC和MTV框架模式:分层级进行管理 说到框架模式我们有必要简单的说下设计模式,了解下设计模式这个概念,因为有人对设计模式和框架模式的概念经常混淆 设计模式: 是一套被反复使用,多数人知道并经过分类的代码设计经验总结,是为了解决一些通用性问题的 目的:重用代码并保证代码的可靠性 设计模式分类:单例,抽象工厂 等等 23种模式 一句话总结:解

有用的话关个注,点个赞,收个藏🫶。 1713
上一篇: Shiro安全框架实现授权逻辑
下一篇: mybatis批量添加
与黑夜为伍
博客等级 码龄7年 19粉丝 80原创
评论 4
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值