39.107.83.187:12346/articles get 请求 获取到json格式为{ "code": 0, "data": [ { "id": 1, "title": "Qt", "content": "Qt正文", "author_id": 0, "permission_type": 1, "is_approved": true } ] }的数据展示到界面上.完整html
时间: 2023-07-06 21:42:22 浏览: 95
html页面展示json数据并格式化的方法
好的,以下是一个完整的 HTML 文件,可以展示从 `http://39.107.83.187:12346/articles` 获取到的 JSON 数据:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>展示文章列表</title>
</head>
<body>
<div id="articles"></div>
<script>
let xhr = new XMLHttpRequest();
xhr.open('GET', 'http://39.107.83.187:12346/articles', true);
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
let response = JSON.parse(xhr.responseText);
let articles = response.data;
let html = '';
for (let i = 0; i < articles.length; i++) {
html += '<div>';
html += '<h2>' + articles[i].title + '</h2>';
html += '<p>' + articles[i].content + '</p>';
html += '</div>';
}
document.getElementById('articles').innerHTML = html;
}
}
</script>
</body>
</html>
```
这个 HTML 文件会在页面上展示一个文章列表,列表中包含从 `http://39.107.83.187:12346/articles` 获取到的 JSON 数据中的文章标题和内容。您只需要将这个文件保存为 `.html` 文件,然后在浏览器中打开即可。
阅读全文