前端JS怎样调用SpringMVC接口_前端JS调用SpringMVC接口的详细教程

前端调用SpringMVC接口需通过HTTP请求实现。1. 后端使用@ResponseBody和@CrossOrigin注解返回JSON并支持跨域；2. 前端用fetch或jQuery.ajax发送请求，正确设置method、headers和body；3. 跨域问题由后端CORS配置解决；4. POST传参需设置Content-Type为application/json并序列化数据。

前端 JavaScript 调用 SpringMVC 接口，本质是通过 HTTP 请求与后端进行数据交互。SpringMVC 作为服务端框架，负责接收请求、处理业务并返回 JSON 数据；前端 JS 则使用浏览器提供的方法发送请求并处理响应。下面详细介绍实现步骤和注意事项。

1. 确保后端接口支持跨域和返回 JSON

在调用之前，先确认你的 SpringMVC 接口能被前端访问：

• 使用 @ResponseBody 注解让方法直接返回 JSON 数据
• 控制器类或方法上添加 @CrossOrigin 支持跨域（开发阶段常用）
• 确保返回对象是 Java Bean 或 Map，Spring 会自动转为 JSON（需引入 Jackson 依赖）

@Controller
public class UserController {

    @ResponseBody
    @CrossOrigin
    @RequestMapping(value = "/api/user", method = RequestMethod.GET)
    public Map getUser() {
        Map user = new HashMap<>();
        user.put("id", 1);
        user.put("name", "张三");
        return user;
    }
}

2. 前端使用原生 fetch 调用接口

现代浏览器推荐使用 fetch 发送请求，语法简洁且基于 Promise。

注意：如果前后端不在同一域名或端口，会涉及跨域问题，需后端配置 CORS 或开发时使用代理。

立即学习“前端免费学习笔记（深入）”；

知料万语

知料万语—AI论文写作，AI论文助手

下载

3. 使用 jQuery 的 ajax 方法（传统方式）

如果你项目中用了 jQuery，可以用 $.ajax 更方便地发起请求。

$.ajax({
  url: 'http://localhost:8080/api/user',
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    console.log('获取到用户:', data);
  },
  error: function() {
    alert('请求出错');
  }
});

确保引入了 jQuery 库文件，否则该方法无效。

4. 处理 POST 请求传参

如果是提交数据，需要设置请求体和 Content-Type。

fetch('http://localhost:8080/api/user', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: '李四', age: 25 })
})
.then(response => response.json())
.then(result => {
  console.log('保存成功:', result);
});

@ResponseBody
@CrossOrigin
@RequestMapping(value = "/api/user", method = RequestMethod.POST)
public Map saveUser(@RequestBody Map userData) {
    System.out.println("收到数据: " + userData);
    Map result = new HashMap<>();
    result.put("status", "success");
    return result;
}

基本上就这些。只要后端开放了接口并支持跨域，前端就能用 JS 正常调用。关键是理解请求方式、数据格式和跨域机制。不复杂但容易忽略细节。