JavaScriptを使用してログインページにジャンプする方法-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

JavaScriptを使用してログインページにジャンプする方法

PHPz

Apr 24, 2023 am 10:50 AM

インターネットの発展に伴い、ユーザーが使用する前にログインを必要とする Web サイトやアプリケーションが増えています。このプロセスでは、多くの場合、JavaScript を使用してログインページにジャンプする必要があります。この記事では、JavaScript を使用してログインページジャンプを実装する方法を検討します。

1. 通常のログインページジャンプ

Web サイト開発では、通常、ユーザーが承認されたページに入る前にログインする必要があります。このとき、ログインページにジャンプするには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 を使用してホームページにジャンプします。

2. ログインしてログインページに戻る

ユーザーがすでにログインしているときに、ログインページにジャンプする必要がある場合があります。このとき、JavaScript を使用してログインする必要があります。ログインページに戻るログインページの操作

当社の Web サイトに、ログイン後にのみアクセスできる注文ページ /orders があり、ユーザーはすでにログインして注文ページを閲覧しているとします。場合によっては、ユーザーをログアウトしてログインページにジャンプする必要があり、その場合は JavaScript を使用する必要があります。

JavaScript コードは次のとおりです:

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

ログイン後にコピー

localStorage を通じてユーザーのログインステータスを保存できます。ユーザーがログアウトしたら、is_login を false に設定します。注文ページで、is_login が true であるかどうかを確認します。ログインページにジャンプします。。

ユーザーがすでにログインしている場合、ジャンプは行われず、ユーザーは注文ページに残ります。ユーザーがログインしていない場合は、ログインページにジャンプします。

3. まとめ

この記事ではJavaScriptを使ってログインページに飛ぶ方法を中心に紹介します。通常のログインと、ログイン後にログインページに戻る 2 つの例を通じて、JavaScript のジャンプスキルをよりよく習得できます。もちろん、これは JavaScript がログインジャンプを実装する方法の 1 つにすぎず、他の方法で実装することもできます。皆さんのお役に立てれば幸いです。

以上がJavaScriptを使用してログインページにジャンプする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。