jqueryを使用してカスタムログインを実装する

jQuery を使用したカスタム ログインの実装

Web アプリケーションの継続的な開発に伴い、ユーザーがすべての機能にアクセスするためにログインを必要とする Web サイトやアプリケーションが増えています。長年の開発を経て、カスタム ログインは最も基本的で一般的な方法となり、jQuery はこの機能を実現するための一般的なツールの 1 つになりました。

この記事では、次の側面を含む、jQuery を使用してカスタマイズされたログインを実装する方法を紹介します。

• 実装プロセス
• HTML 構造
• CSS style
• jQuery コード

##実装プロセス

実装を開始する前に、実装プロセスを理解する必要があります。一般に、カスタム ログインの実装プロセスは次のとおりです。

HTML 構造の書き込み
• CSS スタイルの書き込み
• jQuery コードの書き込み
• 追加user 入力されたユーザー名とパスワードは検証のためにサーバーに送信されます。
• 検証が成功した場合、ログインは成功します。そうでない場合は、エラー メッセージが表示されます。

この記事では、主に次の内容に焦点を当てています。最初の 3 つのステップはサーバー側プログラムに関係し、最後の 2 つのステップはサーバー側プログラムに関係します。データベースに関連する操作はここでは説明しません。

HTML 構造

最初に HTML 構造を記述する必要があります。通常、ログイン フォームにはユーザー名、パスワード、ログイン ボタンが含まれており、次の構造を使用できます:

<div id="login-form">
  <h2>登录</h2>
  <form>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" required>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" required>
    <button type="submit">登录</button>
  </form>
</div>

ユーザー名とパスワードの入力タグでは、

required 属性を次のように設定する必要があることに注意してください。ユーザーがこれら 2 つのフィールドに入力する必要があり、フィールド名は name 属性を使用して指定する必要があります。この属性は後で使用します。

CSS スタイル

次に、ログイン フォームの表示とスタイルを確保するための CSS スタイルを記述する必要があります。ここでは参照スタイルのみを提供します:

#login-form {
  width: 400px;
  margin: 0 auto;
  padding: 20px;
  background: #f5f5f5;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

#login-form h2 {
  text-align: center;
}

#login-form form {
  display: flex;
  flex-direction: column;
}

#login-form label {
  margin-top: 10px;
}

#login-form input[type="text"],
#login-form input[type="password"] {
  height: 30px;
  padding: 5px;
  border: none;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

#login-form button[type="submit"] {
  margin-top: 20px;
  padding: 10px;
  border: none;
  border-radius: 5px;
  background: #007bff;
  color: #fff;
  cursor: pointer;
}

#login-form button[type="submit"]:hover {
  background: #0062cc;
}

このスタイルは比較的単純で、ログイン フォームのレイアウトとスタイルを確認するだけで済みます。

jQuery コード

最後に、次の機能を実現する jQuery コードを記述する必要があります。

フォームの送信イベントをリッスンします
ユーザー名とパスワードからユーザー入力を取得します
ユーザー名とパスワードを確認します
プロンプト エラー メッセージまたはログイン成功メッセージ

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

$(document).ready(function() {
  $('#login-form form').on('submit', function(e) {
    e.preventDefault(); // 阻止表单提交事件
    var username = $(this).find('input[name="username"]').val(); // 获取用户名
    var password = $(this).find('input[name="password"]').val(); // 获取密码
    $.ajax({
      type: 'POST',
      url: 'login.php', // 处理登录请求的服务器端程序
      data: { // 向服务器发送的数据
        username: username,
        password: password
      },
      success: function(res) { // 登录成功，刷新页面或跳转到其他页面
        alert('登录成功！');
        location.reload();
      },
      error: function(xhr, status, err) { // 登录失败，提示错误信息
        alert('登录失败：' + err);
      }
    });
  });
});

注意すべき点は、リクエストを送信するときに、ユーザー名とパスワードをオブジェクトの形式でサーバー側プログラムに送信する必要があり、サーバー側プログラムは次のことを行うことができる必要があることです。これら 2 つの情報を受け取り、検証します。検証が成功した場合は、ログイン成功情報がクライアントに送信され、そうでない場合は、ログイン失敗情報がクライアントに送信されます。

これまで、jQuery を使用してカスタム ログインを実装する基本的なプロセスを紹介しました。これは単純な例を示しているだけであることに注意してください。実際のアプリケーションでは、パスワードの暗号化など、さらにセキュリティの問題を考慮する必要があります。

以上がjqueryを使用してカスタムログインを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。