js 做一个登录成功跳转页面|极客笔记

js 做一个登录成功跳转页面

在网页开发中，经常会遇到用户需要登录后才能访问特定页面的情况。为了提升用户体验，通常会在用户输入正确的用户名和密码后跳转到登录成功页面。今天我们就来学习如何使用JavaScript实现登录成功后的页面跳转效果。

1. 创建基本的登录页面

首先，我们需要创建一个简单的登录页面，包括用户名和密码的输入框以及登录按钮。在这个示例中，我们简化登录过程，不涉及真正的后端服务器验证，只做简单的前端逻辑演示。

<!DOCTYPE html>
<html>
<head>
    <title>Login Page</title>
</head>
<body>
    <h1>Login Page</h1>
    <label for="username">Username:</label>
    <input type="text" id="username"><br><br>
    <label for="password">Password:</label>
    <input type="password" id="password"><br><br>
    <button id="loginBtn">Login</button>

    <script src="login.js"></script>
</body>
</html>

2. 编写 JavaScript 代码

接下来，我们在一个单独的JavaScript文件中编写实现登录验证和页面跳转的代码。我们会验证用户输入的用户名和密码是否匹配，如果匹配则跳转到另一个页面。

document.getElementById('loginBtn').addEventListener('click', function() {
    var username = document.getElementById('username').value;
    var password = document.getElementById('password').value;

    // 假设用户名为 'admin'，密码为 '123456'
    if (username === 'admin' && password === '123456') {
        // 登录成功，跳转到另一个页面
        window.location.href = 'success.html';
    } else {
        alert('Login Failed. Please check your username and password.');
    }
});

在上面的代码中，我们通过addEventListener方法为登录按钮添加了一个点击事件监听器。当用户点击登录按钮时，我们获取输入的用户名和密码，然后与预设的用户名和密码进行比对。如果输入正确，则使用window.location.href跳转到success.html页面；如果输入错误，则弹出一个警告框提示用户登录失败。

3. 创建登录成功页面

为了完整的演示，我们还需要创建一个登录成功页面success.html，用于展示成功登录后的效果。

<!DOCTYPE html>
<html>
<head>
    <title>Login Success</title>
</head>
<body>
    <h1>Login Success!</h1>
    <p>Welcome, admin!</p>
</body>
</html>

4. 测试运行结果

现在我们可以在浏览器中打开登录页面(index.html)进行测试。输入正确的用户名和密码（’admin’和’123456’），然后点击登录按钮，应该会跳转到登录成功页面(success.html)，显示出成功登录的效果。

通过这个简单的示例，我们了解了如何使用JavaScript实现登录成功后的页面跳转效果。当然，实际的登录验证逻辑会更加复杂，涉及到后端服务器验证和安全性考虑，但基本的前端页面跳转逻辑是相似的。

js 做一个登录成功跳转页面