文章目录

• 前言
• 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的类型传输）

     
     山西网页制作  房地产信息网官网  猎头公司招聘  备案域名注册  建筑公司网站首页  购买网站空间多少钱