返回的JSON字符串怎么显示在HTML
在现代Web开发中,前后端数据交互通常使用JSON格式，当我们从后端获取JSON数据后，如何在HTML页面中优雅地展示这些数据是一个常见的需求，本文将介绍几种将返回的JSON字符串显示在HTML页面中的方法。
直接显示原始JSON字符串
如果只是简单地将JSON字符串原样显示在页面上,可以使用<pre>标签来保留格式：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">JSON字符串显示</title>
<style>
pre {
background-color: #f5f5f5;
padding: 15px;
border-radius: 5px;
overflow-x: auto;
}
</style>
</head>
<body>
<h1>返回的JSON数据</h1>
<pre id="json-display"></pre>
<script>
// 模拟从后端获取的JSON字符串
const jsonString = '{"name":"张三","age":30,"city":"北京","hobbies":["阅读","旅行","摄影"]}';
// 直接显示JSON字符串
document.getElementById('json-display').textContent = jsonString;
</script>
</body>
</html>
将JSON字符串解析为对象并格式化显示
更常见的需求是将JSON数据解析为JavaScript对象,然后以更友好的方式展示：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">JSON数据格式化显示</title>
<style>
.json-container {
font-family: Arial, sans-serif;
line-height: 1.6;
}
.json-key {
font-weight: bold;
color: #0066cc;
}
.json-value {
color: #333;
}
.json-string {
color: #008000;
}
.json-number {
color: #ff6600;
}
.json-boolean {
color: #9900cc;
}
.json-null {
color: #999;
font-style: italic;
}
</style>
</head>
<body>
<h1>用户信息</h1>
<div id="user-info" class="json-container"></div>
<script>
// 模拟从后端获取的JSON字符串
const jsonString = '{"name":"张三","age":30,"city":"北京","hobbies":["阅读","旅行","摄影"],"isStudent":false,"score":null}';
// 解析JSON字符串
const userData = JSON.parse(jsonString);
// 格式化显示JSON数据
function displayJsonObject(obj, container) {
container.innerHTML = '';
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
const value = obj[key];
const keyElement = document.createElement('div');
keyElement.className = 'json-key';
keyElement.textContent = key + ': ';
const valueElement = document.createElement('span');
if (typeof value === 'object' && value !== null) {
if (Array.isArray(value)) {
valueElement.className = 'json-value';
valueElement.textContent = '[数组]';
const arrayContainer = document.createElement('div');
arrayContainer.style.marginLeft = '20px';
value.forEach(item => {
const itemElement = document.createElement('div');
itemElement.style.marginLeft = '20px';
if (typeof item === 'string') {
itemElement.className = 'json-string';
itemElement.textContent = `"${item}"`;
} else if (typeof item === 'number') {
itemElement.className = 'json-number';
itemElement.textContent = item;
} else if (typeof item === 'boolean') {
itemElement.className = 'json-boolean';
itemElement.textContent = item;
} else if (item === null) {
itemElement.className = 'json-null';
itemElement.textContent = 'null';
} else {
itemElement.textContent = '[复杂对象]';
}
arrayContainer.appendChild(itemElement);
});
valueElement.appendChild(arrayContainer);
} else {
valueElement.className = 'json-value';
valueElement.textContent = '[对象]';
const objectContainer = document.createElement('div');
objectContainer.style.marginLeft = '20px';
displayJsonObject(value, objectContainer);
valueElement.appendChild(objectContainer);
}
} else {
if (typeof value === 'string') {
valueElement.className = 'json-string';
valueElement.textContent = `"${value}"`;
} else if (typeof value === 'number') {
valueElement.className = 'json-number';
valueElement.textContent = value;
} else if (typeof value === 'boolean') {
valueElement.className = 'json-boolean';
valueElement.textContent = value;
} else if (value === null) {
valueElement.className = 'json-null';
valueElement.textContent = 'null';
}
}
const lineElement = document.createElement('div');
lineElement.appendChild(keyElement);
lineElement.appendChild(valueElement);
container.appendChild(lineElement);
}
}
}
displayJsonObject(userData, document.getElementById('user-info'));
</script>
</body>
</html>
使用表格显示结构化JSON数据
对于结构化的JSON数据,使用表格可能是更好的选择：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">JSON数据表格显示</title>
<style>
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
.array-content {
max-width: 300px;
word-wrap: break-word;
}
</style>
</head>
<body>
<h1>用户信息表格</h1>
<table id="json-table">
<thead>
<tr>
<th>属性</th>
<th>值</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
// 模拟从后端获取的JSON字符串
const jsonString = '{"name":"张三","age":30,"city":"北京","hobbies":["阅读","旅行","摄影"],"isStudent":false,"score":null}';
// 解析JSON字符串
const userData = JSON.parse(jsonString);
// 填充表格
const tableBody = document.querySelector('#json-table tbody');
for (const key in userData) {
if (userData.hasOwnProperty(key)) {
const value = userData[key];
const row = document.createElement('tr');
// 创建属性单元格
const keyCell = document.createElement('td');
keyCell.textContent = key;
row.appendChild(keyCell);
// 创建值单元格
const valueCell = document.createElement('td');
if (typeof value === 'object' && value !== null) {
if (Array.isArray(value)) {
valueCell.className = 'array-content';
valueCell.textContent = value.join(', ');
} else {
valueCell.textContent = '[对象]';
}
} else {
valueCell.textContent = value === null ? 'null' : value;
}
row.appendChild(valueCell);
tableBody.appendChild(row);
}
}
</script>
</body>
</html>
使用现成的JSON查看器库
如果需要更专业的JSON查看功能,可以考虑使用现成的库，如json-viewer：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">使用json-viewer显示JSON</title>
<!-- 引入json-viewer库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/json-viewer/1.4.0/json-viewer.min.css">
<style>
#json-container {
margin: 20px 0;
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>JSON数据查看器</h1>
<div id="json-container"></div>
<!-- 引入json-viewer库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/json-viewer/1.4.0/json-viewer.min.js"></script>
<script>
// 模拟从后端获取的JSON字符串
const jsonString = '{"name":"张三","age":30,"city":"北京","hobbies":["阅读","旅行","摄影"],"isStudent":false,"score":null,"address":{"street":"某某街道123号","district":"朝阳区"}}';
// 解析JSON字符串
const userData = JSON.parse(jsonString);
// 使用json-viewer显示
const json
还没有评论，来说两句吧...