前端参数传入后端，多种接收方式一文搞定

2023-01-11 08:41:50

前端参数接收：在后端顺利捕捉和处理数据

在前端开发中，将数据从前端传递到后端进行处理是不可避免的任务。本文将深入探讨如何接收前端传递的参数，并提供不同参数类型的具体示例代码。

简单参数

传递一个简单的值，如字符串或数字，是参数传递最基本的形式。前端通过request方法发送参数，后端使用getQueryParameters()方法获取。

代码示例：

// 前端
const data = 'Hello, World!';
const request = new Request('http://localhost:8080/hello', {
  method: 'GET',
  params: {
    data: data,
  },
});

// 后端
@RequestMapping("/hello")
public String hello(@RequestParam String data) {
  return "Hello, " + data + "!";
}

实体参数

实体参数是指复杂的数据类型，如对象或数组。前端使用JSON.stringify()方法转换实体参数，后端使用getReader()和JSON.parse()方法获取和解析。

代码示例：

// 前端
const data = {
  name: 'John Doe',
  age: 30,
};
const request = new Request('http://localhost:8080/user', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
});

// 后端
@RequestMapping("/user")
public User user(@RequestBody User user) {
  return user;
}

数组集合参数

数组集合参数是指数组或集合。前端直接通过request方法发送，后端使用getQueryParameters()和Arrays.asList()方法获取和转换。

代码示例：

// 前端
const data = ['Hello', 'World', '!'];
const request = new Request('http://localhost:8080/hello', {
  method: 'GET',
  params: {
    data: data,
  },
});

// 后端
@RequestMapping("/hello")
public String hello(@RequestParam String[] data) {
  return "Hello, " + String.join(", ", data) + "!";
}

日期参数

日期参数是指日期或时间。前端使用new Date()和toISOString()方法创建和转换，后端使用getQueryParameters()和Date.parse()方法获取和转换。

代码示例：

// 前端
const data = new Date();
const request = new Request('http://localhost:8080/date', {
  method: 'GET',
  params: {
    data: data.toISOString(),
  },
});

// 后端
@RequestMapping("/date")
public String date(@RequestParam Long data) {
  return "Date: " + new Date(data).toLocaleString();
}

JSON参数

JSON参数是指JSON对象。前端使用JSON.stringify()方法转换，后端使用getReader()和JSON.parse()方法获取和解析。

代码示例：

// 前端
const data = {
  name: 'John Doe',
  age: 30,
};
const request = new Request('http://localhost:8080/user', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
});

// 后端
@RequestMapping("/user")
public User user(@RequestBody User user) {
  return user;
}

路径参数

路径参数是指包含在请求路径中的数据。前端使用window.location.pathname获取，后端使用getPathInfo()和正则表达式提取。

代码示例：

// 前端
const path = window.location.pathname;

// 后端
@RequestMapping("/user/{id}")
public User user(@PathVariable Long id) {
  return userService.findById(id);
}

常见问题解答