前台传JSON,后台怎么接收?一篇搞定前后端数据交互
在现代Web开发中,JSON(JavaScript Object Notation)已成为前后端数据交互的“通用语言”,它轻量、易读、易于机器解析,相比XML更简洁,相比纯文本结构更规范,但很多开发者,尤其是新手,常会遇到“前台明明传了JSON,后台为啥接收不到”的问题,本文从“前台如何正确传JSON”到“后台如何精准接收”,结合代码示例,彻底讲透这一核心流程。
前台传JSON:两种常见场景,两种传法
前台发送JSON数据,核心是明确“传什么”和“怎么传”,根据业务场景不同,主要分为表单数据提交和Ajax/Fetch请求发送两种,对应的请求方式(GET/POST)和Content-Type也不同。
场景1:表单提交(传统方式,简单数据)
如果只是简单的表单提交(如登录、注册),前台可以通过<form>标签的action(后台接口地址)和method(GET/POST)直接发送数据,但默认情况下,表单提交的数据格式是application/x-www-form-urlencoded(如name=张三&age=18),而非JSON,若需传JSON,需手动转换格式或使用FormData(但本质仍是键值对)。
示例:表单提交键值对,后台按JSON解析(不推荐,仅作对比)
<!-- 前台HTML --> <form action="/api/user/login" method="POST"> <input type="text" name="username" value="admin"> <input type="password" name="password" value="123456"> <button type="submit">登录</button> </form>
此时前台发送的数据是username=admin&password=123456,若后台强制按JSON解析,会接收不到数据(因为格式不匹配)。正确做法:前台用JSON.stringify手动转JSON,并设置Content-Type: application/json(但普通表单无法直接设置,需用Ajax)。
场景2:Ajax/Fetch请求(现代方式,推荐,支持复杂数据)
当前台需要传递对象、数组等复杂数据时,必须用Ajax(jQuery)或Fetch(原生JS)发送请求,并明确Content-Type为application/json,这是最规范的JSON传参方式。
示例1:jQuery Ajax发送JSON
// 前台JS
const data = {
username: "admin",
password: "123456",
roles: ["admin", "user"], // 数组数据
info: { age: 25, gender: "男" } // 嵌套对象
};
$.ajax({
url: "/api/user/login", // 后台接口
type: "POST", // 请求方法
contentType: "application/json", // 关键:告诉后台我传的是JSON
data: JSON.stringify(data), // 关键:将JS对象转为JSON字符串
success: function(response) {
console.log("后台返回:", response);
},
error: function(err) {
console.log("请求失败:", err);
}
});
关键点:
contentType: "application/json":必须设置,否则后台会按application/x-www-form-urlencoded解析,导致JSON数据解析失败。JSON.stringify(data):JS对象不能直接作为请求体发送,必须转为JSON字符串(如'{"username":"admin","password":"123456"}')。
示例2:原生Fetch API发送JSON
// 前台JS(现代浏览器支持)
const data = {
username: "admin",
password: "123456"
};
fetch("/api/user/login", {
method: "POST",
headers: {
"Content-Type": "application/json" // 关键:设置请求头
},
body: JSON.stringify(data) // 关键:请求体为JSON字符串
})
.then(response => response.json()) // 解析后台返回的JSON
.then(result => {
console.log("后台返回:", result);
})
.catch(error => {
console.log("请求失败:", error);
});
Fetch是现代Web API,语法更简洁,核心同样是Content-Type和JSON.stringify。
后台接收JSON:不同语言/框架,不同处理方式
后台接收JSON数据,核心是两步:① 解析请求体(获取JSON字符串);② 将JSON字符串转为对应语言的对象/字典,不同后端技术栈(Java、Python、Node.js、PHP等)实现方式不同,但逻辑一致。
Java后端(Spring Boot框架,最常用)
Spring Boot通过@RequestBody注解自动解析请求体中的JSON数据,并转为Java对象,需提前定义好与JSON结构对应的实体类。
示例:Spring Boot接收JSON
// 1. 定义实体类(与前台JSON结构对应)
@Data // Lombok注解,自动生成getter/setter
public class LoginRequest {
private String username;
private String password;
private List<String> roles;
private Map<String, Object> info;
}
// 2. Controller层接收数据
@RestController
@RequestMapping("/api/user")
public class UserController {
@PostMapping("/login")
public String login(@RequestBody LoginRequest loginRequest) { // 关键:@RequestBody注解
System.out.println("接收到的用户名: " + loginRequest.getUsername());
System.out.println("接收到的密码: " + loginRequest.getPassword());
System.out.println("接收到的角色列表: " + loginRequest.getRoles());
System.out.println("接收到的附加信息: " + loginRequest.getInfo());
// 业务逻辑:验证用户名密码...
return "{\"code\": 200, \"message\": \"登录成功\"}";
}
}
关键点:
@RequestBody:Spring Boot会通过Jackson库(默认)将请求体中的JSON字符串自动转为LoginRequest对象。- 实体类属性名必须与JSON的key一致(如JSON的
"username"对应实体类的username),否则无法映射(可通过@JsonProperty("json_key")注解解决属性名不一致问题)。 - 需引入依赖:
spring-boot-starter-web(已包含Jackson)。
Python后端(Flask框架)
Flask通过request.get_json()方法解析请求体中的JSON数据,返回Python字典。
示例:Flask接收JSON
# 1. 安装依赖:pip install flask
from flask import Flask, request, jsonify
app = Flask(__name__)
@app.route('/api/user/login', methods=['POST'])
def login():
# 关键:request.get_json()解析JSON,返回字典
data = request.get_json()
if not data:
return jsonify({"code": 400, "message": "请求体不是JSON格式"}), 400
username = data.get('username')
password = data.get('password')
roles = data.get('roles', []) # 默认空列表
info = data.get('info', {}) # 默认空字典
print(f"用户名: {username}, 密码: {password}")
print(f"角色列表: {roles}, 附加信息: {info}")
return jsonify({"code": 200, "message": "登录成功"})
if __name__ == '__main__':
app.run(debug=True)
关键点:
request.get_json():自动解析Content-Type: application/json的请求体,无需手动处理。- 若请求体不是JSON或解析失败,返回
None,需做非空判断。
Node.js后端(Express框架)
Express通过中间件express.json()解析JSON请求体,解析后数据挂载在req.body上。
示例:Express接收JSON
// 1. 安装依赖:npm install express
const express = require('express');
const app = express();
// 关键:使用express.json()中间件解析JSON请求体
app.use(express.json());
app.post('/api/user/login', (req, res) => {
// 解析后的JSON数据在req.body中
const { username, password, roles, info } = req.body;
console.log("用户名:", username);
console.log("密码:", password);
console.log("角色列表:", roles);
console.log("附加信息:", info);
if (!username || !password) {
return res.status(400).json({ code: 400, message: "用户名和密码不能为空" });
}
res.json({ code: 200, message: "登录成功" });
});
app.listen(3000, () => {
console.log('服务启动在 http://localhost:3000');
});
关键点:
app.use(express.json()):必须使用中间件,否则req.body为undefined。- 解析后的数据直接通过`req



还没有评论,来说两句吧...