MySQL 通过 JSON 发送 HTML 代码示例|极客教程

MySQL 通过 JSON 发送 HTML 代码示例

在日常的开发中，我们常常会涉及到 MySQL 数据库与前端页面的交互。其中，MySQL 数据库有时需要将 HTML 代码作为 JSON 格式发送给前端，那么该如何实现呢？下面我们通过一个示例来一步步讲解。

假设我们有一张名为 articles 的 MySQL 数据库表，其中包含了文章的标题和内容。现在我们需要将这些内容通过 JSON 格式发送给前端页面，并将其展示在 HTML 页面上。

首先，我们需要将 MySQL 数据库的数据以 JSON 格式进行处理。可以通过使用 MySQL 函数 JSON_OBJECT 来快速生成 JSON 对象。比如，我们运行下面这个 SQL 语句：

SELECT JSON_OBJECT('title', title, 'content', content) AS json_data
FROM articles;

这条语句会将 articles 表中的每一行数据转换成一个 JSON 对象，并且为每个对象设置了 title 和 content 两个属性。最后，我们可以得到一个包含若干个 JSON 对象的数组，每个对象对应一篇文章。

接下来，在我们的 PHP 或 Python 等后端语言中，我们可以将这些 JSON 对象编码成 JSON 字符串并通过 HTTP 响应发送给前端页面。比如，我们在 PHP 中可以使用 json_encode 函数将 JSON 对象数组编码成 JSON 字符串：

header('Content-Type: application/json');
echo json_encode($json_data);

在前端页面中，我们可以使用 XMLHttpRequest 对象向后端发送 GET 请求并获取响应数据。一旦我们获得了响应数据，并将其解析成一个对象数组，我们可以在页面上动态地生成 HTML 元素。

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const jsonData = JSON.parse(xhr.responseText);
    const articleList = document.querySelector('#articles');
    for (const article of jsonData) {
      const articleDiv = document.createElement('div');
      articleDiv.innerHTML = `
        <h2>{article.title}</h2>{article.content}
      `;
      articleList.appendChild(articleDiv);
    }
  }
};
xhr.open('GET', '/api/articles');
xhr.send();

最后，我们通过将文章的标题和内容嵌入到一个 div 元素中来完成 HTML 元素的动态创建。

阅读更多：MySQL 教程

总结

这篇文章介绍了如何通过 MySQL 数据库发送包含 HTML 代码的 JSON 对象，并在前端页面上使用 JavaScript 动态生成 HTML 元素。虽然此处给出的示例是使用 PHP 和 JavaScript 实现的，但其他后端语言和前端框架同样可以使用类似的方法来完成 MySQL 数据库与前端页面的交互。