上一篇
html如何页面传递json数据
在HTML页面中传递JSON数据，通常涉及到前后端的交互，前端使用JavaScript处理JSON数据，后端则通过API接口提供数据，以下是详细的步骤和技术教学：
1. 了解JSON
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成，它基于JavaScript的一个子集，但是独立于语言，代码可以在多种环境中编写和读取。
2. 创建后端API
后端API负责提供数据，这些数据可以是数据库中的记录，也可以是其他形式的数据集合，API通常返回JSON格式的数据，因为这种格式通用且易于网络传输。
使用Node.js和Express框架创建一个简单的API：
const express = require('express');
const app = express();
const port = 3000;
app.get('/api/data', (req, res) => {
const data = {
name: "张三",
age: 30,
city: "北京"
};
res.json(data); // 发送JSON响应
});
app.listen(port, () => {
console.log(Server is running on http://localhost:${port});
});
3. 前端请求数据
在前端，你可以使用各种方法从后端API获取JSON数据，最常见的是使用fetch API或者XMLHttpRequest对象。
使用fetch API:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<title>Fetch JSON Data</title>
</head>
<body>
<div id="content"></div>
<script>
// 使用 fetch 从后端获取 JSON 数据
fetch('http://localhost:3000/api/data')
.then(response => response.json()) // 将响应转换为 JSON
.then(data => {
document.getElementById('content').innerHTML = `
<p>Name: ${data.name}</p>
<p>Age: ${data.age}</p>
<p>City: ${data.city}</p>
`;
})
.catch(error => console.error('Error:', error));
</script>
</body>
</html>
使用XMLHttpRequest:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<title>Get JSON Data</title>
</head>
<body>
<div id="content"></div>
<script>
var xhr = new XMLHttpRequest(); // 创建 XMLHttpRequest 对象
xhr.open('GET', 'http://localhost:3000/api/data', true); // 初始化请求
xhr.onreadystatechange = function () { // 设置回调函数
if (xhr.readyState == 4 && xhr.status == 200) {
var data = JSON.parse(xhr.responseText); // 解析 JSON 数据
document.getElementById('content').innerHTML = `
<p>Name: ${data.name}</p>
<p>Age: ${data.age}</p>
<p>City: ${data.city}</p>
`;
}
};
xhr.send(); // 发送请求
</script>
</body>
</html>
4. 安全注意事项
当从不同的源（域名、协议或端口）请求数据时，浏览器的同源策略通常会阻止你的请求，为了解决这个问题，后端必须设置适当的CORS（CrossOrigin Resource Sharing）策略。
5. 归纳
在HTML页面中传递JSON数据涉及到前后端的协作，后端提供一个API来输出JSON格式的数据，前端使用JavaScript通过fetch API或XMLHttpRequest对象来请求这些数据，并将其展示在页面上，在整个过程中，需要注意安全性和跨域问题。
本站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本站，有问题联系侵删！
本文链接：http://www.xixizhuji.com/fuzhu/297322.html
