使用MySQL和HTML无需刷新页面更改内容

在Web开发中，有时需要更新页面内容，但不想刷新或重新加载整个页面。这种操作可以用Ajax（Asynchronous JavaScript and XML）来实现。在这种情况下，使用MySQL数据库和HTML可以轻松地实现更新内容而无需刷新整个页面。

阅读更多：MySQL 教程

1. 创建数据库

首先，您需要在MySQL中创建一个数据库。使用以下命令：

CREATE DATABASE database_name;

这将创建一个名为database_name的数据库。

2. 创建数据表

要使用HTML和MySQL更新内容，需先创建一个数据表。使用以下MySQL命令：

CREATE TABLE table_name (
    id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
    content VARCHAR(200) NOT NULL
);

这将创建一个名为table_name的数据表，其中包含一个自动递增的id列和一个字符型content列。

3. 创建HTML页面

创建一个HTML页面，该页面将显示content列中的内容并显示可以更新content列的表单。该表单将通过AJAX提交到服务器以更新数据库中的内容。

以下是示例HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>无需刷新页面更改内容</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
         $(document).ready(function(){$ ("#myForm").submit(function(event){
                event.preventDefault();
                var content_data =  $("#myForm :input[name='content']").val();$ .ajax({
                    type: "POST",
                    url: "update_content.php",
                    data: { content: content_data },
                    success: function(response){
                        $("#message").html(response);
                    }
                });
            });
        });
    </script>
</head>
<body>

<h1>无需刷新页面更改内容</h1>

<form id="myForm" method="post">
    <label for="content">内容:</label><br>
    <input type="text" id="content" name="content" value=""><br><br>
    <input type="submit" value="提交">
</form>

<br><br>

<div id="message"></div>

</body>
</html>

4. 创建PHP文件

最后，创建一个PHP文件来处理表单提交并更新数据库中的内容。以下是示例PHP代码：

<?php
 $servername = "localhost"; // 数据库服务器名$ username = "username";     // 用户名
 $password = "password"; // 密码$ dbname = "database_name";  // 数据库名

// 创建连接
 $conn = mysqli_connect($ servername,  $username,$ password,  $dbname); // 检查连接是否正常工作 if (!$ conn) {
    die("Connection failed: " . mysqli_connect_error());
}

 $content =$ _POST['content'];

 $sql = "UPDATE table_name SET content='$ content' WHERE id=1";

if (mysqli_query( $conn,$ sql)) {
    echo "内容已更新";
} else {
    echo "Error: " .  $sql . "<br>" . mysqli_error($ conn);
}

mysqli_close($conn);
?>