首页 > 文章 > 前端

JS调用SpringRESTfulAPI实战教程

时间：2025-11-07 11:22:46 170浏览收藏

大家好，我们又见面了啊~本文《JS与Spring RESTful API交互教程》的内容中将会涉及到等等。如果你正在学习文章相关知识，欢迎关注我，以后会给大家带来更多文章相关文章，希望我们能一起进步！下面就开始本文的正式内容~

JavaScript 与 Spring RESTful API 通信需通过 fetch 发送 HTTP 请求，Spring 使用 @RestController 提供接口并配置 @CrossOrigin 解决跨域；前端用 GET 获取数据、POST 提交 JSON 数据需设置请求头 Content-Type 并序列化，PUT 更新、DELETE 删除资源，确保请求方法、数据格式正确即可实现完整交互。

JS如何与SpringRESTfulAPI通信_JS与SpringRESTfulAPI通信的实现教程

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<user> 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;
    }
}
</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）

向后端提交新用户数据：

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 请求，就能实现完整通信。关键是处理好跨域、数据格式和请求方法。不复杂但容易忽略细节。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~

JS Http请求跨域 fetchAPI SpringRESTfulAPI