JS获取Spring返回JSON数据方法

各位小伙伴们，大家好呀！看看今天我又给各位带来了什么文章？本文标题是《JS获取Spring返回JSON数据详解》，很明显是关于文章的文章哈哈哈，其中内容主要会涉及到等等，如果能帮到你，觉得很不错的话，欢迎各位多多点评和分享！

首先确保Spring后端使用@RestController或@ResponseBody返回JSON，前端用fetch或$.ajax发送请求并解析响应，注意处理CORS跨域配置，调试时检查Network面板确认数据正确返回。

在前后端分离的开发模式中，前端使用 JavaScript 发送请求，后端通过 Spring 框架返回 JSON 数据是常见做法。要成功获取 Spring 返回的 JSON 数据，关键在于正确发送请求并处理响应。以下是具体操作方法。

确保Spring后端正确返回JSON

Spring MVC 或 Spring Boot 中，控制器方法需使用 @ResponseBody 注解或直接使用 @RestController，以确保返回内容为 JSON 格式。

@RestController
public class DataController {
    @GetMapping("/api/user")
    public User getUser() {
        return new User("张三", 25);
    }
}

上述接口访问时会自动将 User 对象序列化为 JSON 并返回。

使用原生Fetch API获取JSON数据

现代浏览器推荐使用 fetch 发起请求。它基于 Promise，语法简洁，适合处理异步操作。

fetch('/api/user')
  .then(response => {
    if (!response.ok) {
      throw new Error('网络请求失败');
    }
    return response.json(); // 将响应体解析为JSON
  })
  .then(data => {
    console.log(data); // { name: "张三", age: 25 }
  })
  .catch(error => {
    console.error('请求出错:', error);
  });

注意：必须调用 response.json() 方法才能将原始响应转为 JavaScript 对象。

使用jQuery.ajax（传统方式）

如果项目中使用了 jQuery，可以通过 $.ajax 获取数据。

$.ajax({
  url: '/api/user',
  type: 'GET',
  dataType: 'json', // 声明期望返回的数据类型
  success: function(data) {
    console.log(data); // 自动解析后的JSON对象
  },
  error: function(xhr, status, error) {
    console.error('请求失败:', error);
  }
});

设置 dataType: 'json' 可让 jQuery 自动解析 JSON 字符串。

处理跨域问题（CORS）

若前端与后端不在同一域名下，需在 Spring 端配置 CORS 支持，否则浏览器会阻止请求。

@CrossOrigin(origins = "http://localhost:3000")
@GetMapping("/api/user")
public User getUser() {
    return new User("张三", 25);
}

或全局配置：

@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
                .allowedOrigins("http://localhost:3000")
                .allowedMethods("GET", "POST");
    }
}

基本上就这些。只要后端正确输出 JSON，前端合理发起请求并解析响应，就能顺利获取数据。调试时可打开浏览器开发者工具查看 Network 面板，确认请求是否成功、返回格式是否正确。不复杂但容易忽略细节。

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