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

ThingJS particle effects to achieve rain and snow effects with one click

Table of contents 1. Particle Effects 2. Load the...

MySQL slow query pitfalls

Table of contents 1. Slow query configuration 1-1...

Vue3 encapsulates the side navigation text skeleton effect component

Vue3 project encapsulation side navigation text s...

Vue implements drag progress bar

This article example shares the specific code of ...

js to achieve the effect of dragging the slider

This article shares the specific code of how to d...

How to view the storage location of MySQL data files

We may have a question: After we install MySQL lo...

How to install and deploy MySQL 8.0 under CentOS8

MySQL 8 official version 8.0.11 has been released...

The best 9 foreign free picture material websites

It is difficult to find good image material websi...

Tips to prevent others from saving as my web page and copying my site

Nowadays, copying websites is very common on the I...

Docker implements container port binding local port

Today, I encountered a small problem that after s...

Pure JS method to export table to excel

html <div > <button type="button&qu...

A small collection of html Meta tags

<Head>……</head> indicates the file he...

Solution for converting to inline styles in CSS (css-inline)

Talk about the scene Send Email Embedding HTML in...

JS achieves five-star praise effect

Use JS to implement object-oriented methods to ac...