ログインウィンドウのJavaScriptの実装-フロントエンドQ&A-php.cn

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

PHPz

リリース： 2023-05-22 10:33:36

オリジナル

1091 人が閲覧しました

ログイン画面JavaScriptの実装

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

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

最初に 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> ラベルが追加されています。

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 関数を使用してユーザーに正常にログインするよう要求します。それ以外の場合は、ユーザーアカウントまたはパスワードが間違っていることをユーザーに要求します。

データ送信

実際のログイン操作では、ユーザーが入力したアカウント番号とパスワードを検証のためにバックエンドサービスに送信する必要があります。 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 メソッドはリクエストステータスの変化を監視し、コールバック関数を実行するために使用されます。リクエストが成功し、戻り結果が空でない場合は、結果を解析し、戻り値に基づいてログインが成功したかどうかを判断します。

結論

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

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