由前端向后端发送一个json键值对
<template>
<div>
<button @click="sendRequest">发送请求</button>
</div>
</template>
<script setup>
import axios from 'axios';
const sendRequest = () => {
const jsonData = {
key1: 'value1',
key2: 'value2',
};
const jsonString = JSON.stringify(jsonData);
axios.post('http://localhost:8080/test', jsonString, {
headers: {
'Content-Type': 'application/json',
},
})
.then(response => {
console.log('成功发送请求', response);
})
.catch(error => {
console.error('发送请求失败', error);
});
};
</script>
package com.example.myjson;
import org.springframework.web.bind.annotation.*;
@CrossOrigin
@RestController
public class JSONController {
@PostMapping("/test")
public String handleJSONRequest(@RequestBody String jsonString) {
System.out.println("接收到的JSON字符串:" + jsonString);
return "成功接收到JSON请求";
}
}
发送一个由前端json包装过的类对象
<template>
<div>
<button @click="sendTaskInfo">发送TaskInfo</button>
</div>
</template>
<script setup>
import axios from 'axios';
const sendTaskInfo = () => {
const taskInfo = {
id: 1,
task: '完成项目任务',
startTime: new Date(),
endTime: new Date(),
elapsedTime: 3600,
};
const jsonTaskInfo = JSON.stringify(taskInfo);
axios.post('http://localhost:8080/test', jsonTaskInfo, {
headers: {
'Content-Type': 'application/json',
},
})
.then(response => {
console.log('成功发送 TaskInfo', response);
})
.catch(error => {
console.error('发送 TaskInfo 失败', error);
});
};
</script>
public class TaskInfo {
private int id;
private String task;
private Date startTime;
private Date endTime;
private long elapsedTime;
}
@PostMapping("/test")
public ResponseEntity<String> handleJSONRequest(@RequestBody TaskInfo taskInfoJson) {
System.out.println("接收到的 TaskInfo 对象:" + taskInfoJson);
return new ResponseEntity<>("成功接收到 TaskInfo 对象", HttpStatus.OK);
}