PHP+MySQL+Ajax实现注册功能

本文使用原生PHP和mysql数据库，使用jquery的ajax实现注册功能。

注册页面

注册页面由，html表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>用户注册页面</title><style>.container {width: 300px;margin: auto;padding: 20px;border: 1px solid #ccc;border-radius: 5px;}input[type="text"], input[type="email"], input[type="password"] {width: 100%;padding: 12px 20px;margin: 8px 0;display: inline-block;border: 1px solid #ccc;box-sizing: border-box;}button {background-color: #4CAF50;color: white;padding: 14px 20px;margin: 8px 0;border: none;cursor: pointer;width: 100%;border-radius: 5px;}button:hover {opacity: 0.8;}#message {color: red;}</style><script src="jquery.min.js"></script>
</head>
<body><div class="container"><h2>用户注册</h2><form id="registerForm"><label for="username">用户名：</label><input type="text" id="username" name="username" required><br><label for="email">邮箱：</label><input type="email" id="email" name="email" required><br><label for="password">密码：</label><input type="password" id="password" name="password" required><br><button type="submit">注册</button></form><p id="message"></p></div><script>document.getElementById('registerForm').addEventListener('submit', function(event) {event.preventDefault();var username = document.getElementById('username').value;var email = document.getElementById('email').value;var password = document.getElementById('password').value;if (!validateUsername(username) || !validateEmail(email) || !validatePassword(password)) {document.getElementById('message').innerText = '请检查您的输入信息是否正确';return;}// 这里可以添加发送请求到服务器进行实际的注册操作$.ajax({url: 'register.php',method: 'POST',data: {username: username, password: password, email: email},dataType: 'json',success: function(response) {if(response.status == 'success') {alert('注册成功');// 处理请求成功后的操作//window.location.href = "yourRedirectUrl"; // 页面跳转到需要的 URL} else {alert('注册失败：' + response.message);}},error: function(xhr, status, error) {console.log('Error: ' + xhr.responseText);}});// 模拟注册成功后的提示// document.getElementById('message').innerText = '注册成功！';// 清空表单this.reset();});function validateUsername(username) {// 实际中应包含更复杂的验证逻辑，这里仅作简单示例return username.length > 0;}function validateEmail(email) {// 使用正则表达式进行邮箱格式验证var re = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;return re.test(email);}function validatePassword(password) {// 实际中应包含更复杂的验证逻辑，比如长度、特殊字符等，这里仅作简单示例return password.length > 0;}</script>
</body>
</html>

创建数据库sql

创建数据库

CREATE DATABASE db100;

创建数据表

DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` (`id` int(11) unsigned NOT NULL AUTO_INCREMENT,`username` varchar(20) NOT NULL,`password` varchar(255) NOT NULL,`email` varchar(255) DEFAULT NULL,`regtime` int(11) DEFAULT NULL,PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;

数据库连接文件

<?php 
// 连接数据库
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "db100";$conn = new mysqli($servername, $username, $password, $dbname);if ($conn->connect_error) {die("Connection failed: " . $conn->connect_error);
}?>

注册PHP文件

<?phpinclude 'conn.php';
// 获取前端传来的数据
$username = $_POST['username'];
// $password = password_hash($_POST['password'], PASSWORD_DEFAULT); // 对密码进行哈希加密
$password = $_POST['password'];
$email = $_POST['email'];// 验证输入并尝试插入数据
$sql = "INSERT INTO user (username, password, email)
VALUES (?, ?, ?)";$stmt = $conn->prepare($sql);
$stmt->bind_param("sss", $username, $password, $email);if ($stmt->execute()) {echo json_encode(array('status' => 'success'));
} else {echo json_encode(array('status' => 'error', 'message' => '注册失败，请检查您的输入或稍后再试.'));
}$stmt->close();
$conn->close();
?>