SpringMvc 返回model对象如何通过js获取model对象所传的json？

在 Spring MVC 中，当后端控制器（Controller）使用 @ResponseBody 注解返回一个对象时，Spring MVC 会将该对象自动转换为 JSON 格式的数据。通过 JavaScript 可以很容易地获取和处理这些 JSON 数据。以下是详细的步骤和示例：

获取 Spring MVC 返回的 JSON 数据：

1. 后端 Java 代码： 假设有一个控制器方法返回一个包含数据的对象，并使用 @ResponseBody 注解将其转换为 JSON 格式返回给前端。

   java
   复制代码
   import org.springframework.stereotype.Controller;
   import org.springframework.web.bind.annotation.RequestMapping;
   import org.springframework.web.bind.annotation.ResponseBody;
   
   @Controller
   public class MyController {
       
       @RequestMapping("/getData")
       @ResponseBody
       public MyModel getData() {
           // 假设 MyModel 是一个包含数据的 Java 类
           MyModel model = new MyModel();
           model.setId(1);
           model.setName("John Doe");
           return model;
       }
   }
   

2. 前端 JavaScript 代码： 在前端，可以使用 AJAX 请求来获取这个 JSON 数据，并在页面上进行处理。

   javascript
   复制代码
   // 使用 XMLHttpRequest 或者 jQuery 的 AJAX 方法来发送请求
   var xhr = new XMLHttpRequest();
   xhr.open("GET", "/getData", true);
   xhr.setRequestHeader("Content-Type", "application/json");
   
   xhr.onreadystatechange = function () {
       if (xhr.readyState === 4 && xhr.status === 200) {
           var jsonData = JSON.parse(xhr.responseText);
           // jsonData 现在是一个 JavaScript 对象，包含从后端返回的 JSON 数据
           console.log("ID: " + jsonData.id + ", Name: " + jsonData.name);
           
           // 可以在这里对数据进行处理，例如更新页面的内容
           document.getElementById("idElement").textContent = jsonData.id;
           document.getElementById("nameElement").textContent = jsonData.name;
       }
   };
   
   xhr.send();
   

解释和关键步骤：

• 后端：

  • 控制器方法使用 @ResponseBody 注解，这告诉 Spring MVC 将返回值转换为 JSON 格式。
  • 返回的 MyModel 对象在经过 Spring MVC 处理后，被转换成类似 {"id":1,"name":"John Doe"} 的 JSON 字符串。

• 前端：

  • 使用 JavaScript 发送 AJAX 请求，请求后端的 /getData 接口。
  • 在 xhr.onreadystatechange 中处理响应，当状态为 4 且状态码为 200 时，表示请求成功。
  • 使用 JSON.parse(xhr.responseText) 将返回的 JSON 字符串解析为 JavaScript 对象 jsonData。
  • 可以根据需要处理 jsonData，例如更新页面上的 DOM 元素显示获取到的数据。

通过这种方式，前端 JavaScript 可以轻松获取和处理后端 Spring MVC 返回的 JSON 数据，实现动态更新和交互。