首先确保Spring后端接口与前端请求的URL、方法、数据格式匹配，使用@RestController和@PostMapping创建接口，通过fetch发送携带JSON数据的POST请求，设置正确请求头，若跨域需添加@CrossOrigin注解，最后通过开发者工具验证请求响应是否成功。
前端通过JS发送Ajax请求与Spring后端交互，是Web开发中的常见操作。实现这一过程的关键在于正确配置前端请求和后端接口的匹配，包括URL、请求方法、数据格式和跨域处理等。以下是具体实现步骤。
1. 编写Spring后端接口
确保Spring Boot项目中已启用Web支持，并创建一个能接收HTTP请求的控制器。
示例代码：使用 @RestController 注解定义一个接口类，提供一个接收POST请求的接口：
@RestController
@RequestMapping("/api")
public class DataController {
@PostMapping("/submit")
public ResponseEntity receiveData(@RequestBody String payload) {
System.out.println("收到数据：" + payload);
return ResponseEntity.ok("数据已接收");
}
}
该接口监听 /api/submit 路径，接收JSON格式的请求体数据。
2. 前端使用原生JS发送Ajax请求
可以使用浏览器原生的 fetch API 或 XMLHttpRequest 发送请求。推荐使用 fetch，语法更简洁。
示例：使用 fetch 发送 POST 请求
const data = { name: "张三", age: 25 };
fetch('/api/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(response => response.text())
.then(result => {
console.log('后端返回：', result);
})
.catch(error => {
console.error('请求出错：', error);
});
注意设置 Content-Type 为 application/json，确保Spring能正确解析JSON数据。
3. 处理跨域问题（CORS）
如果前端和后端运行在不同端口（如前端3000，后端8080），会遇到跨域限制。需在Spring端允许跨域请求。
解决方法：在控制器类上添加 @CrossOrigin 注解：
@CrossOrigin(origins = "http://localhost:3000")
@RestController
@RequestMapping("/api")
public class DataController { ... }
或在配置类中全局开启CORS支持。
4. 验证请求与响应
打开浏览器开发者工具，在 Network 标签页查看请求是否成功发送，检查：
- 请求URL是否正确
- 请求方法是否为POST
- 请求头是否包含 Content-Type: application/json
- 请求体是否为合法JSON字符串
- 后端返回状态码是否为200
同时观察后端控制台输出，确认数据已接收到。
基本上就这些。只要前后端协议一致，路径正确，数据格式匹配，Ajax请求就能顺利通信。不复杂但容易忽略细节，比如JSON序列化和CORS设置。
