上一篇
在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向后端接口发送请求，示例如下：
// 使用Fetch API发送GET请求
fetch('/api/userList')
.then(response => {
if (!response.ok) throw new Error('Network response was not ok');
return response.json(); // 解析JSON
})
.then(data => {
console.log(data); // 处理数据，如渲染表格
})
.catch(error => console.error('Error:', error));
解析与处理JSON
- 数据绑定：将JSON数据映射到视图（如填充表格、下拉框）。
- 异常处理：检查
response.status和data有效性，避免页面崩溃。 - 性能优化：对大数据量分页加载，减少一次性渲染压力。
后端生成JSON数据的关键步骤
控制器层处理请求
以Java Spring Boot为例：
@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")
);
}
}
相关问答FAQs
Q1: 如何确保前端接收的JSON数据安全性？
A1:
- 后端校验输入参数,防止SQL注入。
- 使用HTTPS加密传输,避免数据被改动。
- 前端对敏感数据（如密码）进行脱敏处理。
Q2: 前端如何处理大量JSON数据以避免卡顿？
A2:
- 虚拟列表：仅渲染可视区域的条目（如Vue的
v-virtual-scroll）。 - 分页加载：按需请求数据（如每次加载10条）。
- Web Workers：在后台线程处理复杂计算，避免阻塞主
