首页 > 解决方案 > 如何通过 html 文件显示 MySQL 数据库中的内容?

问题描述

是否可以打开一个 html 文件,让它向服务器端应用程序发送一些信号以从 mysql db 查询数据,然后将该数据返回到该原始 html 文件?因此,与其让一些 php 或 js 程序吐出一个 html 文件,我可以创建一个“index.html”文件,当我点击它时,会显示我的数据库的内容吗?谢谢

标签: htmlmysqlnode.jsdatabase

解决方案


如果问题仅限于使用 HTML,那么这是不可能的。


如果您的意思是只使用静态 HTML 页面(允许内联 JavaScript),那么有很多方法可以做您想做的事。

您可以使用客户端 JavaScript,在静态页面中提供服务,从而无需运行像 Node JS 或其他类型的非静态 Web 服务器这样的后端。

像这样的静态 HTML 文件:

<html>
<head>
    <title>Using Fetch</title>
</head>
<body>
    <script>
        // Fetch your information here using client side JavaScript
        // Do something
    </script>
</body>
</html>

您的服务器端应用程序可以公开一个输出一些 JSON 的端点,我们将使用该端点https://example.com/api/并使用Fetch API获取它:

let url = 'https://example.com/api/';

fetch(url)
.then(res => res.json())
.then((data) => {
  // Your data is in the variable 'data', do something with it
})
.catch(err => { throw err });

您的 HTML 文件可能看起来像这样:

<html>
<head>
    <title>Using Fetch</title>
</head>
<body>
    <p id="data"></p>
    <script>
           let url = 'https://example.com/api/';
           fetch(url)
           .then(res => res.json())
           .then((data) => {
             document.getElementById("data").innerHTML = data;
           })
           .catch(err => { throw err });         
    </script>
</body>
</html>

该代码是从端点获取一些数据并在页面上设置段落以显示该信息的基本示例。


推荐阅读