溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

HTML+jQuery如何實現(xiàn)簡單的登錄頁面

發(fā)布時間：2021-12-13 19:03:42 來源：億速云 閱讀：594 作者：iii 欄目：開發(fā)技術(shù)

這篇文章主要介紹“HTML+jQuery如何實現(xiàn)簡單的登錄頁面”，在日常操作中，相信很多人在HTML+jQuery如何實現(xiàn)簡單的登錄頁面問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”HTML+jQuery如何實現(xiàn)簡單的登錄頁面”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

簡介

本文用示例展示簡單的登錄頁面的寫法。

會包括如下幾種方案：純HTML、HTML+jQuery(form data)格式、HTML+jQuery(json)格式。

公共代碼(后端接口)

用SpringBoot寫一個最簡單的登錄接口。

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風(fēng)格：返回JSON
@RestController
public class LoginController {
    @PostMapping("login")
    public LoginVO login() {
        //省略對用戶名和密碼的判斷
        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>

示例1：最簡(純HTML)

代碼

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登錄頁</title>
</head>
 
<body>
 
<form action="http://localhost:8080/login" method="post">
    <label for="username">用戶名：</label>
    <input type="text" name="username" id="username">
 
    <label for="password">密碼：</label>
    <input type="password" name="password" id="password">
 
    <!--下邊這樣寫也可以
    <label for="username">
        用戶名：<input type="text" name="username" id="username">
    </label>
    <label for="password">
        密碼：<input type="password" name="password" id="password">
    </label>-->
 
    <button type="submit">登錄</button>
</form>
 
</body>
</html>

測試

1.訪問login.html

HTML+jQuery如何實現(xiàn)簡單的登錄頁面

2.輸入用戶名和密碼

用戶名：輸入abc；密碼：輸入 1234

結(jié)果

HTML+jQuery如何實現(xiàn)簡單的登錄頁面

示例2：HTML+jQuery(form data)

代碼

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登錄頁</title>
    <script src="https://cdn.staticfile.org/jquery/1.11.3/jquery.min.js"></script>
</head>
 
<body>
 
<form id="login-form">
    <label for="username">用戶名：</label>
    <input type="text" name="username" id="username">
 
    <label for="password">密碼：</label>
    <input type="password" name="password" id="password">
</form>
 
<div id="error-message"></div>
<button type="submit" onclick="loginViaFormData()">登錄</button>
 
<script>
    function loginViaFormData() {
        $.ajax(
            {
                type: "post",
                url: "http://localhost:8080/login",
                data: $("#login-form").serialize(), // 序列化form表單里面的數(shù)據(jù)傳到后臺
                //dataType: "json", // 指定后臺傳過來的數(shù)據(jù)是json格式
                success: function (result) {
                    if (!result.success) {
                        $("#errormessage").text("用戶名或密碼錯誤");
                    } else if (result.success) {
                        alert("登錄成功");
                        // 跳到index.html頁面
                        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">
    登錄成功后的頁面
</div>
 
<script>
 
</script>
</body>
</html>

測試

1.訪問login.html

HTML+jQuery如何實現(xiàn)簡單的登錄頁面

2.輸入用戶名和密碼

用戶名：輸入abc；密碼：輸入 1234

HTML+jQuery如何實現(xiàn)簡單的登錄頁面

3.點擊登錄

HTML+jQuery如何實現(xiàn)簡單的登錄頁面

4.點擊確定

HTML+jQuery如何實現(xiàn)簡單的登錄頁面

示例3：HTML+jQuery(json)

代碼

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登錄頁</title>
    <script src="https://cdn.staticfile.org/jquery/1.11.3/jquery.min.js"></script>
</head>
 
<body>
 
<form id="login-form">
    <label for="username">用戶名：</label>
    <input type="text" name="username" id="username">
 
    <label for="password">密碼：</label>
    <input type="password" name="password" id="password">
</form>
 
<div id="error-message"></div>
<button type="submit" onclick="loginViaJson()">登錄</button>
 
<script>
    function loginViaJson() {
        $.post("http://localhost:8080/login",
            //發(fā)送給后端的數(shù)據(jù)
            {
                "userName": $(".username").val(),
                "password": $(".password").val()
            },
            //回調(diào)函數(shù)
            function (result) {
                if (!result.success) {
                    $("#errormessage").text("用戶名或密碼錯誤");
                } else if (result.success) {
                    alert("登錄成功");
                    // 跳到index.html頁面
                    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">
    登錄成功后的頁面
</div>
 
<script>
 
</script>
</body>
</html>

測試

測試結(jié)果和前邊“示例2：HTML+jQuery(form data)”一樣

1.訪問login.html

HTML+jQuery如何實現(xiàn)簡單的登錄頁面

2.輸入用戶名和密碼

用戶名：輸入abc；密碼：輸入 1234

HTML+jQuery如何實現(xiàn)簡單的登錄頁面

3.點擊登錄

HTML+jQuery如何實現(xiàn)簡單的登錄頁面

4.點擊確定

HTML+jQuery如何實現(xiàn)簡單的登錄頁面

到此，關(guān)于“HTML+jQuery如何實現(xiàn)簡單的登錄頁面”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手