Verwenden Sie JQuery, um eine benutzerdefinierte Anmeldung zu implementieren

Individuelle Anmeldung mit jQuery

Mit der kontinuierlichen Weiterentwicklung von Webanwendungen erfordern immer mehr Websites und Anwendungen eine Anmeldung der Benutzer, um auf alle Funktionen zugreifen zu können. Nach Jahren der Entwicklung hat sich die benutzerdefinierte Anmeldung zur einfachsten und gebräuchlichsten Methode entwickelt, und jQuery ist zu einem der beliebtesten Tools zum Erreichen dieser Funktion geworden.

In diesem Artikel wird erläutert, wie Sie mit jQuery eine benutzerdefinierte Anmeldung implementieren, einschließlich der folgenden Aspekte:

• Implementierungsprozess
• HTML-Struktur
• CSS-Stil
• jQuery-Code

Implementierungsprozess

Bevor Sie mit der Implementierung beginnen, müssen Sie Zuerst müssen Sie den Implementierungsprozess verstehen. Im Allgemeinen ist der Implementierungsprozess der benutzerdefinierten Anmeldung wie folgt:

• HTML-Struktur schreiben
• CSS-Stil schreiben
• jQuery-Code schreiben
• Vom Benutzer eingegebenen Benutzernamen und Passwort zur Überprüfung an den Server senden
• Wenn die Wenn die Überprüfung erfolgreich ist, wird eine Fehlermeldung angezeigt. Dieser Artikel konzentriert sich hauptsächlich auf die ersten drei Schritte. Die letzten beiden Schritte betreffen serverseitige Programme und datenbankbezogene Vorgänge, die nicht beschrieben werden Hier.

<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>

festgelegt werden müssen, um den Feldnamen anzugeben, der verwendet wird später.

CSS-Stilrequired 属性，以保证用户必须填写这两个字段，并且必须使用 name

#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;
}

Hören Sie sich das Übermittlungsereignis des Formulars an

Rufen Sie den vom Benutzer eingegebenen Benutzernamen und das Passwort ab
Überprüfen Sie den Benutzernamen und das Passwort
Prompt-Fehlermeldung oder Anmeldeerfolgsmeldung
• Das Folgende ist der Implementierungscode:

$(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);
      }
    });
  });
});

Nach dem Login kopieren
Es ist zu beachten, dass beim Senden einer Anfrage der Benutzername und das Passwort in Form von Objekten an das serverseitige Programm gesendet werden müssen , und das serverseitige Programm muss in der Lage sein, diese beiden Informationen zu empfangen und zu überprüfen. Wenn die Überprüfung erfolgreich ist, werden Informationen zum erfolgreichen Anmelden an den Client gesendet, andernfalls werden Informationen zum fehlgeschlagenen Anmelden an den Client gesendet.
Bisher wurde der grundlegende Prozess der Verwendung von jQuery zur Implementierung einer benutzerdefinierten Anmeldung vorgestellt. Es ist zu beachten, dass dies nur ein einfaches Beispiel ist. Bei tatsächlichen Anwendungen müssen weitere Sicherheitsaspekte berücksichtigt werden, beispielsweise die Passwortverschlüsselung.

Das obige ist der detaillierte Inhalt vonVerwenden Sie JQuery, um eine benutzerdefinierte Anmeldung zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!