PHP – AJAX 与 MySQL

0

PHP、AJAX和MySQL是一套常见的组合，用于创建动态网页和实现与数据库的数据交互。下面是一个简单的示例，演示如何使用PHP、AJAX和MySQL进行数据的异步加载和保存。

HTML部分：

<!DOCTYPE html>
<html>
<head>
    <title>PHP - AJAX 与 MySQL 示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // 异步加载数据
            $.ajax({
                url: 'getData.php',
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    // 在成功获取数据后，将其显示在页面上
                    $('#result').text(data.message);
                },
                error: function(xhr, status, error) {
                    console.log(error);
                }
            });

            // 异步保存数据
            $('#saveDataButton').click(function() {
                var data = {
                    message: '这是要保存的数据'
                };

                $.ajax({
                    url: 'saveData.php',
                    type: 'POST',
                    data: data,
                    success: function(response) {
                        console.log(response);
                    },
                    error: function(xhr, status, error) {
                        console.log(error);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <h1>PHP - AJAX 与 MySQL 示例</h1>
    <div id="result"></div>
    <button id="saveDataButton">保存数据</button>
</body>
</html>

PHP部分（getData.php）：

<?php
// 连接到MySQL数据库
$servername = "localhost";
$username = "root";
$password = "password";
$dbname = "mydatabase";

$conn = new mysqli($servername, $username, $password, $dbname);

// 查询数据
$sql = "SELECT message FROM mytable";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    $row = $result->fetch_assoc();
    $data = array(
        'message' => $row['message']
    );

    // 将数据以JSON格式返回
    header('Content-Type: application/json');
    echo json_encode($data);
} else {
    echo "No data found.";
}

$conn->close();
?>

PHP部分（saveData.php）：

<?php
// 连接到MySQL数据库
$servername = "localhost";
$username = "root";
$password = "password";
$dbname = "mydatabase";

$conn = new mysqli($servername, $username, $password, $dbname);

// 获取通过POST请求传递的数据
$data = $_POST['message'];

// 将数据保存到数据库
$sql = "INSERT INTO mytable (message) VALUES ('$data')";
if ($conn->query($sql) === TRUE) {
    echo "Data saved successfully.";
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}

$conn->close();
?>

在上述示例中，我们使用了AJAX来实现异步加载数据和保存数据的功能。当页面加载完成时，会发送一个GET请求到”getData.php”文件来获取数据，并将其显示在页面上。当点击”保存数据”按钮时，会发送一个POST请求到”saveData.php”文件来保存数据到MySQL数据库中。

请注意，为了使示例正常工作，你需要根据你的实际情况进行相应的配置，包括MySQL数据库的连接信息和数据库表的结构。此外，为了安全起见，你还应该进行适当的输入验证和防止SQL注入攻击的处理。

实例解释 – MySQL 数据库

MySQL是一种常用的关系型数据库管理系统，被广泛用于Web应用程序和其他应用程序中。它提供了可靠的数据存储和高效的数据检索，以及强大的数据管理和处理功能。

在上面的示例中，我们使用了MySQL数据库来存储和检索数据。以下是示例中涉及到的MySQL数据库相关的解释：

  1. 连接到MySQL数据库：
    在示例中，我们使用了PHP的mysqli扩展来连接到MySQL数据库。我们提供了MySQL服务器的主机名、用户名、密码和数据库名，以便建立与数据库的连接。
   $servername = "localhost"; // MySQL服务器主机名
   $username = "root"; // MySQL用户名
   $password = "password"; // MySQL密码
   $dbname = "mydatabase"; // MySQL数据库名

   $conn = new mysqli($servername, $username, $password, $dbname); // 创建与MySQL数据库的连接
  1. 查询数据：
    在示例中，我们使用SQL语句来查询数据库中的数据。我们执行了一个SELECT查询来获取一条数据，并将其存储在PHP变量中。
   $sql = "SELECT message FROM mytable"; // 查询数据的SQL语句
   $result = $conn->query($sql); // 执行查询

   if ($result->num_rows > 0) {
       $row = $result->fetch_assoc();
       // 将查询结果存储在PHP变量中，以便后续处理
   }
  1. 保存数据：
    在示例中，我们使用SQL语句将数据保存到数据库中。我们执行了一个INSERT语句来将数据插入到表中。
   $data = $_POST['message']; // 从POST请求中获取要保存的数据

   $sql = "INSERT INTO mytable (message) VALUES ('$data')"; // 插入数据的SQL语句
   $conn->query($sql); // 执行插入操作
  1. 关闭数据库连接：
    在完成数据库操作后，我们需要关闭与MySQL数据库的连接，以释放资源和避免潜在的问题。
   $conn->close(); // 关闭与MySQL数据库的连接

这些是在示例中使用MySQL数据库的主要步骤。通过这些步骤，我们可以连接到数据库、查询数据、保存数据，并在完成操作后关闭连接。当然，MySQL还提供了许多其他功能和操作，例如创建表、更新数据、删除数据等，可以根据具体需求进行使用。

实例解释 – HTML 页面

HTML（超文本标记语言）是一种用于创建网页结构和内容的标记语言。它由一系列的标签组成，这些标签用于定义网页的结构、布局和内容。

以下是关于HTML页面示例中使用的一些主要概念的解释：

  1. HTML文档结构：
    HTML页面由HTML文档结构组成，其中包含了和元素。在元素中，可以设置页面的元数据，如标题、链接和样式表等。在元素中，定义了页面的可见内容。
   <!DOCTYPE html>
   <html>
   <head>
       <title>My HTML Page</title> <!-- 设置页面标题 -->
       <link rel="stylesheet" href="styles.css"> <!-- 引入样式表 -->
   </head>
   <body>
       <!-- 页面可见内容 -->
   </body>
   </html>
  1. HTML标签：
    HTML标签用于定义页面的不同元素和内容。示例中使用了常见的HTML标签，如、、等。
   <h1>Welcome to My HTML Page</h1> <!-- 页面标题 -->
   <p>This is a paragraph of text.</p> <!-- 段落文本 -->
   <img src="image.jpg" alt="Image"> <!-- 图像 -->
  1. HTML属性：
    HTML标签可以包含属性，这些属性提供了关于标签的额外信息。示例中使用了一些常见的HTML属性，如href、src和alt。
   <a href="https://www.example.com">Visit Example Website</a> <!-- 链接 -->
   <img src="image.jpg" alt="Image"> <!-- 图像 -->
  1. CSS样式：
    CSS（层叠样式表）用于定义HTML元素的外观和样式。示例中使用了一个样式表文件（styles.css），其中包含了一些CSS规则。
   <link rel="stylesheet" href="styles.css"> <!-- 引入样式表 -->

   h1 {
       color: blue; /* 设置标题的颜色为蓝色 */
   }
  1. 交互元素：
    HTML还提供了一些交互元素，如表单和按钮，用于收集用户输入和执行操作。
   <form action="submit.php" method="POST"> <!-- 表单 -->
       <input type="text" name="username" placeholder="Username"> <!-- 输入框 -->
       <input type="password" name="password" placeholder="Password"> <!-- 密码框 -->
       <button type="submit">Submit</button> <!-- 提交按钮 -->
   </form>

这些是在HTML页面示例中使用的一些主要概念。通过使用HTML标签、属性和CSS样式，我们可以创建结构良好、样式丰富和交互性强的网页。

PHP 文件

上面这段通过 JavaScript 调用的服务器页面是名为 “getsite_mysql.php” 的 PHP 文件。

“getsite_mysql.php” 中的源代码会运行一次针对 MySQL 数据库的查询，然后在 HTML 表格中返回结果

getsite_mysql.php 文件代码:

<?php $q = isset($_GET[“q”]) ? intval($_GET[“q”]) : ”; if(empty($q)) { echo ‘请选择一个网站’; exit; } $con = mysqli_connect(‘localhost’,’root’,’123456′); if (!$con) { die(‘Could not connect: ‘ . mysqli_error($con)); } // 选择数据库 mysqli_select_db($con,”test”); // 设置编码，防止中文乱码 mysqli_set_charset($con, “utf8″); $sql=”SELECT * FROM Websites WHERE id = ‘”.$q.”‘”; $result = mysqli_query($con,$sql); echo “<table border=’1’> <tr> <th>ID</th> <th>网站名</th> <th>网站 URL</th> <th>Alexa 排名</th> <th>国家</th> </tr>”; while($row = mysqli_fetch_array($result)) { echo “<tr>”; echo “<td>” . $row[‘id’] . “</td>”; echo “<td>” . $row[‘name’] . “</td>”; echo “<td>” . $row[‘url’] . “</td>”; echo “<td>” . $row[‘alexa’] . “</td>”; echo “<td>” . $row[‘country’] . “</td>”; echo “</tr>”; } echo “</table>”; mysqli_close($con); ?>

解释：当查询从 JavaScript 发送到 PHP 文件时，将发生：

  1. PHP 打开一个到 MySQL 数据库的连接
  2. 找到选中的用户
  3. 创建 HTML 表格，填充数据，并发送回 “txtHint” 占位符
Leave a Reply 0

Your email address will not be published. Required fields are marked *