AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

SpringBoot的4中常见入参形式错误解析

2024-08-30 59
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
云解析 DNS，旗舰版 1个月
全局流量管理 GTM，标准版 1个月
公共DNS（含HTTPDNS解析），每月1000万次HTTP解析
简介： 在使用SpringBoot进行前后端接口对接时，常遇到如500、400等请求错误，本文总结了四个常见的复杂请求类型及其解决方案，包括实体嵌套List提交、普通文件上传、List提交及数组Array提交，详细展示了正确的前端与后端代码实现，帮助开发者避免常见错误，提高开发效率。

前言

SpringBoot前后端接口对接工作时，经常遇到请求500，400等问题，马虎大意经常导致时间浪费，为此总结了4个常见的复杂请求类型，以此为戒。

开始

1.实体嵌套List提交

🌰例子：提交一个老师的实体Teacher，老师管理着不同的学生，还要传入学生实体List <Student>
❌常见问题：提交异常,会报400错误
✔️正确前端代码

<button onclick="f1();" class="btn btn-primary">f1提交测试</button>

<script src="https://code.jquery.com/jquery.js"></script>
<script>
  const students = [{
   
   
        name: "王小明",
        age: "15",
    },{
   
   
        name: "李小红",
        age: "15",
    }]
    const teacher = {
   
   
        name: "张老师",
        age: "40",
        students:students
    }
    // 实体嵌套List提交
    function f1(){
   
   
        // 关键逻辑，需要转化成JSON字符串
        let data = JSON.stringify(teacher)
        $.ajax({
   
   
            type : 'post',
            url : '/f1',
            data : data,
            contentType:'application/json',
            success : function(resData) {
   
   
                console.log("f1调用成功" + resData)
                alert("f1调用成功" + resData);
            },
        });
    }
</script>

✔️正确后台接收

    /**
     * @Description 实体嵌套List提交
     * @param teacher
     * @Return java.lang.String
     */
    @PostMapping("/f1")
    @ResponseBody
    public String f1(@RequestBody Teacher teacher){
   
   
        return teacher.toString();
    }
2.普通文件上传

🌰例子：普通input 文件上传通过onchange事件进行数据组装后，提交后台
❌常见问题：提交后,后台接收到的MultipartFile为空
✔️正确前端代码

<input type="file" name="f2" id="f2" onchange="f2()" multiple="multiple"></input>

<script src="https://code.jquery.com/jquery.js"></script>
<script>
    // 文件上传
    function f2(){
   
   
        let file = event.target.files[0];
        let formData = new FormData();
        formData.append('file', file);
        $.ajax({
   
   
            url: '/f2',
            type: 'post',
            contentType: false,  // ContentType设置成false
            processData: false, // 不需要让浏览器对FormData进行转换
            data: formData
        }).done(function (resData) {
   
   
            console.log("f2调用成功:" + resData)
            alert("f2调用成功：" + resData)
        })
    }
</script>

✔️正确后台接收

    /**
     * @Description 文件上传
     * @param file
     * @Return java.lang.String
     */
    @PostMapping("/f2")
    @ResponseBody
    public String f2(@RequestParam("file") MultipartFile file) {
   
   
        if (file.isEmpty()) {
   
   
            return "上传失败，请选择文件";
        }
        String fileName = file.getOriginalFilename();
        return fileName;
    }
3.List提交

🌰例子：提交时，传给后台一个List
❌常见问题：提交异常,会报400错误
✔️正确前端代码

 <button onclick="f3();" class="btn btn-primary">f3提交测试</button>

<script src="https://code.jquery.com/jquery.js"></script>
<script>
    const teachers = [{
   
   
        name: "张老师",
        age: "40"
    },{
   
   
        name: "李老师",
        age: "35"
    }]
    // 直接提交List
    function f3(){
   
   
        // 关键逻辑，需要转化成JSON字符串
        let data = JSON.stringify(teachers)
        $.ajax({
   
   
            type : 'post',
            url : '/f3',
            data : data,
            contentType:'application/json',
            success : function(resData) {
   
   
                console.log("f3调用成功" + resData)
                alert("f3调用成功" + resData);
            },
        });
    }
</script>

✔️正确后台接收

    /**
     * @Description List实体上传
     * @param teachers
     * @Return java.lang.String
     */
    @PostMapping("/f3")
    @ResponseBody
    public String f3(@RequestBody List<Teacher> teachers) {
   
   
        return teachers.toString();
    }
4.数组Array提交

例子🌰：提交时，传给后台一个Array
❌常见问题：提交异常,会报500错误
✔️正确前端代码

<button onclick="f4();" class="btn btn-primary">提交f4测试</button>

<script src="https://code.jquery.com/jquery.js"></script>
<script>
const array = [1,2,3,4]
// 直接提交数组
function f4(){
   
   
    $.ajax({
   
   
        type : 'post',
        url : '/f4',
        data : {
   
   
            array:array
        },
        dataType: 'json',
        success : function(resData) {
   
   
            console.log("f4调用成功" + resData)
            alert("f4调用成功" + resData);
        },
    });
}
</script>

✔️正确后台接收

    /**
     * @Description 数组上传
     * @param array
     * @Return java.lang.String
     */
    @PostMapping("/f4")
    @ResponseBody
    public int[] f4(@RequestParam(value = "array[]")int[] array) {
   
   
        return array;
    }

可视化代码

前端
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>请求列表</title>
    <link rel="shortcut icon" href="/static/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <table class="table">
        <caption style="text-align: center;"> <h2>SpringBoot常见出错请求</h2></caption>
        <thead>
        <tr>
            <th style="min-width: 40px">No</th>
            <th style="min-width: 140px">类型</th>
            <th style="min-width: 180px">描述</th>
            <th style="min-width: 100px">常见问题</th>
            <th>参数Data</th>
            <th>请求代码</th>
            <th>后端代码</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr class="active">
            <td>f1</td>
            <td>实体嵌套List提交</td>
            <td>
                <div>
                    适用于请求时,一个实体嵌套这一个list。</br>
                    举例:提交一个老师的实体Teacher，老师管理着不同的学生，还要传入学生实体List &lt;Student&gt;
                </div>
            </td>
            <td>提交异常,会报400错误</td>
            <td>
               <pre id="f1Text">
{
  "name": "张老师",
  "age": "40",
  "students": [
    {
      "name": "王小明",
      "age": "15"
    },
    {
      "name": "李小红",
      "age": "15"
    }
  ]
}
               </pre>
            </td>
            <td>
                <pre id="f1Code">
 function f1(){
    // 关键逻辑，需要转化成JSON字符串
    let data = JSON.stringify(teacher)
    $.ajax({
        type : 'post',
        url : '/f1',
        data : data,
        contentType:'application/json',
        success : function(resData) {
            console.log("f1调用成功" + resData)
            alert("f1调用成功" + resData);
        },
    });
}
                </pre>
            </td>
            <td>
                <pre id="f1Java">
@PostMapping("/f1")
@ResponseBody
public String f1(@RequestBody Teacher teacher){
    return teacher.toString();
}
                </pre>
            </td>
            <td>
                <button onclick="f1();" class="btn btn-primary">f1提交测试</button>
            </td>
        </tr>
        <tr class="success">
            <td>f2</td>
            <td>文件上传</td>
            <td>适用于原生文件上传,onchange后数据组装</td>
            <td>提交时后台接收的MultipartFile为空</td>
            <td>
                <pre id="f2Text">file: (binary)</pre>
            </td>
            <td>
                <pre id="f2Code">
function f2(){
    let file = event.target.files[0];
    let formData = new FormData();
    formData.append('file', file);
    $.ajax({
        url: '/f2',
        type: 'post',
        contentType: false,  // ContentType设置成false
        processData: false, // 不需要让浏览器对FormData进行转换
        data: formData
    }).done(function (resData) {
        console.log("f2调用成功:" + resData)
        alert("f2调用成功：" + resData)
    })
}

                </pre>
            </td>
            <td>
                <pre id="f2Java">
@PostMapping("/f2")
@ResponseBody
public String f2(@RequestParam("file") MultipartFile file) {
    if (file.isEmpty()) {
        return "上传失败，请选择文件";
    }
    String fileName = file.getOriginalFilename();
    return fileName;
}
                </pre>
            </td>
            <td>
                <input type="file" name="f2" id="f2" onchange="f2()" multiple="multiple"></input>
            </td>
        </tr>

        <tr class="active">
            <td>f3</td>
            <td>上传List</td>
            <td>
                <div>
                    适用于请求时,直接传一个List实体。</br>
                </div>
            </td>
            <td>提交异常,会报400错误</td>
            <td>
               <pre id="f3Text">
[{
    name: "张老师",
    age: "40"
},{
    name: "李老师",
    age: "35"
}]
               </pre>
            </td>
            <td>
                <pre id="f3Code">
 function f3(){
    // 关键逻辑，需要转化成JSON字符串
    let data = JSON.stringify(teachers)
    $.ajax({
        type : 'post',
        url : '/f3',
        data : data,
        contentType:'application/json',
        success : function(resData) {
            console.log("f3调用成功" + resData)
            alert("f3调用成功" + resData);
        },
    });
}
                </pre>
            </td>
            <td>
                <pre id="f3Java">
@PostMapping("/f3")
@ResponseBody
public String f3(@RequestBody List&lt;Teacher&gt; teachers) {
    return teachers.toString();
}
                </pre>
            </td>
            <td>
                <button onclick="f3();" class="btn btn-primary">f3提交测试</button>
            </td>
        </tr>

        <tr class="success">
            <td>f4</td>
            <td>上传数组Array</td>
            <td>适用于请求时,直接传一个数组。</td>
            <td>提交异常,会报500错误</td>
            <td>
                <pre id="f4Text">[1,2,3,4]</pre>
            </td>
            <td>
                <pre id="f4Code">
function f4(){
    $.ajax({
        type : 'post',
        url : '/f4',
        data : {
            array:array
        },
        dataType: 'json',
        success : function(resData) {
            console.log("f4调用成功" + resData)
            alert("f4调用成功" + resData);
        },
    });
}
                </pre>
            </td>
            <td>
                <pre id="f4Java">
@PostMapping("/f4")
@ResponseBody
public int[] f4(@RequestParam(value = "array[]")int[] array) {
    return array;
}
                </pre>
            </td>
            <td>
                <button onclick="f4();" class="btn btn-primary">提交测试</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<script>
    const students = [{
    
    
        name: "王小明",
        age: "15",
    },{
    
    
        name: "李小红",
        age: "15",
    }]
    const teacher = {
    
    
        name: "张老师",
        age: "40",
        students:students
    }
    // F1 Json数据格式化
    $('#f1Text').html(JsonFormat(teacher));

    // 实体嵌套List提交
    function f1(){
    
    
        // 关键逻辑，需要转化成JSON字符串
        let data = JSON.stringify(teacher)
        $.ajax({
    
    
            type : 'post',
            url : '/f1',
            data : data,
            contentType:'application/json',
            success : function(resData) {
    
    
                console.log("f1调用成功" + resData)
                alert("f1调用成功" + resData);
            },
        });
    }
    // 文件上传
    function f2(){
    
    
        let file = event.target.files[0];
        let formData = new FormData();
        formData.append('file', file);
        $.ajax({
    
    
            url: '/f2',
            type: 'post',
            contentType: false,  // ContentType设置成false
            processData: false, // 不需要让浏览器对FormData进行转换
            data: formData
        }).done(function (resData) {
    
    
            console.log("f2调用成功:" + resData)
            alert("f2调用成功：" + resData)
        })
    }

    const teachers = [{
    
    
        name: "张老师",
        age: "40"
    },{
    
    
        name: "李老师",
        age: "35"
    }]
    // 直接提交List
    function f3(){
    
    
        // 关键逻辑，需要转化成JSON字符串
        let data = JSON.stringify(teachers)
        $.ajax({
    
    
            type : 'post',
            url : '/f3',
            data : data,
            contentType:'application/json',
            success : function(resData) {
    
    
                console.log("f3调用成功" + resData)
                alert("f3调用成功" + resData);
            },
        });
    }
    const array = [1,2,3,4]
    // 直接提交数组
    function f4(){
    
    
        $.ajax({
    
    
            type : 'post',
            url : '/f4',
            data : {
    
    
                array:array
            },
            dataType: 'json',
            success : function(resData) {
    
    
                console.log("f4调用成功" + resData)
                alert("f4调用成功" + resData);
            },
        });
    }

    // Json格式化工具
    function JsonFormat(json) {
    
    
        if (typeof json != 'string') {
    
    
            json = JSON.stringify(json, undefined, 2);
        }
        json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
        return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
    
    
            var cls = 'number';
            if (/^"/.test(match)) {
    
    
                if (/:$/.test(match)) {
    
    
                    cls = 'key';
                } else {
    
    
                    cls = 'string';
                }
            } else if (/true|false/.test(match)) {
    
    
                cls = 'boolean';
            } else if (/null/.test(match)) {
    
    
                cls = 'null';
            }
            return '<span class="' + cls + '">' + match + '</span>';
        });
    }
</script>
<style>
    pre {
    
    outline: 1px solid #ccc; padding: 5px; margin: 5px; }
    .string {
    
     color: green; }
    .number {
    
     color: darkorange; }
    .boolean {
    
     color: blue; }
    .null {
    
     color: magenta; }
    .key {
    
     color: red; }
    .container{
    
    
        width: 1900px;
    }
</style>
</body>
</html>
后端
package net.javadog.requestdemo.controller;

import net.javadog.requestdemo.entity.Teacher;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;
import java.util.List;

/**
 * 请求管理
 *
 * @author hdx
 * @version V1.0
 * @date 2021年10月18日
 */
@Controller
public class RequestController {
   
   
    @GetMapping("/request")
    public String request(){
   
   
        return "request/index";
    }

    /**
     * @Description 实体嵌套List提交
     * @param teacher
     * @Return java.lang.String
     */
    @PostMapping("/f1")
    @ResponseBody
    public String f1(@RequestBody Teacher teacher){
   
   
        return teacher.toString();
    }

    /**
     * @Description 文件上传
     * @param file
     * @Return java.lang.String
     */
    @PostMapping("/f2")
    @ResponseBody
    public String f2(@RequestParam("file") MultipartFile file) {
   
   
        if (file.isEmpty()) {
   
   
            return "上传失败，请选择文件";
        }
        String fileName = file.getOriginalFilename();
        return fileName;
    }

    /**
     * @Description List实体上传
     * @param teachers
     * @Return java.lang.String
     */
    @PostMapping("/f3")
    @ResponseBody
    public String f3(@RequestBody List<Teacher> teachers) {
   
   
        return teachers.toString();
    }

    /**
     * @Description 数组上传
     * @param array
     * @Return java.lang.String
     */
    @PostMapping("/f4")
    @ResponseBody
    public int[] f4(@RequestParam(value = "array[]")int[] array) {
   
   
        return array;
    }
}
文章标签：
云解析DNS
Java
前端开发
数据可视化
开发者
关键词：
Spring Boot解析
springboot云解析DNS
胡东旭
目录
相关文章
Codelinghu
|
2月前
|
并行计算 Java 数据处理
SpringBoot高级并发实践：自定义线程池与@Async异步调用深度解析
SpringBoot高级并发实践：自定义线程池与@Async异步调用深度解析
Codelinghu
220 0
最好zzz
|
2月前
|
人工智能 自然语言处理 前端开发
SpringBoot + 通义千问 + 自定义React组件：支持EventStream数据解析的技术实践
【10月更文挑战第7天】在现代Web开发中，集成多种技术栈以实现复杂的功能需求已成为常态。本文将详细介绍如何使用SpringBoot作为后端框架，结合阿里巴巴的通义千问（一个强大的自然语言处理服务），并通过自定义React组件来支持服务器发送事件（SSE, Server-Sent Events）的EventStream数据解析。这一组合不仅能够实现高效的实时通信，还能利用AI技术提升用户体验。
最好zzz
223 2
wljslmz
|
22天前
|
前端开发 Java Maven
深入解析：如何用 Spring Boot 实现分页和排序
深入解析：如何用 Spring Boot 实现分页和排序
wljslmz
46 2
程序员小海绵
|
3月前
|
设计模式 Java 关系型数据库
【Java笔记+踩坑汇总】Java基础+JavaWeb+SSM+SpringBoot+SpringCloud+瑞吉外卖/谷粒商城/学成在线+设计模式+面试题汇总+性能调优/架构设计+源码解析
本文是“Java学习路线”专栏的导航文章，目标是为Java初学者和初中高级工程师提供一套完整的Java学习路线。
程序员小海绵
479 37
蓝易云
|
3月前
|
存储 缓存 Java
在Spring Boot中使用缓存的技术解析
通过利用Spring Boot中的缓存支持，开发者可以轻松地实现高效和可扩展的缓存策略，进而提升应用的性能和用户体验。Spring Boot的声明式缓存抽象和对多种缓存技术的支持，使得集成和使用缓存变得前所未有的简单。无论是在开发新应用还是优化现有应用，合理地使用缓存都是提高性能的有效手段。
蓝易云
47 1
Codelinghu
|
2月前
|
前端开发 JavaScript Java
【SpringBoot系列】视图解析器的搭建与开发
【SpringBoot系列】视图解析器的搭建与开发
Codelinghu
40 0
香吧香
|
5月前
|
Java Spring 容器
Spring Boot 启动源码解析结合Spring Bean生命周期分析
Spring Boot 启动源码解析结合Spring Bean生命周期分析
香吧香
112 11
Liuqz2009
|
4月前
|
XML Java 应用服务中间件
SpringBoot启动流程解析
SpringBoot启动流程解析
Liuqz2009
61 0
weixin_836869520
|
5月前
|
监控 安全 Java
解析Spring Boot中的Actuator端点
解析Spring Boot中的Actuator端点
weixin_836869520
145 0
众所周知
|
2月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能，快速搭建前后端分离的应用框架
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能，快速搭建前后端分离的应用框架。首先，确保开发环境已安装必要的工具，然后创建并配置 Spring Boot 项目，包括添加依赖和配置 Spring Security。接着，创建后端 API 和前端项目，配置动态路由和菜单。最后，运行项目并分享实践心得，包括版本兼容性、安全性、性能调优等方面。
众所周知
176 1

热门文章

最新文章

  • 1
    SpringBoot3整合SpringSecurity，实现自定义接口权限过滤（一）
  • 2
    全栈开发实战｜​人事管理系统的设计与实现（Spring Boot + Vue 3 + MyBatis）
  • 3
    定义全局异常处理器 | 带你读《SpringBoot实战教程》之十三
  • 4
    Spring Boot功能实战
  • 5
    springboot高级功能（三）自定义注解实现方式全解析
  • 6
    【Spring Boot 快速入门】十一、Spring Boot集成AutoGenerator代码生成器
  • 7
    Spring Secure在SpringBoot中的集成
  • 8
    记一次SpringBoot启动异常，jar问题的排查分析
  • 9
    SpringBoot 整合ApiBoot Logging 实现监控打印接口的请求日志
  • 10
    在idea中新建完springboot项目的时候遇到问题(右键没有class选择；控制台报错：Could not transfer artifact org.apache.tomcat.embed:tomcat-embed-core:jar:9.0.60 from/to central ....)
  • 1
    【Uniapp 专栏】Uniapp 的状态管理功能深度解析
    333
  • 2
    React Hooks实战：从useState到useContext深度解析
    106
  • 3
    销售利器大集结：13种智能销售工具全面解析
    311
  • 4
    【Uniapp 专栏】基于 Uniapp 的电商应用开发案例解析
    208
  • 5
    XML DOM 解析器
    60
  • 6
    构建高效AI系统：深度学习优化技术解析
    616
  • 7
    Java 8新特性之Lambda表达式与Stream API的深度解析
    102
  • 8
    深入解析Linux tee命令：从基础用法到高级场景的全面指南
    1344
  • 9
    PandasTA 源码解析（二十三）
    78
  • 10
    PandasTA 源码解析（二十二）（3）
    75

    • 相关课程

    更多
  • SpringBoot快速掌握 - 核心技术
  • SpringBoot快速掌握 - 高级应用
  • Springboot项目云开发快速迁移
  • Java面试疑难点解析 - 面试技巧及语言基础
  • Java面试疑难点解析 - Java Web开发
  • Java面试疑难点解析 - 系统架构及项目设计

    • 相关电子书

    更多
  • 神龙云服务器产品及技术深度解析
  • 弹性创造价值：基于ECS的最佳性价比实践解析
  • 又快又稳：阿里云下一代虚拟交换机解析

    • 相关实验场景

    更多
  • 通过云拨测对指定服务器进行Ping/DNS监测
  • 从零搭建Spring Boot的Hello World

    • 推荐镜像

    更多
  • DNS
  • NTP
  • wireshark
    • 下一篇
    阿里云oss存储简介和如何使用