JS如何发送Ajax请求到Spring后端_JS发送Ajax请求到Spring后端的实现步骤

首先确保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<String> receiveData(@RequestBody String payload) {
        System.out.println("收到数据：" + payload);
        return ResponseEntity.ok("数据已接收");
    }
}

该接口监听 /api/submit 路径，接收JSON格式的请求体数据。

2. 前端使用原生JS发送Ajax请求

可以使用浏览器原生的 fetch API 或 XMLHttpRequest 发送请求。推荐使用 fetch，语法更简洁。

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端允许跨域请求。

魔搭MCP广场

聚合优质MCP资源，拓展模型智能边界

96

查看详情

在控制器类上添加 @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设置。

以上就是JS如何发送Ajax请求到Spring后端_JS发送Ajax请求到Spring后端的实现步骤的详细内容，更多请关注php中文网其它相关文章！