当前位置：首页 > 数据库 > 正文

mvc前台怎么接收json数据库

admin
数据库
2025-07-24
8

在Spring MVC中，前台通过AJAX或Fetch发送请求，后端用 @RequestBody解析JSON，再以 @ResponseBody返回数据，前端需设置 dataType: 'json'或调用 response.json()解析响应，确保Content-Type为 application/json

MVC架构中JSON数据流转流程

环节	功能描述	技术关键点
前端请求	用户操作触发事件（如点击按钮）	使用Ajax/Fetch发送HTTP请求，设置Content-Type: application/json
后端控制器	接收请求并调用业务逻辑	解析请求参数，调用Service层处理
业务逻辑层	处理数据并与数据库交互	执行SQL查询或调用ORM方法，将结果封装为对象
数据库	存储和查询数据	设计合理的表结构，优化查询语句
数据返回	将结果转换为JSON格式	后端序列化对象为JSON，设置response.setContentType("application/json")
前端处理	接收并解析JSON数据	处理异步回调，更新页面DOM

前端接收JSON数据的实现步骤

发送异步请求

前端通过Ajax或Fetch API向后端接口发送请求，示例如下：

mvc前台怎么接收json数据库第1张

解析与处理JSON

数据绑定：将JSON数据映射到视图（如填充表格、下拉框）。
异常处理：检查response.status和data有效性，避免页面崩溃。
性能优化：对大数据量分页加载，减少一次性渲染压力。

后端生成JSON数据的关键步骤

控制器层处理请求

以Java Spring Boot为例：

mvc前台怎么接收json数据库第2张

mvc前台怎么接收json数据库第3张

@RestController @RequestMapping("/api") public class UserController { @Autowired private UserService userService; @GetMapping("/userList") public ResponseEntity<List<User>> getUsers() { List<User> users = userService.getAllUsers(); return ResponseEntity.ok(users); // 自动序列化为JSON } }

服务层与数据库交互

public List<User> getAllUsers() { String sql = "SELECT FROM users"; return jdbcTemplate.query(sql, (rs, rowNum) -> new User(rs.getLong("id"), rs.getString("name"))); }

数据库设计

字段名	类型	说明
id	BIGINT	主键，自增ID
name	VARCHAR	用户名

常见问题与解决方案

跨域问题（CORS）

现象：浏览器阻止跨域请求，控制台报“Access-Control-Allow-Origin”错误。
解决：在后端添加CORS头： @CrossOrigin(origins = "") // Spring Boot示例

JSON数据格式不匹配

原因：前端预期字段与后端返回不一致。
解决：
- 后端使用@JsonInclude(JsonInclude.Include.NON_NULL)过滤空值。
- 前端定义数据映射规则（如data.forEach(item => obj.name = item.name || '默认值')）。

完整示例代码

前端（HTML + JavaScript）

<table id="userTable"> <thead> <tr><th>ID</th><th>Name</th></tr> </thead> <tbody></tbody> </table> <script> fetch('/api/userList') .then(response => response.json()) .then(users => { const tbody = document.getElementById('userTable').tbody; users.forEach(user => { const row = tbody.insertRow(); row.insertCell().textContent = user.id; row.insertCell().textContent = user.name; }); }); </script>

后端（Spring Boot）

// 实体类 public class User { private Long id; private String name; // Getters and Setters } // 控制器 @RestController public class UserController { @GetMapping("/api/userList") public List<User> getUsers() { return Arrays.asList( new User(1L, "Alice"), new User(2L, "Bob") ); } }