html5查询mysql数据库

基础概念

HTML5 是一种用于构建网页的标记语言，而 MySQL 是一种流行的关系型数据库管理系统（RDBMS）。HTML5 本身并不直接支持与数据库交互，但可以通过 JavaScript 和服务器端脚本（如 PHP、Node.js 等）来实现与 MySQL 数据库的通信。

类型

前端：HTML5、CSS3、JavaScript
后端：PHP、Node.js、Python 等
数据库：MySQL

应用场景

Web 应用：如在线商城、社交网站、博客系统等。
移动应用：通过 WebView 或混合开发框架（如 Cordova）实现与 MySQL 数据库的交互。
数据分析：对存储在 MySQL 中的数据进行查询和分析，并通过 HTML5 页面展示结果。

遇到的问题及解决方法

问题1：如何在前端通过 JavaScript 查询 MySQL 数据库？

原因：JavaScript 是客户端脚本语言，无法直接访问服务器上的数据库。

解决方法：

使用 AJAX 技术，通过 JavaScript 向服务器发送请求，由服务器端的脚本（如 PHP）处理数据库查询，并将结果返回给前端。
使用 Fetch API 或 Axios 等现代的 HTTP 客户端库来发送请求。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Query MySQL Database</title>
</head>
<body>
    <h1>Query MySQL Database</h1>
    <button onclick="queryDatabase()">Query</button>
    <div id="result"></div>

    <script>
        async function queryDatabase() {
            try {
                const response = await fetch('query.php');
                const data = await response.json();
                document.getElementById('result').innerText = JSON.stringify(data);
            } catch (error) {
                console.error('Error:', error);
            }
        }
    </script>
</body>
</html>

<?php
// query.php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database_name";

// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);

// 检查连接
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// 查询数据
$sql = "SELECT id, name FROM users";
$result = $conn->query($sql);

$data = [];
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $data[] = $row;
    }
}

echo json_encode($data);

$conn->close();
?>

参考链接：

问题2：如何处理跨域请求？

原因：浏览器的同源策略限制了从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。

解决方法：

在服务器端设置 CORS（跨域资源共享）头，允许特定的源访问资源。
使用 JSONP 技术（仅限于 GET 请求）。

示例代码（PHP 设置 CORS 头）：

<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type");
?>

参考链接：