spring MVC 后端 接收 前端 批量添加的数据(简单示例)

第一种方式:(使用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接收的方式,不过我忘了。有点尴尬了。希望路过的大佬有想法能贴出来一下,一起学习(本人菜鸟一枚)>..<

posted @ 2018-10-29 16:22  追梦滴小蜗牛  阅读(5525)  评论(1编辑  收藏  举报