HTML+jQuery to implement a simple login page

HTML+jQuery to implement a simple login page

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

login.html

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

login.html

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

login.html

<!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:
  • jQuery Ajax implements real-time display of user login status on HTML page
  • jQuery+ajax to implement user login verification
  • jQuery implements user login verification
  • Implementing user login verification with javascript and jquery
  • jQuery Enter to achieve simple login

<<:  A complete list of commonly used HTML tags and their characteristics

>>:  Convert psd cut image to div+css format

Recommend

How to create components in React

Table of contents Preface Component Introduction ...

The difference between html empty link href="#" and href="javascript:void(0)"

# contains a location information. The default anc...

Detailed steps to install Docker 1.8 on CentOS 7

Docker supports running on the following CentOS v...

Calendar effect based on jQuery

This article example shares the specific code of ...

Mobile Internet Era: Responsive Web Design Has Become a General Trend

We are in an era of rapid development of mobile In...

How to configure jdk environment under Linux

1. Go to the official website to download the jdk...

Analysis and solution of the problem that MySQL instance cannot be started

Table of contents Preface Scenario Analysis Summa...

The difference between z-index: 0 and z-index: auto in CSS

I've been learning about stacking contexts re...

CentOS system rpm installation and configuration of Nginx

Table of contents CentOS rpm installation and con...

Detailed explanation of built-in methods of javascript array

Table of contents 1. Array.at() 2. Array.copyWith...

JS practical object-oriented snake game example

Table of contents think 1. Greedy Snake Effect Pi...

Detailed explanation of the role of the new operator in Js

Preface Js is the most commonly used code manipul...