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

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

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

Web サイト開発では、通常、ユーザーが承認されたページに入る前にログインする必要があります。このとき、ログインページにジャンプするにはJavaScriptを使用する必要があります。

最も簡単な方法は、フロントエンド ページにログイン フォームを記述することです。ユーザーがユーザー名とパスワードを入力すると、フォーム データは検証のために Ajax を通じてバックエンドに送信されます。検証に合格した場合は、JavaScript を使用してホームページにジャンプします。

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

nbsp;html>

  
    <title>登录页面</title>
    <script></script>
  
  
    <h1>登录页面</h1>
    

      用户名：              
      密码：              
           

    <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>   

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 サイトの他の関連記事を参照してください。