使用Fancybox / Ajax 处理登录错误

// 假设您已经包含了Fancybox库和jQuery库
 
// 登录按钮点击事件处理程序
$('#login-button').on('click', function() {
    // 获取用户名和密码
    var username = $('#username').val();
    var password = $('#password').val();
 
    // 发送Ajax请求进行登录验证
    $.ajax({
        type: 'POST',
        url: '/path/to/login/endpoint',
        data: { username: username, password: password },
        dataType: 'json',
        success: function(response) {
            // 登录成功，关闭Fancybox
            $.fancybox.close();
            // 进行后续操作，比如刷新页面等
        },
        error: function(xhr, status, error) {
            // 登录失败，根据服务器返回的错误信息显示提示
            if (xhr.status === 401) {
                // 用户名或密码错误
                $.fancybox.open($('#login-error').html());
            } else {
                // 其他错误处理
                console.error('登录出现未知错误：', status, error);
            }
        }
    });
});
 
// HTML部分
// 假设您已经有了一个登录表单和错误提示的容器
<div style="display:none;" id="login-error">
    <p>登录失败：用户名或密码错误。</p>
</div>

这段代码展示了如何在用户点击登录按钮时，使用Ajax请求进行验证，并且在验证失败时，使用Fancybox显示错误信息。这是一个简化的例子，实际应用中您可能需要根据自己的应用程序的具体需求进行相应的调整。