JavaScript를 사용하여 로그인 페이지로 이동하는 방법-프런트엔드 Q&A-php.cn

JavaScript를 사용하여 로그인 페이지로 이동하는 방법

PHPz

풀어 주다： 2023-04-24 14:37:33

원래의

4014명이 탐색했습니다.

인터넷이 발전하면서 점점 더 많은 웹사이트와 애플리케이션을 사용하려면 로그인이 필요합니다. 이 과정에서 로그인 페이지로 이동하기 위해 JavaScript를 사용해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 로그인 페이지 점프를 구현하는 방법을 살펴보겠습니다.

1. 일반 로그인 페이지 점프

웹사이트 개발에서는 일반적으로 사용자가 승인된 페이지에 들어가기 전에 로그인이 필요합니다. 이때 로그인 페이지로 이동하려면 JavaScript를 사용해야 합니다.

가장 간단한 방법은 프런트 엔드 페이지에 로그인 양식을 작성하는 것입니다. 사용자가 사용자 이름과 비밀번호를 입력하면 양식 데이터가 확인을 위해 Ajax를 통해 백엔드로 전송됩니다. 확인이 통과되면 JavaScript를 사용하여 홈 페이지로 이동합니다.

HTML 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
  <head>
    <title>登录页面</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  </head>
  <body>
    <h1>登录页面</h1>
    <form id="login-form">
      <label for="username">用户名：</label>
      <input type="text" id="username" name="username" />
      <br />
      <label for="password">密码：</label>
      <input type="password" id="password" name="password" />
      <br />
      <input type="submit" value="登录" />
    </form>
    <script>
      $(function() {
        $("#login-form").submit(function(e) {
          e.preventDefault();
          $.ajax({
            url: "/login",
            method: "POST",
            data: $(this).serialize(),
            success: function(resp) {
              if (resp.code === 0) {
                window.location.href = "/home";
              } else {
                alert(resp.message);
              }
            },
            error: function() {
              alert("请求失败");
            }
          });
        });
      });
    </script>
  </body>
</html>

로그인 후 복사

JavaScript 코드는 jQuery의 Ajax 메소드를 사용하여 로그인 양식 데이터를 백그라운드로 보내고 백그라운드 인터페이스의 반환 값을 기반으로 로그인 성공 여부를 결정합니다. 로그인에 성공하면 window.location.href를 이용해 홈페이지로 이동하세요. window.location.href 将页面跳转到主页。

二、已经登录跳回登录页面

有时候，我们需要在用户已经登录的情况下，跳转到登录页面，这时候就需要使用 JavaScript 进行已经登录跳回登录页面的操作。

假设，我们的网站有一个已经登录后才能访问的订单页面 /orders，而用户已经登录并且在订单页面上进行浏览操作。在某些情况下，用户需要退出登录，此时需要将页面跳转到登录页面，这时候就需要使用 JavaScript 进行操作了。

JavaScript 代码如下：

if (localStorage.getItem("is_login") !== "true") {
  window.location.href = "/login";
}

로그인 후 복사

我们可以通过 localStorage 的方式保存用户登录状态。在用户退出登录时，将 is_login 设置为 false，在订单页面中，通过判断 is_login 是否为 true

2. 이미 로그인되어 로그인 페이지로 돌아가는 경우

때로는 사용자가 이미 로그인되어 있는 상태에서 로그인 페이지로 이동해야 하는 경우가 있습니다. 이때 로그인 페이지로 돌아가려면 JavaScript를 사용해야 합니다. 사용자가 로그인한 후.

우리 웹사이트에 로그인 후에만 접속할 수 있는 주문 페이지 /orders가 있고, 사용자가 이미 로그인하여 주문 페이지를 탐색하고 있다고 가정해 보겠습니다. 어떤 경우에는 사용자가 로그아웃해야 하고 페이지가 로그인 페이지로 이동해야 합니다. 이 경우 JavaScript를 사용해야 합니다.

자바스크립트 코드는 다음과 같습니다. 🎜rrreee🎜 localStorage를 통해 사용자 로그인 상태를 저장할 수 있습니다. 사용자가 로그아웃하면 is_login을 false로 설정하세요. 주문 페이지에서 is_login이 true인지 확인하세요. 로그인 페이지로 이동할지 여부를 결정합니다. 🎜🎜사용자가 이미 로그인한 경우 점프가 발생하지 않으며 사용자는 주문 페이지에 남아 있습니다. 사용자가 로그인하지 않은 경우 해당 페이지는 로그인 페이지로 이동합니다. 🎜🎜3. 결론🎜🎜이 글에서는 주로 JavaScript를 사용하여 로그인 페이지로 이동하는 방법을 소개합니다. 일반 로그인과 로그인 후 로그인 페이지로 다시 점프하는 두 가지 예를 통해 JavaScript 점프 기술을 더 잘 익힐 수 있습니다. 물론 이것은 JavaScript가 로그인 점프를 구현하는 방법 중 하나일 뿐이며 다른 방법으로도 구현할 수 있습니다. 그것이 모두에게 도움이 되기를 바랍니다. 🎜

위 내용은 JavaScript를 사용하여 로그인 페이지로 이동하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!