在Web开发中，HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言，而JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成，在实际应用中，我们经常需要在HTML页面之间传递JSON数据，本文将详细介绍如何在HTML页面间传递JSON数据。
1、使用表单提交
在HTML页面中，我们可以使用表单（form）来收集用户输入的数据，当用户提交表单时，数据会被发送到服务器，为了传递JSON数据，我们可以将表单中的数据序列化为JSON格式，并通过隐藏的输入字段（input）将JSON字符串传递给服务器，在服务器端，我们可以使用相应的后端语言（如PHP、Python、Node.js等）解析JSON字符串，并根据需要处理数据。
示例代码：
HTML页面：
<form id="json-form">
<input type="hidden" id="json-data" name="jsonData">
<button type="button" onclick="submitJson()">提交JSON</button>
</form>
<script>
function submitJson() {
const jsonData = JSON.stringify({ name: "张三", age: 25 });
document.getElementById("json-data").value = jsonData;
document.getElementById("json-form").submit();
}
</script>
服务器端（PHP示例）：
<?php $jsonData = $_POST['jsonData']; $data = json_decode($jsonData, true); echo "姓名：" . $data['name'] . "，年龄：" . $data['age']; ?>
2、使用AJAX请求
AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下，与服务器交换数据并更新部分Web页面的技术，通过AJAX，我们可以在客户端（浏览器）与服务器之间发送JSON数据，而不需要提交表单，这种方式可以提高用户体验，因为它允许我们在不刷新页面的情况下更新页面内容。
示例代码：
HTML页面：
<button onclick="sendJson()">发送JSON</button>
<script>
function sendJson() {
const jsonData = { name: "张三", age: 25 };
// 创建AJAX请求
const xhr = new XMLHttpRequest();
xhr.open("POST", "server.php", true);
// 设置请求头，发送JSON数据
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify(jsonData));
}
</script>
服务器端（PHP示例）：
<?php
$jsonData = file_get_contents("php://input");
$data = json_decode($jsonData, true);
echo "姓名：" . $data['name'] . "，年龄：" . $data['age'];
?>
3、使用WebSocket
WebSocket是一种在单个TCP连接上进行全双工通信的协议，通过WebSocket，我们可以在客户端和服务器之间建立一个持久的连接，实时地发送和接收数据，这种方式适用于需要实时交互的场景，如在线聊天、游戏等。
示例代码：
HTML页面：
<script>
const socket = new WebSocket("ws://localhost:8080");
socket.onopen = function(event) {
const jsonData = { name: "张三", age: 25 };
socket.send(JSON.stringify(jsonData));
};
socket.onmessage = function(event) {
const data = JSON.parse(event.data);
console.log("收到服务器响应：", data);
};
</script>
服务器端（Node.js示例）：
const WebSocket = require("ws");
const wss = new WebSocket.Server({ port: 8080 });
wss.on("connection", function connection(ws) {
ws.on("message", function incoming(message) {
const data = JSON.parse(message);
console.log("收到客户端数据：", data);
ws.send(JSON.stringify(data));
});
});
本文介绍了三种在HTML页面间传递JSON数据的方法：使用表单提交、使用AJAX请求和使用WebSocket，这些方法各有优缺点，可以根据实际需求和场景选择合适的方式，在实际开发中，我们还需要考虑安全性、性能和兼容性等因素，以确保Web应用的稳定运行。