【JavaWeb】日程管理系统 添加Ajax注册校验 第四期

以下是一个简化的示例，展示了如何使用Ajax进行用户名的实时检查：

<!-- 注册页面的HTML部分 -->
<form id="registrationForm">
    用户名: <input type="text" id="username" onblur="checkUsername()">
    <span id="usernameMessage"></span>
    <input type="submit" value="注册">
</form>
 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function checkUsername() {
    var username = $('#username').val();
    $.ajax({
        url: 'check_username.php', // 后端检查用户名的URL
        type: 'POST',
        data: { username: username },
        success: function(response) {
            // 假设后端返回1表示用户名已存在，0表示可用
            if(response == '1') {
                $('#usernameMessage').text('用户名已存在，请选择其他用户名。');
            } else {
                $('#usernameMessage').text('用户名可用。');
            }
        },
        error: function() {
            alert('请求失败，请稍后再试。');
        }
    });
}
</script>

后端PHP代码示例 (check_username.php):

<?php
// 假设已连接数据库，并且有一个users表
$username = $_POST['username'];
 
// 查询数据库，检查用户名是否存在
$query = "SELECT COUNT(*) FROM users WHERE username = ?";
$stmt = $pdo->prepare($query);
$stmt->execute([$username]);
$userExists = $stmt->fetchColumn() > 0;
 
// 返回结果
if ($userExists) {
    echo '1'; // 用户名已存在
} else {
    echo '0'; // 用户名可用
}
?>

这个示例展示了如何在用户离开输入框后，通过Ajax异步检查用户名是否已经被占用，并在页面上实时显示相应的消息。这样的实时验证能提供更好的用户体验。