在现代Web开发中，JSON（JavaScript Object Notation）已成为前后端数据交互的主要格式，它是一种轻量级的数据交换格式，易于阅读和编写，本文将详细介绍前后端如何实现JSON数据交互。
前后端分离的架构
在前后端分离的架构中，前端主要负责用户界面的展示和交互，后端则负责数据处理和业务逻辑，前后端通过HTTP协议进行通信，使用JSON作为数据交换的格式。
前端发送请求
1、使用XMLHttpRequest对象
在早期的前端开发中，我们可以使用XMLHttpRequest对象来发送HTTP请求，通过创建一个实例，设置请求方法、URL、请求头等信息，然后发送请求，在请求成功后，可以通过onreadystatechange事件处理函数来处理服务器返回的JSON数据。
示例代码：
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
console.log(data);
}
};
xhr.send();
2、使用Fetch API
Fetch API是现代浏览器提供的一种新的网络请求方式，它返回一个Promise对象，使得异步操作更加简洁，使用Fetch API发送请求并处理JSON数据的示例代码如下：
fetch('/api/data')
.then(response => {
if (response.ok) {
return response.json();
}
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Network response was not ok', error);
});
后端处理请求
1、创建API接口
后端需要创建API接口来处理前端发送的请求，通常，我们会使用RESTful API设计原则来组织接口，我们可以使用GET请求来获取数据，POST请求来创建新数据，PUT请求来更新数据，DELETE请求来删除数据。
2、处理请求方法
后端需要根据请求方法来执行相应的操作，对于GET请求，后端需要查询数据库并返回JSON数据；对于POST请求，后端需要接收前端发送的数据并将其保存到数据库中。
3、设置响应头
后端在返回数据时，需要设置响应头Content-Type为application/json，以告诉前端返回的数据是JSON格式。
4、返回JSON数据
后端将处理后的数据转换为JSON字符串，并将其作为响应体返回给前端，在Node.js中，可以使用JSON.stringify()方法将JavaScript对象转换为JSON字符串。
示例代码：
const express = require('express');
const app = express();
app.get('/api/data', (req, res) => {
const data = {
id: 1,
name: 'John Doe',
age: 30
};
res.setHeader('Content-Type', 'application/json');
res.send(JSON.stringify(data));
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
通过以上介绍，我们可以看到前后端实现JSON数据交互的过程相对简单，在前后端分离的架构中，前端通过HTTP请求与后端API接口进行通信，使用JSON作为数据交换的格式，前端发送请求时，需要设置请求头Content-Type为application/json；后端处理请求时，需要设置响应头Content-Type为application/json，并返回JSON数据，这样，前后端就可以顺利地进行数据交互了。