HTML如何获取JSON数据库数据：从入门到实践
在现代Web开发中，HTML负责页面的结构和内容展示，而JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，因其易于人阅读和编写，也易于机器解析和生成，成为了前后端数据交互的绝对主流，作为前端基础的HTML,究竟是如何从后端的JSON数据库中获取数据的呢？
核心答案是：HTML本身并不能直接“拿取”JSON数据库的数据。 HTML是一个标记语言，它负责定义网页的结构，不具备逻辑处理、网络请求或数据操作的能力。
真正完成这项工作的“功臣”是运行在浏览器中的 JavaScript，JavaScript可以发起网络请求，接收服务器返回的JSON数据,然后将数据动态地渲染到HTML页面中。
下面，我们将详细拆解这个过程，从基本原理到具体代码实践，让你彻底搞懂HTML如何“间接”获取JSON数据库的数据。
核心概念：前后端分离与API
在开始之前,我们需要理解两个核心概念：
-
前后端分离：这是现代Web应用开发的常见模式。
- 前端：由HTML、CSS和JavaScript构成，负责用户界面（UI）的展示和用户交互,它运行在用户的浏览器里。
- 后端：负责业务逻辑、数据处理和数据库操作,它运行在服务器上。
-
API (Application Programming Interface)：可以理解为前后端之间的“信使”或“桥梁”，后端会暴露一些API接口（通常是一个URL），前端通过向这些URL发送请求，来获取或提交数据，当后端从数据库中查询到数据后，会将其格式化为JSON字符串,通过API响应返回给前端。
整个流程是：HTML (页面) → JavaScript (发起请求) → API (后端接口) → 数据库 → 后端处理 → JSON格式响应 → JavaScript (接收并处理) → 动态渲染到HTML。
实现方式一：原生XMLHttpRequest (老派但经典)
这是早期JavaScript进行异步网络请求的方式，虽然现在有了更现代的替代方案,但理解它有助于你网络请求的本质。
场景： 我们有一个后端API https://api.example.com/users,它返回一个用户列表的JSON数据。
步骤：
-
创建HTML页面：创建一个简单的HTML文件,用于展示数据。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>用户列表</title> </head> <body> <h1>用户列表</h1> <ul id="user-list"> <!-- 用户数据将通过JavaScript动态插入这里 --> </ul> <script src="app.js"></script> </body> </html> -
编写JavaScript代码：在
app.js文件中，使用XMLHttpRequest对象发起请求。// 1. 获取HTML中用于展示数据的DOM元素 const userListElement = document.getElementById('user-list'); // 2. 创建一个XMLHttpRequest对象 const xhr = new XMLHttpRequest(); // 3. 配置请求：GET方法，请求API地址，true表示异步请求 xhr.open('GET', 'https://api.example.com/users', true); // 4. 设置请求完成后的回调函数 xhr.onload = function() { // 检查请求是否成功 (HTTP状态码 200-299) if (xhr.status >= 200 && xhr.status < 300) { // 5. 解析响应文本为JavaScript对象 // xhr.responseText 是服务器返回的原始字符串 const users = JSON.parse(xhr.responseText); // 6. 遍历数据，并动态创建HTML元素进行展示 users.forEach(user => { const listItem = document.createElement('li'); listItem.textContent = `ID: ${user.id}, 姓名: ${user.name}, 邮箱: ${user.email}`; userListElement.appendChild(listItem); }); } else { // 请求失败 console.error('请求失败，状态码：', xhr.status); userListElement.textContent = '加载用户数据失败。'; } }; // 7. 设置请求出错时的回调函数 xhr.onerror = function() { console.error('网络请求发生错误'); userListElement.textContent = '网络错误，请检查您的连接。'; }; // 8. 发送请求 xhr.send();
实现方式二：现代 Fetch API (推荐)
Fetch API 是现代浏览器提供的、更强大、更简洁的API，用于替代 XMLHttpRequest，它返回一个 Promise,使得异步代码更易于编写和理解。
我们使用同样的HTML结构，只需修改 app.js 文件。
步骤：
-
HTML页面 (同上)
-
编写JavaScript代码 (使用Fetch API)
// 1. 获取DOM元素 const userListElement = document.getElementById('user-list'); // 2. 使用fetch函数发起请求 // fetch返回一个Promise，我们可以使用.then()来处理成功的情况 fetch('https://api.example.com/users') .then(response => { // 第一个.then()用于检查响应状态 // 如果响应状态不是OK (404, 500)，则抛出一个错误 if (!response.ok) { throw new Error(`HTTP 错误! 状态码: ${response.status}`); } // 使用 response.json() 来解析响应体为JSON对象 // 这同样返回一个Promise return response.json(); }) .then(users => { // 第二个.then()接收解析后的JSON数据 console.log('获取到的用户数据:', users); // 3. 遍历数据并渲染到HTML users.forEach(user => { const listItem = document.createElement('li'); listItem.textContent = `ID: ${user.id}, 姓名: ${user.name}, 邮箱: ${user.email}`; userListElement.appendChild(listItem); }); }) .(error) => { // .catch()用于捕获处理过程中发生的任何错误 console.error('获取数据时出错:', error); userListElement.textContent = '加载用户数据时发生错误。'; });
Fetch API vs. XMLHttpRequest:
- 语法更简洁：Fetch API基于Promise，代码更清晰,避免了回调地狱。
- 更强大的功能：提供了对请求和响应的更精细控制。
- 默认不发送Cookie：与XMLHttpRequest不同，Fetch API默认不会发送或接收Cookies，如果需要，必须设置
credentials: 'include'。
进阶：使用AJAX库 (如Axios)
在实际项目中，开发者更倾向于使用像 Axios 这样的第三方库，它是对 Fetch API 和 XMLHttpRequest 的封装，提供了更友好的API、自动JSON转换、请求/响应拦截、更好的错误处理和跨浏览器兼容性。
步骤：
-
引入Axios：在HTML中通过CDN引入Axios库。
<!-- 在body底部引入 --> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script src="app.js"></script>
-
编写JavaScript代码 (使用Axios)
// 1. 获取DOM元素 const userListElement = document.getElementById('user-list'); // 2. 使用axios发起GET请求 axios.get('https://api.example.com/users') .then(response => { // Axios会自动将响应数据解析为JSON对象，直接通过response.data访问 const users = response.data; console.log('获取到的用户数据:', users); // 3. 渲染数据 users.forEach(user => { const listItem = document.createElement('li'); listItem.textContent = `ID: ${user.id}, 姓名: ${user.name}, 邮箱: ${user.email}`; userListElement.appendChild(listItem); }); }) .catch(error => { // Axios会统一处理网络错误和HTTP错误状态码 if (error.response) { // 服务器返回了错误状态码 console.error('请求失败，状态码:', error.response.status); } else if (error.request) { // 请求已发出但没有收到响应 console.error('没有收到服务器响应:', error.request); } else { // 设置请求时发生了错误 console.error('请求配置出错:', error.message); } userListElement.textContent = '加载用户数据失败。'; });
总结与最佳实践
| 方法 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| XMLHttpRequest | 兼容性极好（包括IE7+） | 语法冗长，基于回调，代码不易维护 | 维护旧项目或需要支持非常老的浏览器。 |
| Fetch API | 现代标准，基于Promise，语法简洁 |
还没有评论，来说两句吧...