常用springmvc多种复杂嵌套实体前后端映射form提交和ajax提交

最新推荐文章于 2023-06-07 12:27:48 发布

原创最新推荐文章于 2023-06-07 12:27:48 发布 · 3.5k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#springMvc前后端传值 #spring嵌套bean映射

springboot 同时被 2 个专栏收录

8 篇文章

订阅专栏

javaweb

4 篇文章

订阅专栏

最近项目用到了很多复杂自定义对象的自动注入总结一下以备不时之需，包含form方式和ajax方式的属性或者key的写法，感觉spring自带的映射已经足够强大

先定义一个复杂对象:Person

package com.lengedyun.springbootmybaitis.entity;

import lombok.Data;
import lombok.ToString;

import java.util.List;
import java.util.Map;

/**
 * 没有这两个注解的可以添加lombok依赖
 * 或者自己生成get,set，以及toString方法
 */
@Data
@ToString
public class Person {

    //简单参数类型
    private String pName;

    private Integer pAge;

    //对象类型
    private Son directSon;

    //简单类型列表嵌套
    private List<String> hobby;

    //对象类型列表嵌套
    private List<Son> sons;

    //map属性
    private Map<String,Object> friends;

}

lombok工具类依赖:

<dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.16.10</version>
        </dependency>

子类：Son

package com.lengedyun.springbootmybaitis.entity;

import lombok.Data;
import lombok.ToString;

/**
 * 没有这两个注解的可以添加lombok依赖
 * 或者自己生成get,set，以及toString方法
 */

@Data
@ToString
public class Son {

    //简单参数类型
    private String sName;

    private Integer sAge;
}

测试类：BeanMappingTest

package com.lengedyun.springbootmybaitis.controller;

import com.lengedyun.springbootmybaitis.entity.Person;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/beanMappingController")
public class BeanMappingTest {

    @RequestMapping("/goTestPage")
    public String goTestPage(){
        return "beanmappingtest";
    }

    /**表单方式提交**/
    @RequestMapping("/formSubmit")
    public void formSubmit(Person person){
        System.out.println(person.toString());
    }

    /**Ajax方式提交**/
    @RequestMapping("/ajaxSubmit")
    public void ajaxSubmit(Person person){
        System.out.println(person.toString());
    }


   

}

测试页面:beanmappingtest.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>SpringMvcBean映射测试</title>
    <script type="text/javascript" th:src="@{/static/js/jquery-3.3.1.min.js}"></script>
</head>
<body>
<h2>form表单提交</h2>
<div>
<form id="beanMapping" action="/beanMappingController/formSubmit" method="post">
    父名称:<input id="pName" name="pName" type="text"></br>
    父年龄:<input id="pAge" name="pAge" type="text"></br>
    爱好:<input id="hobby1" name="hobby" type="checkbox" value="hobby1">学习<input id="hobby2" name="hobby" type="checkbox" value="hobby1">看书<br>
    <hr>
    <h3>家庭成员</h3>
    嫡长子:嫡长子名字：<input type="text" name="directSon.sName" id="directSonName">嫡长子年龄：<input type="text" name="directSon.sAge" id="directSonAge"><br>
    庶子1:庶子名字：<input type="text" name="sons[0].sName" id="sons1Name">庶子年龄：<input type="text" name="sons[0].sAge" id="sons1Age"><br>
    庶子2:庶子名字：<input type="text" name="sons[1].sName" id="sons2Name">庶子年龄：<input type="text" name="sons[1].sAge" id="sons2Age"><br>
    <hr>
    <h3>社会关系</h3>
    朋友:名字：<input type="text" name="friends[fName]" id="friedName"><br>
    领导:名字：<input type="text" name="friends[lName]" id="leaderName"><br>
    <hr>
    <input id="submit" type="submit" value="form提交"><br>
</form>
    <br>
    <input id="ajaxSubmit" type="button" value="ajax提交" onclick="ajaxSubmit()"><br>
</div>
</body>
<script>
    function ajaxSubmit() {
        $.ajax({
            url: '/beanMappingController/ajaxSubmit',
            type: 'POST',
            data: {
                "pName": 'pName',
                "pAge": 45,
                "hobby":'hobby1,hobby2',
                "directSon.sName": 'directSonName',
                "directSon.sAge": 22,
                "sons[0].sName": 'son1Name',
                "sons[0].sAge": 15,
                "sons[1].sName": 'son2Name',
                "sons[1].sAge": 12,
                "friends[fName]": 'fName',
                "friends[lName]": 'lName',
            },
            success: function (data) {
                console.log(data)
            },
            error: function () {

            },
        })
    }
</script>
</html>

效果图：

打印内容

后半部分