Ajax~实现登录验证和异步数据加载

// 假设我们已经有了一个HTML表单和一个用于显示登录信息的div
// HTML表单如下：
// <form id="loginForm">
//   <input type="text" id="username" placeholder="Username">
//   <input type="password" id="password" placeholder="Password">
//   <button type="button" id="loginButton">Login</button>
// </form>
// <div id="loginMessage"></div>
 
// 登录验证函数
function validateLogin() {
    var username = document.getElementById('username').value;
    var password = document.getElementById('password').value;
    var loginMessage = document.getElementById('loginMessage');
 
    // 清除之前的信息
    loginMessage.innerHTML = '';
 
    // 检查用户名和密码是否为空
    if (username === '' || password === '') {
        loginMessage.innerHTML = 'Username and password cannot be blank.';
        return false;
    }
 
    // 发送Ajax请求进行验证
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/login', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var response = JSON.parse(xhr.responseText);
            if (response.success) {
                loginMessage.innerHTML = 'Login successful.';
                // 登录成功后的操作，例如页面跳转或数据加载
            } else {
                loginMessage.innerHTML = 'Login failed.';
            }
        }
    };
    xhr.send('username=' + encodeURIComponent(username) + '&password=' + encodeURIComponent(password));
    return false; // 阻止表单默认提交行为
}
 
// 绑定登录按钮的点击事件
document.getElementById('loginButton').addEventListener('click', validateLogin);

这段代码实现了一个简单的登录验证功能，通过Ajax方式向服务器发送请求，并在登录成功或失败后更新页面显示。需要注意的是，实际应用中的登录验证和数据处理逻辑可能更为复杂，并且密码应当使用加盐哈希等安全措施进行传输和存储。