// 假设有一个登录表单和一个用于显示用户信息的容器
<form id="loginForm">
<input type="text" id="username" placeholder="Username">
<input type="password" id="password" placeholder="Password">
<button type="submit">Login</button>
</form>
<div id="userInfo"></div>
// 登录验证的JavaScript代码
document.getElementById('loginForm').addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表单默认提交行为
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
var xhr = new XMLHttpRequest();
xhr.open('POST', '/login', true); // 假设有一个处理登录的后端接口 /login
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) {
// 登录成功，获取用户信息
loadUserInfo(response.userID);
} else {
alert('登录失败: ' + response.message);
}
}
};
xhr.send('username=' + encodeURIComponent(username) + '&password=' + encodeURIComponent(password));
});
function loadUserInfo(userId) {
var xhr = new XMLHttpRequest();
xhr.open('GET', '/userinfo/' + userId, true); // 假设有一个处理用户信息的后端接口
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var userInfo = document.getElementById('userInfo');
userInfo.innerHTML = xhr.responseText; // 假设返回的是用户信息的HTML
}
};
xhr.send();
}这个简单的示例展示了如何使用Ajax进行登录验证和异步加载用户信息。在实际应用中，你需要根据自己的后端API接口和数据结构进行相应的调整。