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

相关文章推荐
谈吐大方的佛珠 · 【科技自立自强】西安交大科研团队研发低功耗高 ...· 1 年前 ·
博学的双杠 · 【VBA】一键合并单元格_rngUser· 1 年前 ·
迷茫的领结 · 搞机：AS自带模拟器AVD Root 和 ...· 2 年前 ·
追风的小马驹 · 问题记录：使用webpack配置中useBu ...· 2 年前 ·
另类的甜瓜 · Day26 前端蛇行撞牆記 - 在 Vue ...· 2 年前 ·
后端代码：
    //访问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" %>
    <title>Title</title>
</head>
<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">
                <td><input type="text" name="empId"></td>
                <td><input type="text" name="empName"></td>
                    <select name="empSexual">
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                    <select name="eduEducation">
                        <option value="本科">本科</option>
                        <option value="硕士">硕士</option>
                        <option value="博士">博士</option>
                    </select>
                <td><input type="button" οnclick="addElement(this);" value="+"></td>
                <td><input type="button" value="-" οnclick="delElement(this)"></td>
        </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表单 提交 
                                    前端ajax与后端Spring MVC控制器有以下五种数据交互方式。（前台使用了dhtmlxGrid,后端使用了fastjson）
方式一 通过URL传参
通过URL挂接参数，如/auth/getUser?userid=’6′
服务器端方法可编写为：getUser(String userid)，也可新增其他参数如HttpSession, HttpServletRequest,HttpServletResponse,Mode,ModelAndView等。
方式二 单值传参
前台调用如：
ajaxPost("/base/user/exchangeSort",{"id":rid,"otherid"
                                    搜索热词下面是编程之家 jb51.cc 通过网络收集整理的代码片段。编程之家小编现在分享给大家，也给大家做个参考。varmids=newArray();for(vari=0;imids.push(rows[i].id);}$.ajax({type:'POST',dataType:"json",async:false,traditional:true,/...
                                    展开全部使用List集合形式的参数的批量操作如果使用List集合来进行批量操作，首先要把62616964757a686964616fe4b893e5b19e31333337623436待添加的数据与实体类对应(一个实体类通常对应数据库里的一张表, 下面的例子中Actor类就是一个实体类, 它对应了数据库中的"t_actor"数据表).比如"t_actor"数据表中有id,first_name,l...
这个就要在url（连接数据库的配置）中配置
要在url中加上allowMultiQueries=true，这个意思使支持多条语句
第二个是写sql语句，这个必须要使用<foreach></foreach>这个标签了也就是使用sql片段了
这个意思说白了也就是执行了多条update语...
                                    通过ServletAPI、ModelAndView、Model、Map、ModelMap向Request请求域添加数据，通过ServletAPI向Session、Application请求域添加数据。介绍了Thymeleaf、转发、重定向视图，也介绍了视图控制器和mvc注解驱动。最后以JSP文件实现了简单的页面跳转
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 h...
                                    insert into user(name,age，createTime,createBy,modifyTime,modifyBy)values( #{item.name},#{item.age},#{item.createTime},#{item.createBy},#{item.modifyTime},#{item.modifyBy} )update tests_type = #{item.t...