ホームページ > 記事 > ウェブフロントエンド > JavaScriptを使用してログインページにジャンプする方法
JavaScriptを使用してログインページにジャンプする方法
- PHPzオリジナル
- 2023-04-24 10:50:333992ブラウズ
インターネットの発展に伴い、ユーザーが使用する前にログインを必要とする 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 サイトの他の関連記事を参照してください。