// 假设我们已经有了一个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方式向服务器发送请求，并在登录成功或失败后更新页面显示。需要注意的是，实际应用中的登录验证和数据处理逻辑可能更为复杂，并且密码应当使用加盐哈希等安全措施进行传输和存储。