前端JS怎样调用SpringMVC接口_前端JS调用SpringMVC接口的详细教程-js教程-PHP中文网

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

雪夜

发布： 2025-11-02 19:43:02

原创

481人浏览过

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

前端js怎样调用springmvc接口_前端js调用springmvc接口的详细教程

前端 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 或开发时使用代理。

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

牛小影

牛小影 - 专业的AI视频画质增强器

420

查看详情

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 正常调用。关键是理解请求方式、数据格式和跨域机制。不复杂但容易忽略细节。

以上就是前端JS怎样调用SpringMVC接口_前端JS调用SpringMVC接口的详细教程的详细内容，更多请关注php中文网其它相关文章！