前端到后端的数组传输三种高效方法

var names = ["Alice", "Bob"];
$.ajax({
  type: "POST",
  url: "/api/users",
  data: { names: names },
  success: function(response) {
    console.log("数据提交成功");
  },
  error: function(error) {
    console.error("数据提交失败");
  }
});

@PostMapping("/api/users")
public ResponseEntity<String> handleUsers(@RequestParam("names") String[] names) {
  // 处理逻辑
  return ResponseEntity.ok("处理完成");
}

var items = [{id: 1, name: "Item 1"}, {id: 2, name: "Item 2"}];
var jsonData = JSON.stringify(items);
fetch('/api/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: jsonData
})
.then(response => response.text())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

@PostMapping(value = "/api/data", consumes = MediaType.APPLICATION_JSON_VALUE)
public ResponseEntity<String> handleJsonData(@RequestBody List<Item> itemList) {
  // 处理逻辑
  return ResponseEntity.ok("处理完成");
}
// Item类定义略

var formData = new FormData();
var files = document.getElementById('fileInput').files;
for (var i = 0; i < files.length; i++) {
  formData.append('files[]', files[i]);
}
var data = ["data1", "data2"];
data.forEach((item, index) => formData.append('data[]', item));

fetch('/api/upload', {
  method: 'POST',
  body: formData
}).then(response => response.text())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));