JavaScript 与 Spring RESTful API 通信需通过 fetch 发送 HTTP 请求，Spring 使用 @RestController 提供接口并配置 @CrossOrigin 解决跨域；前端用 GET 获取数据、POST 提交 JSON 数据需设置请求头 Content-Type 并序列化，PUT 更新、DELETE 删除资源，确保请求方法、数据格式正确即可实现完整交互。
JavaScript 与 Spring RESTful API 通信，主要是通过浏览器的 fetch API 或 AJAX 请求向后端暴露的 REST 接口发送 HTTP 请求（如 GET、POST、PUT、DELETE 等），Spring Boot 后端接收请求并返回 JSON 数据。下面一步步说明如何实现前后端通信。
1. 确保 Spring 提供 RESTful 接口
在 Spring Boot 中，使用 @RestController 注解创建一个控制器，对外提供 JSON 格式的接口。
@RestController@CrossOrigin(origins = "http://localhost:3000") // 允许前端域名访问（解决跨域）public class UserController { @GetMapping("/api/users") public List getUsers() { return Arrays.asList( new User(1, "Alice"), new User(2, "Bob") ); } @PostMapping("/api/users") public User createUser(@RequestBody User user) { user.setId(99); // 模拟保存 return user; }}
注意： 必须添加 @CrossOrigin 或配置全局 CORS，否则浏览器会因同源策略拒绝请求。
2. 前端 JS 发送请求获取数据（GET）
使用 fetch() 从 Spring 接口获取用户列表：
fetch('http://localhost:8080/api/users') .then(response => response.json()) .then(data => { console.log('用户列表:', data); // 可在此渲染到页面 }) .catch(error => console.error('请求失败:', error));
3. 前端提交数据到 Spring（POST）
向后端提交新用户数据：
零一万物开放平台
零一万物大模型开放平台
36 查看详情
const userData = { name: "Charlie" };fetch('http://localhost:8080/api/users', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(userData)}).then(response => response.json()).then(result => { console.log('创建成功:', result);}).catch(error => console.error('提交失败:', error));
关键点： 设置 Content-Type: application/json，并用 JSON.stringify 序列化数据。
4. 处理 PUT 和 DELETE 请求
修改用户信息（PUT）：
fetch('http://localhost:8080/api/users/1', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: "Alice Smith" })}).then(res => res.json()).then(data => console.log('更新成功:', data));
删除用户（DELETE）：
fetch('http://localhost:8080/api/users/1', { method: 'DELETE'}).then(() => console.log('用户已删除'));
基本上就这些。只要 Spring 正确暴露 REST 接口，JS 使用 fetch 发送标准 HTTP 请求，就能实现完整通信。关键是处理好跨域、数据格式和请求方法。不复杂但容易忽略细节。
以上就是JS如何与SpringRESTfulAPI通信_JS与SpringRESTfulAPI通信的实现教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/868965.html
微信扫一扫 
支付宝扫一扫 
