首先确保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设置。
以上就是JS如何发送Ajax请求到Spring后端_JS发送Ajax请求到Spring后端的实现步骤的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1535424.html
微信扫一扫 
支付宝扫一扫 
