表单无刷新录入信息到mysql的代码

洪七公 · 发表于 2024-4-21 21:25:56

为了实现表单无刷新录入信息到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代码将显示一个警告框来通知用户。整个过程中，页面不会刷新。

		自动登录	找回密码
密码			会员注册

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