第一种方式：(使用ajax的方式)

前端代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <title>Title</title>

</head>

<body>

<script src="${pageScope.request.ContextPath}/js/jquery-3.3.1.min.js"></script>

<table>

    <thead>

        <th>编号</th>

        <th>姓名</th>

        <th>性别</th>

        <th>学历</th>

        <th>增加</th>

        <th>移除</th>

    </thead>

    <tbody id="data1">

        <tr>

            <td><input type="text" name="empId"></td>

            <td><input type="text" name="empName"></td>

            <td>

                <select name="empSex">

                    <option value="男">男</option>

                    <option value="女">女</option>

                </select>

            </td>

            <td>

                <select name="eduEducation">

                    <option value="本科">本科</option>

                    <option value="硕士">硕士</option>

                    <option value="博士">博士</option>

                </select>

            </td>

            <td><input type="button" onclick="addElement(this);" value="+"></td>

            <td><input type="button" value="-" onclick="delElement(this)"></td>

        </tr>

    </tbody>

</table>

<p><input type="button" id="btn_add" value="批量添加"></p>

</body>

<script>

    //批量添加

    $("#btn_add").click(function () {

        var data=[];

        //循环tbody里面所有的tr，并取出每行相对的值,填充到数组中

        $("#data1 tr").each(function (index,obj) {

            data.push({

                empId:$("input[name='empId']",obj).val(),

                empName:$("input[name='empName']",obj).val(),

                empSexual:$("select[name='empSexual'] option:selected",obj).val(),

                eduEducation:$("select[name='eduEducation'] option:selected",obj).val()

            })

        })

        //发起post请求

        $.post({

            url:"",

            contentType:"application/json",

            data:JSON.stringify(data),//将对象转为字符

            success:function (text) {

                alert(text.msg);

            }

        });

    })

    //复制tr节点的内容

    function addElement(x){

        $(x).parents("tr").clone().appendTo($("#data1"));

    }

    //移除tr节点

    function delElement(x){

        $(x).parents("tr").remove();

    }

</script>

</html>

后端代码：

    //访问test页面

    @RequestMapping(path="/c",method = RequestMethod.GET)

    public String test1(){

        return "test1";

    }

    //接收test页面的字符数组

    @RequestMapping(path = "/c",method = RequestMethod.POST,produces = "application/json;charset=utf-8")

    @ResponseBody

    public String Receive(@RequestBody List<Employee> list){  //Employee可以改为Object

        for (Employee employee : list) {

            System.out.println(employee);

        }

        return "{\"msg\":\"添加成功\"}";

    }

实体类

package com.oukele.model;

import java.math.BigDecimal;

public class Employee {

    private String empId;

    private String empName;

    private String empSexual;

    private String eduEducation;

    public String getEmpId() {

        return empId;

    }

    public void setEmpId(String empId) {

        this.empId = empId == null ? null : empId.trim();

    }

    public String getEmpName() {

        return empName;

    }

    public void setEmpName(String empName) {

        this.empName = empName == null ? null : empName.trim();

    }

    public String getEmpSexual() {

        return empSexual;

    }

    public void setEmpSexual(String empSexual) {

        this.empSexual = empSexual == null ? null : empSexual.trim();

    }

    public String getEduEducation() {

        return eduEducation;

    }

    public void setEduEducation(String eduEducation) {

        this.eduEducation = eduEducation == null ? null : eduEducation.trim();

    }

    @Override

    public String toString() {

        return "Employee{" +

                "empId='" + empId + '\'' +

                ", empName='" + empName + '\'' +

                ", empSexual='" + empSexual + '\'' +

                ", eduEducation='" + eduEducation + '\'' +

                '}';

    }

}

演示：

后台接收后打印的值：

第二种方式：(使用form表单)

创建一个实体类 将Employee封装起来

FormBean

package com.oukele.model;

import java.util.List;

public class FormBean {

    private List<Employee> employeeList;

    public List<Employee> getEmployeeList() {

        return employeeList;

    }

    public void setEmployeeList(List<Employee> employeeList) {

        this.employeeList = employeeList;

    }

}

前端代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <title>Title</title>

</head>

<body>

<script src="${pageScope.request.ContextPath}/js/jquery-3.3.1.min.js"></script>

<form action="/zhoumo/c" method="post" id="myform">

    <table>

        <thead>

            <th>编号</th>

            <th>姓名</th>

            <th>性别</th>

            <th>学历</th>

            <th>增加</th>

            <th>移除</th>

        </thead>

        <tbody id="data1">

            <tr>

                <td><input type="text" name="empId"></td>

                <td><input type="text" name="empName"></td>

                <td>

                    <select name="empSexual">

                        <option value="男">男</option>

                        <option value="女">女</option>

                    </select>

                </td>

                <td>

                    <select name="eduEducation">

                        <option value="本科">本科</option>

                        <option value="硕士">硕士</option>

                        <option value="博士">博士</option>

                    </select>

                </td>

                <td><input type="button" onclick="addElement(this);" value="+"></td>

                <td><input type="button" value="-" onclick="delElement(this)"></td>

            </tr>

        </tbody>

    </table>

</form>

<p><input type="button" id="btn_add" value="批量添加"></p>

</body>

<script>

    $("#btn_add").click(function () {

        //获取行

        var rows = $("#data1 tr");

        //循环每一行

        $(rows).each(function (index,obj) {

            //将每一行中的 input[type='text'],select的对象取出,再进行一次循环

            $("input[type='text'],select",obj).each(function (i,o) {

                //当前对象 添加 name 属性值 name =employeeList[索引].对应的属性值

                $(o).attr("name","employeeList["+index+"]."+$(o).attr("name"));

            })

        });

        //提交

        $("#myform").submit();

    })

    //复制tr节点的内容

    function addElement(x){

        $(x).parents("tr").clone().appendTo($("#data1"));

    }

    //移除tr节点

    function delElement(x){

        $(x).parents("tr").remove();

    }

</script>

</html>

后台代码：

    //访问test页面

    @RequestMapping(path="/c",method = RequestMethod.GET)

    public String test1(){

        return "test1";

    }//接收test页面的form传递过来的值

    @RequestMapping(path = "/c",method = RequestMethod.POST)

    public String Receive1(FormBean formBean){

        for (Employee employee : formBean.getEmployeeList()) {

            System.out.println(employee);

        }

        //重定向

        return "redirect:/zhoumo/c";

    }

演示：

前端 form表单 提交

后端：

后台还有Map接收的方式，不过我忘了。有点尴尬了。希望路过的大佬有想法能贴出来一下，一起学习（本人菜鸟一枚）>..<

spring MVC 后端 接收 前端 批量添加的数据（简单示例）的更多相关文章

  1. Spring MVC 后端获取前端提交的json格式字符串并直接转换成control方法对应的参数对象

    场景: 在web应用开发中,spring mvc凭借出现的性能和良好的可扩展性,导致使用日渐增多,成为事实标准,在日常的开发过程中,有一个很常见的场景:即前端通过ajax提交方式,提交参数为一个jso ...

  2. spring mvc 后端获得前端传递过来的参数的方法

    1.通过HttpServletRequest 获得 HttpServletRequest.getParameter(参数名),可以获得form表单中传递的参数,或ajax或url中传递过来的参数,如果 ...

  3. 【转载】spring mvc 后端获得前端传递过来的参数的方法

    1.通过HttpServletRequest 获得 HttpServletRequest.getParameter(参数名),可以获得form表单中传递的参数,或ajax或url中传递过来的参数,如果 ...

  4. C#后端接收前端的各种类型数据

    前端往后端提交数据的方式常用的就这么三种:1.form提交:2.url参数提交:3.json提交 1.针对表单form方式的提交 在后端使用Request.Form的方式接收,比如 前端代码片段: v ...

  5. Spring MVC同时接收一个对象与List集合对象

    原:https://blog.csdn.net/u011781521/article/details/77586688/ Spring MVC同时接收一个对象与List集合对象 2017年08月25日 ...

  6. Spring MVC在接收复杂集合参数

    Spring MVC在接收集合请求参数时,需要在Controller方法的集合参数里前添加@RequestBody,而@RequestBody默认接收的enctype (MIME编码)是applica ...

  7. ASP.NET MVC用存储过程批量添加修改数据

    用Entity Framework 进行数据库交互,在代码里直接用lamda表达式和linq对数据库操作,中间为程序员省去了数据库访问的代码时间,程序员直接可以专注业务逻辑层的编写.但是对于比较复杂的 ...

  8. Spring MVC如何接收浏览器传递来的请求参数--request--形参--实体类封装

    阅读目录 1. 通过HttpServletRequest获得请求参数和数据 2. 处理方法形参名==请求参数名 3. 如果形参名跟请求参数名不一样怎么办呢?用@RequestParam注解 4. 用实 ...

  9. 0056 Spring MVC如何接收浏览器传递来的请求参数--request--形参--实体类封装

    浏览器总会向服务器传递一些参数,那么Spring MVC如何接收这些参数? 先写个简单的html,向服务器传递一些书籍信息,如下: <!DOCTYPE html> <html> ...

随机推荐

  1. 描述下fastJSON，jackson等等的技术

    ①Jackson:依赖的jar包较少,简单易用性能高,更新速度也比较快,但是对于复杂类型的json转换bean会出 现问题,一些集合Map,List的转换出现问题,对于复杂类型的bean转换Json, ...

  2. sublime集成MinGW，打造C/C++开发环境

    MinGW是是将GCC编译器和GNU Binutils移植到Win32平台下的产物,包括一系列头文件(Win32API).库和可执行文件.MinGW是从Cygwin(1.3.3版)基础上发展而来.GC ...

  3. MySQL的事务和锁

    MySQL的事务和锁   阅读目录 什么是事务 事务:是数据库操作的最小工作单元,是作为单个逻辑工作单元执行的一系列操作:这些操作作为一个整体一起向系统提交,要么都执行.要么都不执行:事务是一组不可再 ...

  4. Hive 教程(三)-DDL基础

    DDL,Hive Data Definition Language,数据定义语言: 通俗理解就是数据库与库表相关的操作,本文总结一下基本方法 hive 数据仓库配置 hive 数据仓库默认位置在 hd ...

  5. JAVA文件类工具

    FileUtil package cn.jiangzeyin.util.file; import org.springframework.util.Assert; import java.io.*; ...

  6. @Value中冒号的作用

    先说明冒号的作用 :可以设置默认值 @Value中可以使用 @Value("${hello:defaultValue}") private String hello; 若找不到属性 ...

  7. vscode 格式化vue代码单引号变双引号

    首选项->设置.输入框输入vetur vscode中设置 "vetur.format.defaultFormatterOptions": { "prettier&q ...

  8. Mysql学习（四）之通过homebrew安装mysql后，为什么在系统偏好设置里没有mysql

    原因 用brew install packagename是用来安装命令行工具的,一般不可能影响到图形界面. mysql官方文档是通过dmg文件安装的: The MySQL Installation P ...

  9. Centos7:zookeeper安装,配置与使用

    配置jdk环境 解压缩zookeeper的压缩包 配置 创建data目录 复制zoo_sample.cfg为zoo.cfg 修改confg/zoo.cfg中dataDir=**/data 常用命令 . ...

  10. ES6入门之Proxy

    1. 概述 Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种『元编程』即对编程语言进行编程. 1.1 理解 Proxy 是在目标对象之前架设一层『拦截』,外部对对象的访问 ...