当前位置：首页 > JavaScript

js实现登录注册php

2026-01-31 02:35:55JavaScript

实现登录注册的前后端交互

前端部分（JavaScript）

使用JavaScript处理表单提交，通过AJAX与后端PHP交互。以下是一个简单的登录注册表单处理示例：

// 注册功能
document.getElementById('registerForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const formData = new FormData(this);

    fetch('register.php', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if(data.success) {
            alert('注册成功');
        } else {
            alert(data.message);
        }
    });
});

// 登录功能
document.getElementById('loginForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const formData = new FormData(this);

    fetch('login.php', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if(data.success) {
            window.location.href = 'dashboard.php';
        } else {
            alert(data.message);
        }
    });
});

后端部分（PHP）

创建两个PHP文件分别处理登录和注册逻辑。

register.php 处理注册请求：

<?php
header('Content-Type: application/json');

$username = $_POST['username'];
$password = password_hash($_POST['password'], PASSWORD_DEFAULT);

// 连接数据库
$conn = new mysqli('localhost', 'username', 'password', 'database');

// 检查用户名是否已存在
$stmt = $conn->prepare("SELECT id FROM users WHERE username = ?");
$stmt->bind_param("s", $username);
$stmt->execute();
$stmt->store_result();

if($stmt->num_rows > 0) {
    echo json_encode(['success' => false, 'message' => '用户名已存在']);
    exit;
}

// 插入新用户
$stmt = $conn->prepare("INSERT INTO users (username, password) VALUES (?, ?)");
$stmt->bind_param("ss", $username, $password);

if($stmt->execute()) {
    echo json_encode(['success' => true]);
} else {
    echo json_encode(['success' => false, 'message' => '注册失败']);
}

$conn->close();
?>

login.php 处理登录请求：

<?php
header('Content-Type: application/json');
session_start();

$username = $_POST['username'];
$password = $_POST['password'];

// 连接数据库
$conn = new mysqli('localhost', 'username', 'password', 'database');

// 查询用户
$stmt = $conn->prepare("SELECT id, password FROM users WHERE username = ?");
$stmt->bind_param("s", $username);
$stmt->execute();
$result = $stmt->get_result();

if($result->num_rows === 0) {
    echo json_encode(['success' => false, 'message' => '用户名不存在']);
    exit;
}

$user = $result->fetch_assoc();

if(password_verify($password, $user['password'])) {
    $_SESSION['user_id'] = $user['id'];
    echo json_encode(['success' => true]);
} else {
    echo json_encode(['success' => false, 'message' => '密码错误']);
}

$conn->close();
?>

数据库准备

创建用户表SQL语句：

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) NOT NULL UNIQUE,
    password VARCHAR(255) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

安全注意事项

使用预处理语句防止SQL注入密码使用password_hash()函数进行哈希存储前端验证后仍需后端验证 HTTPS协议传输敏感数据考虑添加CSRF防护措施

前端表单示例

HTML登录注册表单结构：

<!-- 注册表单 -->
<form id="registerForm">
    <input type="text" name="username" placeholder="用户名" required>
    <input type="password" name="password" placeholder="密码" required>
    <button type="submit">注册</button>
</form>

<!-- 登录表单 -->
<form id="loginForm">
    <input type="text" name="username" placeholder="用户名" required>
    <input type="password" name="password" placeholder="密码" required>
    <button type="submit">登录</button>
</form>

以上实现展示了基本的登录注册功能，实际项目中可能需要添加更多功能如邮箱验证、密码重置等。

js实现登录注册php