前端调用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<String, Object> getUser() {
Map<String, Object> user = new HashMap<>();
user.put("id", 1);
user.put("name", "张三");
return user;
}
}
2. 前端使用原生 fetch 调用接口
现代浏览器推荐使用 fetch 发送请求，语法简洁且基于 Promise。
示例前端代码（HTML + JS）：
<script>
fetch('http://localhost:8080/api/user')
.then(response => response.json())
.then(data => {
console.log('用户信息:', data);
alert('姓名：' + data.name);
})
.catch(error => {
console.error('请求失败:', error);
});
</script>
注意：如果前后端不在同一域名或端口，会涉及跨域问题，需后端配置 CORS 或开发时使用代理。
立即学习“前端免费学习笔记（深入）”；
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<String, Object> saveUser(@RequestBody Map<String, Object> userData) {
System.out.println("收到数据: " + userData);
Map<String, Object> result = new HashMap<>();
result.put("status", "success");
return result;
}
基本上就这些。只要后端开放了接口并支持跨域，前端就能用 JS 正常调用。关键是理解请求方式、数据格式和跨域机制。不复杂但容易忽略细节。
