HTML+jQuery實現(xiàn)簡單的登錄頁面
更新時間：2021年12月11日 08:52:15 作者：IT利刃出鞘
這篇文章主要介紹了用三種方法實現(xiàn)簡單的登錄頁面的制作：純HTML、HTML+jQuery(form data)格式、HTML+jQuery(json)格式。感興趣的同學(xué)可以跟隨小編一起學(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
2.輸入用戶名和密碼
用戶名：輸入abc；密碼：輸入 1234
結(jié)果
示例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
2.輸入用戶名和密碼
用戶名：輸入abc；密碼：輸入 1234
3.點(diǎn)擊登錄
4.點(diǎ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
2.輸入用戶名和密碼
用戶名：輸入abc；密碼：輸入 1234
3.點(diǎn)擊登錄
4.點(diǎn)擊確定
到此這篇關(guān)于HTML+jQuery實現(xiàn)簡單的登錄頁面的文章就介紹到這了,更多相關(guān)HTML jQuery 登錄頁面內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
js整數(shù)字符串轉(zhuǎn)換為金額類型數(shù)據(jù)(示例代碼)
本篇文章主要是對js整數(shù)字符串轉(zhuǎn)換為金額類型數(shù)據(jù)的示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
jquery 層次選擇器siblings與nextAll的區(qū)別介紹
jquery 層次選擇器包括siblings與nextAll，本文為大家介紹下具體的使用方法，想學(xué)習(xí)的朋也可以參考下，希望對大家有所幫助2013-08-08
下面小編就為大家?guī)硪黄猘jax在兼容模式下失效的快速解決方法。小編覺得挺不錯的。現(xiàn)在分享給大家，給大家一個參考2016-03-03
jquery實現(xiàn)的3D旋轉(zhuǎn)木馬特效代碼分享
這篇文章主要介紹了jquery實現(xiàn)的3D旋轉(zhuǎn)木馬特效，功能實現(xiàn)非常簡單，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
這篇文章主要介紹了JQuery datepicker 用法詳解的相關(guān)資料,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了jQuery命名空間與閉包用法,結(jié)合實例形式演示了jQuery中命名空間及閉包的具體使用技巧,需要的朋友可以參考下2017-01-01
jquery如何判斷表格同一列不同行input數(shù)據(jù)是否重復(fù)
這篇文章主要介紹了jquery如何判斷表格同一列不同行input數(shù)據(jù)是否重復(fù),需要的朋友可以參考下2014-05-05
jQuery 插件實現(xiàn)隨機(jī)自由彈跳氣泡樣式
一個基于jQuery的氣泡動畫插件，在指定區(qū)域上方（左/右）定時間隔產(chǎn)生氣泡，然后隨機(jī)水平速度進(jìn)行仿自由落體運(yùn)動。這篇文章主要介紹了jQuery 插件實現(xiàn)隨機(jī)自由彈跳氣泡樣式的相關(guān)資料,需要的朋友可以參考下2017-01-01
自定義錯誤消息的顯示方式2010-07-07
jquery內(nèi)置驗證(validate)使用方法示例(表單驗證)
這篇文章主要介紹了jquery內(nèi)置驗證(validate)使用方法示例,在做表單驗證的時候可以用到，下面看代碼使用方法2013-12-12