jqueryを使用してカスタムログインを実装する-フロントエンドQ&A-php.cn

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

WBOY

リリース： 2023-05-18 20:34:06

オリジナル

743 人が閲覧しました

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

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

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

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

##実装プロセス

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

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 サイトの他の関連記事を参照してください。