シンプルなログインページを実装するための HTML+jQuery

シンプルなログインページを実装するための HTML+jQuery

導入

この記事では、例を使用して、簡単なログイン ページの作成方法を説明します。

以下のソリューションが含まれます: 純粋な HTML、HTML + jQuery (フォーム データ) 形式、HTML + jQuery (json) 形式。

公開コード(バックエンドインターフェース)

SpringBoot を使用して、最もシンプルなログイン インターフェイスを記述します。

コントローラ

パッケージ com.example.controller;
 
com.example.entity.LoginVO をインポートします。
org.springframework.web.bind.annotation.CrossOrigin をインポートします。
org.springframework.web.bind.annotation.PostMapping をインポートします。
org.springframework.web.bind.annotation.RequestParam をインポートします。
org.springframework.web.bind.annotation.RestController をインポートします。
 
//クロスオリジン
//RESTスタイル: JSONを返す
@レストコントローラ
パブリッククラスLoginController {
    @PostMapping("ログイン")
    パブリックLoginVOログイン() {
        //ユーザー名とパスワードの判定を省略 LoginVO loginVO = new LoginVO();
        ログインVO.setSuccess(true);
        loginVO.setData("これはデータです");
        loginVO を返します。
    }
}

ドキュメント

<?xml バージョン="1.0" エンコーディング="UTF-8"?>
<プロジェクト xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <モデルバージョン>4.0.0</モデルバージョン>
    <親>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <バージョン>2.3.0.RELEASE</バージョン>
        <relativePath/> <!-- リポジトリから親を検索 -->
    </親>
    <グループID>com.example</グループID>
    <artifactId>デモ_SpringBoot</artifactId>
    <バージョン>0.0.1-SNAPSHOT</バージョン>
    <name>デモ_SpringBoot</name>
    <description>Spring Boot のデモ プロジェクト</description>
 
    <依存関係>
        <依存関係>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </依存関係>
    </依存関係>
</プロジェクト>

例 1: 最もシンプル (純粋な HTML)

コード

ログイン.html

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>ログインページ</title>
</head>
 
<本文>
 
<フォームアクション="http://localhost:8080/login" メソッド="post">
    <label for="username">ユーザー名:</label>
    <input type="text" name="ユーザー名" id="ユーザー名">
 
    <label for="password">パスワード:</label>
    <input type="password" name="password" id="password">
 
    <!-- 次のように書くこともできます <label for="username">
        ユーザー名: <input type="text" name="username" id="username">
    </ラベル>
    <label for="パスワード">
        パスワード: <input type="password" name="password" id="password">
    </label>-->
 
    <button type="submit">ログイン</button>
</フォーム>
 
</本文>
</html>

テスト

1. login.htmlにアクセスします。

2. ユーザー名とパスワードを入力します

ユーザー名: abc と入力; パスワード: 1234 と入力

結果

例2: HTML+jQuery (フォームデータ)

コード

ログイン.html

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>ログインページ</title>
    <script src="https://cdn.staticfile.org/jquery/1.11.3/jquery.min.js"></script>
</head>
 
<本文>
 
<form id="ログインフォーム">
    <label for="username">ユーザー名:</label>
    <input type="text" name="ユーザー名" id="ユーザー名">
 
    <label for="password">パスワード:</label>
    <input type="password" name="password" id="password">
</フォーム>
 
<div id="エラーメッセージ"></div>
<button type="submit" onclick="loginViaFormData()">ログイン</button>
 
<スクリプト>
    関数 loginViaFormData() {
        $.ajax(
            {
                タイプ: "投稿",
                URL: "http://localhost:8080/ログイン",
                data: $("#login-form").serialize(), //フォーム内のデータをシリアル化してバックエンドに渡します //dataType: "json", //バックエンドから渡されるデータがjson形式であることを指定します success: function (result) {
                    結果が成功の場合
                        $("#errormessage").text("ユーザー名またはパスワードが正しくありません");
                    } そうでない場合 (結果が成功) {
                        alert("ログインに成功しました");
                        // index.html ページにジャンプします。window.location.href="index.html" rel="external nofollow" rel="external nofollow";
                    }
                }
            }
        )
    }
</スクリプト>
 
</本文>
</html>

インデックス.html

<!doctypehtml>
<html lang="ja">
 
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>これはタイトルです</title>
</head>
 
<本文>
 
<div class="コンテナ">
    ログイン成功後のページ</div>
 
<スクリプト>
 
</スクリプト>
</本文>
</html>

テスト

1. login.htmlにアクセスします。

2. ユーザー名とパスワードを入力します

ユーザー名: abc と入力; パスワード: 1234 と入力

3. ログインをクリック

4. OKをクリックする

例3: HTML+jQuery(json)

コード

ログイン.html

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>ログインページ</title>
    <script src="https://cdn.staticfile.org/jquery/1.11.3/jquery.min.js"></script>
</head>
 
<本文>
 
<form id="ログインフォーム">
    <label for="username">ユーザー名:</label>
    <input type="text" name="ユーザー名" id="ユーザー名">
 
    <label for="password">パスワード:</label>
    <input type="password" name="password" id="password">
</フォーム>
 
<div id="エラーメッセージ"></div>
<button type="submit" onclick="loginViaJson()">ログイン</button>
 
<スクリプト>
    関数 loginViaJson() {
        $.post("http://localhost:8080/ログイン",
            //バックエンドに送信されるデータ {
                "ユーザー名": $(".ユーザー名").val(),
                "パスワード": $(".password").val()
            },
            //コールバック関数関数(結果){
                結果が成功の場合
                    $("#errormessage").text("ユーザー名またはパスワードが正しくありません");
                } そうでない場合 (結果が成功) {
                    alert("ログインに成功しました");
                    // index.html ページにジャンプします。window.location.href="index.html" rel="external nofollow" rel="external nofollow";
                }
            }
        )
    }
</スクリプト>
 
</本文>
</html>

インデックス.html

<!doctypehtml>
<html lang="ja">
 
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>これはタイトルです</title>
</head>
 
<本文>
 
<div class="コンテナ">
    ログイン成功後のページ</div>
 
<スクリプト>
 
</スクリプト>
</本文>
</html>

テスト

テスト結果は、前回の「例2: HTML+jQuery (フォームデータ)」と同じです。

1. login.htmlにアクセスします。

2. ユーザー名とパスワードを入力します

ユーザー名: abc と入力; パスワード: 1234 と入力

3. ログインをクリック

4. OKをクリックする

これで、HTML+jQuery でシンプルなログイン ページを実装する方法についての記事は終了です。HTML jQuery ログイン ページの関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • jQuery Ajax は HTML ページでユーザーのログイン ステータスをリアルタイムに表示します。
  • jQuery+ajax によるユーザーログイン認証の実装
  • jQueryはユーザーのログイン認証を実装します
  • JavaScript と jQuery を使用したユーザーログイン認証の実装
  • jQuery Enterで簡単なログインを実現

<<:  重複したMySQLレコードを現場でチェックし、処理する実践的な記録

>>:  よく使われる HTML タグとその特徴の完全なリスト

推薦する

JavaScript でエラーが発生しやすい演算子操作の概要

目次算術演算子異常状況1: 特殊値リテラルを含む操作異常な状況 2: 他の種類のデータが数学演算に関...

Docker マルチステージビルドを使用してイメージサイズを縮小する方法

この記事では、Docker のマルチステージ ビルド機能を使用してイメージ サイズを大幅に削減する方...

Webデザインと制作のテスト問題と参考回答

<br />Web デザインと制作テスト パート I 多肢選択問題 1. 単一選択問題 ...

CSS3 @mediaの基本的な使い方のまとめ

//文法: @media mediatype and | not | only (メディア機能) ...

MySQL 8.0 が起動できない 3534 の解決策

MySQL 8.0 サービスを開始できません最近、 cmdで MySQL サービスを起動するときに遭...

PSSHを使用してLinuxサーバーを一括管理する

pssh は、多数のマシンでのバッチ ssh 操作に使用される、Python で実装されたオープン ...

Reactの原理の説明

目次1. setState() の説明1.1 データの更新1.2 推奨構文1.3 2番目のパラメータ...

mysql8.0.14.zip のインストール中にデータ フォルダを自動的に作成できませんでした。サービスを開始できません。

今日システムを再インストールした後、コンピューターに mysql を再インストールし、ZIP ファイ...

jQueryで劇場の座席選択と予約の効果を実現

jQueryは劇場の座席選択と予約の効果を実現します。参考までに、具体的な内容は次のとおりです。効果...

抽選効果を実現するJavaScript

この記事では、宝くじマシンの効果を実現するためのJavaScriptの具体的なコードを参考までに共有...

JSが絵柄デジタル時計を実現

この記事の例では、画像デジタル時計を実現するためのJSの具体的なコードを参考までに共有しています。具...

VueプロジェクトにPWAを導入する手順

目次1. 依存関係をインストールする2. vue.config.js ファイルで pwa を設定しま...

ウェブ計算機を実装するためのjs

HTML、CSS、JS を使用してシンプルな Web 計算機を作成する方法は?コンピュータには次の...

Centos7 でスーパーバイザ デーモンをインストールして設定する方法

初心者は自分で録音しましょう1. スーパーバイザーをインストールします。 Supervisor は ...

Kylin V10 サーバーで Storm をコンパイルしてインストールする詳細なプロセス

1 はじめにApache Storm は、Hadoop と同様に、大量のデータを処理するために使用で...