第一种方式：(使用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. Leetcode #9 Easy <Palindrome Number>

    题目如图,下面是我的解决方法: class Solution { public boolean isPalindrome(int x) { if(x < 0) //由题意可知,小于0的数不可能为 ...

  2. 【VS开发】【DSP开发】地址对齐

    组成原理说明------地址对齐 1.引入 1.1如下面的代码,定义了三个变量,int,char,int,并输出他们的十六进制的内存地址. #include<stdio.h> int ma ...

  3. Unity打包出来的App 跳转其他 App

    void Start()//在android测试成功 { bool fail = false; string bundleId = "跳转的包名";//包名称 AndroidJav ...

  4. [转帖]Windows 下如何配置Oracle ASM???

    Windows 下如何配置Oracle ASM??? candon123关注10人评论16725人阅读2011-02-09 21:40:57   本篇介绍了如何在windows下创建裸设备,并创建AS ...

  5. 非旋(fhq)Treap小记

    前置知识:二叉搜索树 以下摘自 ↑: 二叉搜索树每次操作访问O(深度)个节点. 在刻意构造的数据中,树的形态会被卡成一条链,于是复杂度爆炸 它的复杂度与直接暴力删除类似. 但二叉搜索树扩展性强.更复杂 ...

  6. 双元素非递增（容斥）--Number Of Permutations Educational Codeforces Round 71 (Rated for Div. 2)

    题意:https://codeforc.es/contest/1207/problem/D n个元素,每个元素有a.b两个属性,问你n个元素的a序列和b序列有多少种排序方法使他们不同时非递减(不同时g ...

  7. # 数字签名&数字证书

    目录 数字签名&数字证书 数字签名 数字证书 数字证书的实例(https协议) 数字签名&数字证书 参考资料: 数字签名是什么?-阮一峰的网络日志 数字签名和数字证书究竟是什么?知乎- ...

  8. Laravel之杂记

    1.composer设置国内镜像加速 composer config -g repo.packagist composer https://mirrors.aliyun.com/composer/ 2 ...

  9. 从入门到自闭之Python三大器--生成器

    1.什么是生成器 核心:生成器的本质就是一个迭代器 迭代器是python自带的的 生成器是程序员自己写的一种迭代器 编写方式: 基于函数编写 推导式编写 def func (): print(&quo ...

  10. python网络爬虫（12）去哪网酒店信息爬取

    目的意义 爬取某地的酒店价格信息,示例使用selenium在Firefox中的使用. 来源 少部分来源于书.python爬虫开发与项目实战 构造 本次使用简易的方案,模拟浏览器访问,然后输入字段,查找 ...