HTML+jQuery zur Implementierung einer einfachen Anmeldeseite

HTML+jQuery zur Implementierung einer einfachen Anmeldeseite

Einführung

Dieser Artikel zeigt anhand von Beispielen, wie eine einfache Anmeldeseite geschrieben wird.

Die folgenden Lösungen werden enthalten sein: reines HTML, HTML+jQuery-Format (Formulardaten) und HTML+jQuery-Format (JSON).

Öffentlicher Code (Backend-Schnittstelle)

Verwenden Sie SpringBoot, um die einfachste Anmeldeschnittstelle zu schreiben.

Regler

Paket com.example.controller;
 
importiere com.example.entity.LoginVO;
importiere org.springframework.web.bind.annotation.CrossOrigin;
importiere org.springframework.web.bind.annotation.PostMapping;
importiere org.springframework.web.bind.annotation.RequestParam;
importiere org.springframework.web.bind.annotation.RestController;
 
//CrossOrigin
//Rest-Stil: JSON zurückgeben
@RestController
öffentliche Klasse LoginController {
    @PostMapping("Anmelden")
    öffentliche LoginVO login() {
        //Die Beurteilung von Benutzername und Passwort weglassen LoginVO loginVO = new LoginVO();
        loginVO.setSuccess(true);
        loginVO.setData("Dies sind Daten");
        loginVO zurückgeben;
    }
}

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<Projekt xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <übergeordnetes Element>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.3.0.RELEASE</version>
        <relativePath/> <!-- übergeordnetes Element im Repository suchen -->
    </übergeordnet>
    <groupId>com.beispiel</groupId>
    <artifactId>demo_SpringBoot</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>demo_SpringBoot</name>
    <description>Demoprojekt für Spring Boot</description>
 
    <Abhängigkeiten>
        <Abhängigkeit>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </Abhängigkeit>
    </Abhängigkeiten>
</Projekt>

Beispiel 1: Am einfachsten (reines HTML)

Code

anmelden.html

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Anmeldeseite</title>
</Kopf>
 
<Text>
 
<form action="http://localhost:8080/login" method="post">
    <label for="username">Benutzername:</label>
    <input type="text" name="benutzername" id="benutzername">
 
    <label for="password">Passwort:</label>
    <input type="Passwort" name="Passwort" id="Passwort">
 
    <!--Sie können auch so schreiben <label for="username">
        Benutzername: <input type="text" name="username" id="username">
    </Bezeichnung>
    <label für="Passwort">
        Passwort: <input type="password" name="password" id="password">
    </label>-->
 
    <button type="submit">Anmelden</button>
</form>
 
</body>
</html>

prüfen

1. Besuchen Sie login.html

2. Geben Sie Ihren Benutzernamen und Ihr Passwort ein

Benutzername: Geben Sie abc ein; Passwort: Geben Sie 1234 ein

Ergebnis

Beispiel 2: HTML+jQuery (Formulardaten)

Code

anmelden.html

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Anmeldeseite</title>
    <script src="https://cdn.staticfile.org/jquery/1.11.3/jquery.min.js"></script>
</Kopf>
 
<Text>
 
<form id="Anmeldeformular">
    <label for="username">Benutzername:</label>
    <input type="text" name="benutzername" id="benutzername">
 
    <label for="password">Passwort:</label>
    <input type="Passwort" name="Passwort" id="Passwort">
</form>
 
<div id="Fehlermeldung"></div>
<button type="submit" onclick="loginViaFormData()">Anmelden</button>
 
<Skript>
    Funktion loginViaFormData() {
        $.ajax(
            {
                Typ: "Beitrag",
                URL: "http://localhost:8080/login",
                data: $("#login-form").serialize(), //Daten im Formular serialisieren und an das Backend übergeben //dataType: "json", //Geben Sie an, dass die vom Backend übergebenen Daten im JSON-Format vorliegen success: function (result) {
                    wenn (!Ergebnis.Erfolg) {
                        $("#errormessage").text("Falscher Benutzername oder falsches Passwort");
                    } sonst wenn (Ergebnis.Erfolg) {
                        alert("Anmeldung erfolgreich");
                        // Zur Seite „index.html“ springen window.location.href="index.html" rel="external nofollow" rel="external nofollow";
                    }
                }
            }
        )
    }
</Skript>
 
</body>
</html>

Hauptseite

<!doctype html>
<html lang="de">
 
<Kopf>
    <meta charset="UTF-8">
    <title>Dies ist der Titel</title>
</Kopf>
 
<Text>
 
<div Klasse="Container">
    Seite nach erfolgreichem Login</div>
 
<Skript>
 
</Skript>
</body>
</html>

prüfen

1. Besuchen Sie login.html

2. Geben Sie Ihren Benutzernamen und Ihr Passwort ein

Benutzername: Geben Sie abc ein; Passwort: Geben Sie 1234 ein

3. Klicken Sie auf Anmelden

4. Klicken Sie auf OK

Beispiel 3: HTML+jQuery(json)

Code

anmelden.html

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Anmeldeseite</title>
    <script src="https://cdn.staticfile.org/jquery/1.11.3/jquery.min.js"></script>
</Kopf>
 
<Text>
 
<form id="Anmeldeformular">
    <label for="username">Benutzername:</label>
    <input type="text" name="benutzername" id="benutzername">
 
    <label for="password">Passwort:</label>
    <input type="Passwort" name="Passwort" id="Passwort">
</form>
 
<div id="Fehlermeldung"></div>
<button type="submit" onclick="loginViaJson()">Anmelden</button>
 
<Skript>
    Funktion loginViaJson() {
        $.post("http://localhost:8080/login",
            //Daten an das Backend gesendet {
                "Benutzername": $(".username").val(),
                "Passwort": $(".password").val()
            },
            //Rückruffunktion Funktion (Ergebnis) {
                wenn (!Ergebnis.Erfolg) {
                    $("#errormessage").text("Falscher Benutzername oder falsches Passwort");
                } sonst wenn (Ergebnis.Erfolg) {
                    alert("Anmeldung erfolgreich");
                    // Zur Seite „index.html“ springen window.location.href="index.html" rel="external nofollow" rel="external nofollow";
                }
            }
        )
    }
</Skript>
 
</body>
</html>

Hauptseite

<!doctype html>
<html lang="de">
 
<Kopf>
    <meta charset="UTF-8">
    <title>Dies ist der Titel</title>
</Kopf>
 
<Text>
 
<div Klasse="Container">
    Seite nach erfolgreichem Login</div>
 
<Skript>
 
</Skript>
</body>
</html>

prüfen

Die Testergebnisse sind die gleichen wie beim vorherigen „Beispiel 2: HTML+jQuery (Formulardaten)“

1. Besuchen Sie login.html

2. Geben Sie Ihren Benutzernamen und Ihr Passwort ein

Benutzername: Geben Sie abc ein; Passwort: Geben Sie 1234 ein

3. Klicken Sie auf Anmelden

4. Klicken Sie auf OK

Dies ist das Ende dieses Artikels über die Implementierung einer einfachen Anmeldeseite mit HTML+jQuery. Weitere relevante Inhalte für HTML-jQuery-Anmeldeseiten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • jQuery Ajax implementiert die Echtzeitanzeige des Benutzeranmeldestatus auf der HTML-Seite
  • jQuery+ajax zur Implementierung der Benutzeranmeldungsüberprüfung
  • jQuery implementiert die Benutzeranmeldungsüberprüfung
  • Implementierung der Benutzeranmeldeüberprüfung mit JavaScript und jQuery
  • jQuery Enter für einfache Anmeldung

<<:  Eine vollständige Liste häufig verwendeter HTML-Tags und ihrer Eigenschaften

>>:  Konvertieren Sie ausgeschnittene PSD-Bilder in das Div+CSS-Format

Artikel empfehlen

Warum Seconds_Behind_Master immer noch 0 ist, wenn eine MySQL-Synchronisierungsverzögerung auftritt

Inhaltsverzeichnis Problembeschreibung Prinzipana...

MySQL verwendet Trigger, um das Zeilenlimit der Tabelle in der Datenbank zu lösen. Detaillierte Erklärung und Beispiele

MySQL verwendet Trigger, um das Zeilenlimit der T...

MySQL in Windows net start mysql Beim Starten des MySQL-Dienstes tritt ein Fehler auf. Lösung für Systemfehler

Inhaltsverzeichnis 1- Fehlerdetails 2-Einzellösun...

Installation und Konfiguration des automatischen Mount-Dienstes AutoFs im Linux-System

Inhaltsverzeichnis Vorwort 1. Installieren Sie da...

Analysieren des MySQL-Binärprotokolls

Inhaltsverzeichnis 1. Einführung in Binlog 2. Bin...

Beispielcode für die programmgesteuerte Verarbeitung von CSS-Stilen

Vorteile eines programmatischen Ansatzes 1. Globa...

Fallerklärung für den Nginx-Reverse-Proxy zu Go-FastDFS

Hintergrund go-fastdfs ist ein verteiltes Dateisy...

Beispiel für die Verwendung von Docker Swarm zum Erstellen eines verteilten Crawler-Clusters

Während des Crawler-Entwicklungsprozesses sind Si...

Eine kurze Einführung in Linux-Leistungsüberwachungsbefehle kostenlos

Wie können wir den Fehler lokalisieren, wenn im S...

So verwenden Sie GeoIP, um Regionen in Nginx einzuschränken

Dieser Blog ist eine Arbeitsnotiz Umfeld: Nginx-V...

Detaillierte Erläuterung des Vue Router Routing Guard

Inhaltsverzeichnis 1. Global vor jedem 1. Global ...

Eine kurze Analyse von MySQL-Verbindungen und -Sammlungen

Join-Abfrage Eine Join-Abfrage bezieht sich auf e...

Eine kurze Einführung in MySQL-Funktionen

Inhaltsverzeichnis 1. Mathematische Funktionen 2....

Linux-Checkup: Erfahren Sie mehr über Ihren Linux-Status (Netzwerk-E/A, Festplatte, CPU, Speicher)

Inhaltsverzeichnis 1. Kernbefehle 2. Allgemeine B...

Beispiel für die Implementierung der Graphql-Schnittstelle in Vue

Hinweis: In diesem Artikel geht es um die grundle...