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

mvc前台怎么接收json数据库

admin
数据库
2025-07-24
5

在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张

// 使用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")
        );
    }
}