ログインウィンドウのJavaScriptの実装

ログイン画面JavaScriptの実装

Webサイトへの日常的なログイン操作では、アカウント番号とパスワードを入力し、「ログイン」ボタンをクリックすることでログインが完了します。このログイン操作を完了するには、フロントエンド ページとバックエンド サービスの連携が必要です。この記事では、JavaScript を使用して簡単なログイン ウィンドウを実装する方法を紹介します。

1. フロントエンド ページのデザイン

最初に HTML でログイン ウィンドウをデザインする必要があります。最も単純なログイン ウィンドウは、2 つの入力ボックス (アカウントとパスワード) と送信ボタン (ログイン) を含むフォームです。 <input> タグを使用して入力ボックスとボタンを定義し、次に <form> タグを使用してフォームを定義できます。コードは次のとおりです。

<form>
    <label>账号</label>
    <input type="text" name="username" required />
    <label>密码</label>
    <input type="password" name="password" required />
    <button type="submit">登录</button>
</form>

このフォームには、username と password という 2 つの入力ボックスが含まれています。同時に、入力ボックスに値が必ず存在するようにするために、required 属性も指定されます。国際化をより使いやすくし、何を入力する必要があるかをユーザーに知らせるために、ユーザーに項目の入力を促す <label> ラベルが追加されています。

2. JavaScript はフォーム送信を処理します

ユーザーは上記のフォームにアカウント番号とパスワードを入力した後、「ログイン」ボタンをクリックして送信操作を完了する必要があります。現時点では、フォーム送信イベントをリッスンし、関連ロジックを処理するための JavaScript コードを記述する必要があります。コードは次のとおりです。

var form = document.querySelector('form');

form.addEventListener('submit', function(event) {
    event.preventDefault();

    var username = form.elements['username'].value;
    var password = form.elements['password'].value;

    if (username === 'admin' && password === 'admin') {
        alert('登录成功');
    } else {
        alert('账号或密码错误');
    }
});

は、document.querySelector メソッドを通じてフォームの DOM 要素を取得し、addEventListener メソッドを使用してコールバック関数を提供します。フォームの送信イベント用。このコールバック関数は、「ログイン」ボタンがクリックされたときにトリガーされます。 event パラメータはイベント関連の情報を表します。デフォルトの動作、つまりフォーム送信操作を防止するには、event.preventDefault メソッドを使用します。

次に、form 要素の elements 属性を使用して入力ボックスの値を取得し、アカウントのパスワードが要件を満たしているかどうかを判断します。要件が満たされている場合は、alert 関数を使用してユーザーに正常にログインするよう要求します。それ以外の場合は、ユーザー アカウントまたはパスワードが間違っていることをユーザーに要求します。

3. データ送信

実際のログイン操作では、ユーザーが入力したアカウント番号とパスワードを検証のためにバックエンド サービスに送信する必要があります。 JavaScript では、XMLHttpRequest オブジェクトを使用して AJAX リクエストを実装し、この目的を達成できます。

コードは次のとおりです。

var form = document.querySelector('form');

form.addEventListener('submit', function(event) {
    event.preventDefault();

    var username = form.elements['username'].value;
    var password = form.elements['password'].value;

    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/login');
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var response = JSON.parse(xhr.responseText);
            if (response.code === 0) {
                alert('登录成功');
            } else {
                alert(response.message);
            }
        }
    };
    xhr.send('username=' + encodeURIComponent(username) + '&password=' + encodeURIComponent(password));
});

このうち、XMLHttpRequest オブジェクトは、非同期 HTTP リクエストの送信に使用されます。 POST リクエストを使用して、ユーザー名とパスワードをリクエスト本文のコンテンツとしてバックエンド サービスに送信します。 setRequestHeader メソッドはリクエスト ヘッダーの設定に使用され、onreadystatechange メソッドはリクエスト ステータスの変化を監視し、コールバック関数を実行するために使用されます。リクエストが成功し、戻り結果が空でない場合は、結果を解析し、戻り値に基づいてログインが成功したかどうかを判断します。

4. 結論

上記の手順により、簡単なログイン ウィンドウを実装し、JavaScript コードを使用してフォーム送信機能とデータ送信機能を処理しました。この実装プロセスでは、JavaScript の基本的な構文と DOM 操作も示し、AJAX リクエストの基本的な使用法も紹介します。このような実装は単純ではありますが、実際のプロジェクトの基礎となるものであり、これをベースに、実際のニーズに応じてログイン機能をさらに拡張することができます。

以上がログインウィンドウのJavaScriptの実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。