前端传输数组类型到后端(附代码)
创始人
2025-01-16 14:34:55
0

文章目录

  • 前言
  • 1. 问题所示
  • 2. 普通数组
  • 3. JSON格式
  • 4. 彩蛋

前言

通过问题Bug指引代码实战,结合实战问题,相应查漏补缺

1. 问题所示

前端传输数组给后端的时候,出现如下问题:

前端log请求如下:
在这里插入图片描述

且请求后端你的时候出现了服务器500error:

在这里插入图片描述

2. 普通数组

如果不使用 JSON 格式传输数据,而是使用普通的数组,可以考虑通过 POST 请求的 body 直接传输数组的形式

  • 前端,可以将数组直接作为请求的 body
  • 后端,可以直接接收请求的 body 作为数组进行处理

前端数据:

   

后端代码:

import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RestController;  @SpringBootApplication @RestController public class BackendApplication {      public static void main(String[] args) {         SpringApplication.run(BackendApplication.class, args);     }      @PostMapping("/processArray")     public String processArray(@RequestBody String[] array) {         // 处理收到的数组         for (String element : array) {             System.out.println(element);         }         return "Array processed successfully";     } } 

在这个示例中,前端使用 array.join(',') 将数组转换成逗号分隔的字符串,然后作为请求的 body 直接发送到后端的 /processArray 接口。后端接收到字符串后,根据逗号分隔拆分成数组进行处理

3. JSON格式

前端通过点击按钮触发sendArrayToBackend方法,该方法使用Fetch API将数组发送到后端的/processArray接口。后端接收到数组后进行处理,并返回响应。

前端代码:

   

后端代码:

import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RestController;  @SpringBootApplication @RestController public class BackendApplication {      public static void main(String[] args) {         SpringApplication.run(BackendApplication.class, args);     }      @PostMapping("/processArray")     public String processArray(@RequestBody String[] array) {         // 处理收到的数组         for (String element : array) {             System.out.println(element);         }         return "Array processed successfully";     } } 

如果是python代码,也大同小异:

from flask import Flask, request, jsonify  app = Flask(__name__)  @app.route('/receiveArray', methods=['POST']) def receive_array():     received_array = request.json # 这里假设前端发送的是 JSON 数组     print(received_array) # 在后端打印接收到的数组      # 进行后续处理      return 'Array received successfully'  if __name__ == '__main__':     app.run(debug=True) 

4. 彩蛋

前端传输的有些普通数组,在前端传输过程中,对应的接口可以以toString格式传输给后端:
在这里插入图片描述

后端通过@RequestParam的注解接收

在这里插入图片描述

如果以JSON格式传输,则后端接口以@Requsetbody的注解接收
(除了上面的前端使用JSON.stringify()方法,也可在前端以JSONArray格式传输,后端以JSONArray的类型传输)

相关内容

热门资讯

专业讨论!德扑之星真破解套路(... 专业讨论!德扑之星真破解套路(辅助挂)软件透明挂(有挂了解)-哔哩哔哩;人气非常高,ai更新快且高清...
每日必看!智星德州菠萝外挂检测... 每日必看!智星德州菠萝外挂检测(辅助挂)软件透明挂(有挂教学)-哔哩哔哩1、玩家可以在智星德州菠萝外...
透视透明挂!轰趴十三水有后台(... 轰趴十三水有后台赢率提升策略‌;透视透明挂!轰趴十三水有后台(辅助挂)软件透明挂(有挂详情)-哔哩哔...
发现玩家!德扑ai助手软件(辅... 发现玩家!德扑ai助手软件(辅助挂)透视辅助(有挂教学)-哔哩哔哩;玩家在德扑ai助手软件中需先进行...
一分钟了解!x-poker辅助... 一分钟了解!x-poker辅助软件(辅助挂)辅助透视(有挂攻略)-哔哩哔哩1、每一步都需要思考,不同...
一分钟揭秘!德州最新辅助器(辅... 一分钟揭秘!德州最新辅助器(辅助挂)透视辅助(有挂攻略)-哔哩哔哩;德州最新辅助器最新版本免费下载安...
玩家攻略推荐!德州辅助(辅助挂... 玩家攻略推荐!德州辅助(辅助挂)辅助透视(有挂了解)-哔哩哔哩是由北京得德州辅助黑科技有限公司精心研...
揭秘真相!pokernow德州... 《揭秘真相!pokernow德州(辅助挂)辅助透视(有挂介绍)-哔哩哔哩》 pokernow德州软件...
五分钟了解!德州之星辅助器(辅... 五分钟了解!德州之星辅助器(辅助挂)辅助透视(有挂透明)-哔哩哔哩1、很好的工具软件,可以解锁游戏的...
推荐一款!pokermaste... 1、推荐一款!pokermaster有外挂(辅助挂)透视辅助(有挂教学)-哔哩哔哩;详细教程。2、p...