以下是一个简单的例子，展示了如何使用JavaScript和Ajax实现登录功能：
HTML部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login Page</title>
</head>
<body>
<form id="loginForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<button type="button" id="loginBtn">Login</button>
</form>
<script src="login.js"></script>
</body>
</html>JavaScript部分 (login.js):
document.getElementById('loginBtn').addEventListener('click', function() {
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
var xhr = new XMLHttpRequest();
xhr.open('POST', '/login', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 登录成功的处理逻辑
console.log('Login successful');
// 可以在这里跳转到另一个页面
} else if (xhr.readyState === 4 && xhr.status === 401) {
// 登录失败的处理逻辑
console.log('Login failed');
}
};
var data = JSON.stringify({
username: username,
password: password
});
xhr.send(data);
});在这个例子中，我们为登录按钮添加了一个点击事件监听器。当按钮被点击时，它会读取用户名和密码，并通过Ajax向服务器的/login路径发送一个POST请求。服务器端需要有相应的路由来处理登录请求，并返回合适的状态码（如200表示成功，401表示未授权）。
请注意，这个例子没有处理CSRF tokens，HTTPS，或者输入验证。在实际应用中，你需要添加这些安全措施。