[PHP编程] 表单无刷新录入信息到mysql的代码

2年前发布

290

为了实现表单无刷新录入信息到MySQL，你可以使用AJAX（Asynchronous JavaScript and XML）来异步提交表单数据。下面是一个简单的例子，演示了如何使用jQuery和AJAX将表单数据提交到服务器，并在服务器端使用PHP处理数据后将其插入到MySQL数据库。

首先，你需要一个HTML表单，该表单将包含你的输入字段和一个用于提交表单的按钮。例如：

<!DOCTYPE html>
<html>
<head>
    <title>无刷新表单提交</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#submit-form').click(function(e) {
                e.preventDefault(); // 阻止表单的默认提交行为

                // 获取表单数据
                var name = $('#name').val();
                var email = $('#email').val();

                // 使用AJAX提交数据
                $.ajax({
                    type: 'POST',
                    url: 'insert_data.php', // PHP脚本的URL
                    data: {
                        name: name,
                        email: email
                    },
                    success: function(response) {
                        // 处理服务器响应
                        alert('数据录入成功！');
                        // 可以选择性地更新页面上的某些元素
                    },
                    error: function(xhr, status, error) {
                        // 处理错误
                        alert('数据录入失败: ' + error);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form id="myForm">
        <label for="name">姓名:</label>
        <input type="text" id="name" name="name" required><br>

        <label for="email">电子邮件:</label>
        <input type="email" id="email" name="email" required><br>

        <button type="button" id="submit-form">提交</button>
    </form>
</body>
</html>

接下来，你需要一个PHP脚本来处理这些数据，并将其插入到MySQL数据库中。这个脚本应该与你在AJAX请求中指定的URL相对应（在这个例子中是insert_data.php）。

<?php
// 数据库连接信息
$host = 'localhost';
$dbname = 'your_database_name';
$username = 'your_username';
$password = 'your_password';

// 创建数据库连接
$conn = new mysqli($host, $username, $password, $dbname);

// 检查连接是否成功
if ($conn->connect_error) {
    die("数据库连接失败: " . $conn->connect_error);
}

// 获取通过POST方法发送的数据
$name = isset($_POST['name']) ? $_POST['name'] : '';
$email = isset($_POST['email']) ? $_POST['email'] : '';

// 准备SQL语句
$sql = "INSERT INTO your_table (name, email) VALUES (?, ?)";

// 准备语句
$stmt = $conn->prepare($sql);

// 绑定参数
$stmt->bind_param("ss", $name, $email); // "ss" 表示两个参数都是字符串

// 执行语句
if ($stmt->execute()) {
    echo "数据录入成功";
} else {
    echo "数据录入失败: " . $conn->error;
}

// 关闭语句和连接
$stmt->close();
$conn->close();
?>

确保你的MySQL表your_table已经创建，并且包含name和email两个字段。

最后，当用户填写表单并点击提交按钮时，JavaScript代码将捕获表单数据，并通过AJAX发送到服务器上的insert_data.php脚本。如果数据成功插入数据库，服务器将返回一个成功的消息，然后JavaScript代码将显示一个警告框来通知用户。整个过程中，页面不会刷新。

评分

欢迎为Ta评分

PHP技术分享

[PHP编程] 表单无刷新录入信息到mysql的代码