HTML+jQuery to implement a simple login page

Introduction
Public code (backend interface)
Example 1: Simplest (pure HTML)

Code
test

Example 2: HTML+jQuery (form data)

Code
test

Example 3: HTML+jQuery(json)

Code
test

Introduction

This article uses examples to show how to write a simple login page.

The following solutions will be included: pure HTML, HTML+jQuery (form data) format, and HTML+jQuery (json) format.

Public code (backend interface)

Use SpringBoot to write the simplest login interface.

Controller

package com.example.controller;
 
import com.example.entity.LoginVO;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
 
//CrossOrigin
//Rest style: return JSON
@RestController
public class LoginController {
    @PostMapping("login")
    public LoginVO login() {
        //Omit the judgment of username and password LoginVO loginVO = new LoginVO();
        loginVO.setSuccess(true);
        loginVO.setData("This is data");
        return loginVO;
    }
}

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project 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>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.3.0.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>demo_SpringBoot</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>demo_SpringBoot</name>
    <description>Demo project for Spring Boot</description>
 
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
    </dependencies>
</project>

Example 1: Simplest (pure HTML)

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login Page</title>
</head>
 
<body>
 
<form action="http://localhost:8080/login" method="post">
    <label for="username">Username:</label>
    <input type="text" name="username" id="username">
 
    <label for="password">Password:</label>
    <input type="password" name="password" id="password">
 
    <!--You can also write like this <label for="username">
        Username: <input type="text" name="username" id="username">
    </label>
    <label for="password">
        Password: <input type="password" name="password" id="password">
    </label>-->
 
    <button type="submit">Login</button>
</form>
 
</body>
</html>

test

1. Visit login.html

2. Enter your username and password

Username: enter abc; Password: enter 1234

result

Example 2: HTML+jQuery (form data)

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login Page</title>
    <script src="https://cdn.staticfile.org/jquery/1.11.3/jquery.min.js"></script>
</head>
 
<body>
 
<form id="login-form">
    <label for="username">Username:</label>
    <input type="text" name="username" id="username">
 
    <label for="password">Password:</label>
    <input type="password" name="password" id="password">
</form>
 
<div id="error-message"></div>
<button type="submit" onclick="loginViaFormData()">Login</button>
 
<script>
    function loginViaFormData() {
        $.ajax(
            {
                type: "post",
                url: "http://localhost:8080/login",
                data: $("#login-form").serialize(), //Serialize the data in the form and pass it to the backend //dataType: "json", //Specify that the data passed from the backend is in json format success: function (result) {
                    if (!result.success) {
                        $("#errormessage").text("Incorrect username or password");
                    } else if (result.success) {
                        alert("Login successful");
                        // Jump to the index.html page window.location.href="index.html" rel="external nofollow" rel="external nofollow";
                    }
                }
            }
        )
    }
</script>
 
</body>
</html>

index.html

<!doctype html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>This is title</title>
</head>
 
<body>
 
<div class="container">
    Page after successful login</div>
 
<script>
 
</script>
</body>
</html>

test

1. Visit login.html

2. Enter your username and password

Username: enter abc; Password: enter 1234

3. Click Login

4. Click OK

Example 3: HTML+jQuery(json)

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login Page</title>
    <script src="https://cdn.staticfile.org/jquery/1.11.3/jquery.min.js"></script>
</head>
 
<body>
 
<form id="login-form">
    <label for="username">Username:</label>
    <input type="text" name="username" id="username">
 
    <label for="password">Password:</label>
    <input type="password" name="password" id="password">
</form>
 
<div id="error-message"></div>
<button type="submit" onclick="loginViaJson()">Login</button>
 
<script>
    function loginViaJson() {
        $.post("http://localhost:8080/login",
            //Data sent to the backend {
                "userName": $(".username").val(),
                "password": $(".password").val()
            },
            //Callback function function (result) {
                if (!result.success) {
                    $("#errormessage").text("Incorrect username or password");
                } else if (result.success) {
                    alert("Login successful");
                    // Jump to the index.html page window.location.href="index.html" rel="external nofollow" rel="external nofollow";
                }
            }
        )
    }
</script>
 
</body>
</html>

index.html

<!doctype html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>This is title</title>
</head>
 
<body>
 
<div class="container">
    Page after successful login</div>
 
<script>
 
</script>
</body>
</html>

test

The test results are the same as the previous "Example 2: HTML+jQuery (form data)"

1. Visit login.html

2. Enter your username and password

Username: enter abc; Password: enter 1234

3. Click Login

4. Click OK

This is the end of this article about how to implement a simple login page with HTML+jQuery. For more relevant HTML jQuery login page content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in: