原文网址：HTML简单的登录页面--实例_IT利刃出鞘的博客-CSDN博客

简介

本文用示例展示简单的登录页面的写法。

会包括如下几种方案：纯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风格：返回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)

代码

<!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>--><!--必须是submit类型。如果是button类型，点击后不会请求--><button type="submit">登录</button>
</form></body>
</html>

测试

1.访问login.html

2.输入用户名和密码

用户名：输入abc；密码：输入 1234

结果

示例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"><!--下边这样写也可以<label for="username">用户名：<input type="text" name="username" id="username"></label><label for="password">密码：<input type="password" name="password" id="password"></label>-->
</form><div id="error-message"></div>
<button onclick="loginViaFormData()">登录</button><script>function loginViaFormData() {$.ajax({type: "post",url: "http://localhost:8080/login",data: $("#login-form").serialize(), // 序列化form表单里面的数据传到后台//dataType: "json", // 指定后台传过来的数据是json格式success: function (result) {if (!result.success) {$("#errormessage").text("用户名或密码错误");} else if (result.success) {alert("登录成功");// 跳到index.html页面window.location.href="index.html";}}})}
</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.点击登录

4.点击确定

示例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"><!--下边这样写也可以<label for="username">用户名：<input type="text" name="username" id="username"></label><label for="password">密码：<input type="password" name="password" id="password"></label>-->
</form><div id="error-message"></div>
<button onclick="loginViaJson()">登录</button><script>function loginViaJson() {$.post("http://localhost:8080/login",//发送给后端的数据{"userName": $(".username").val(),"password": $(".password").val()},//回调函数function (result) {if (!result.success) {$("#errormessage").text("用户名或密码错误");} else if (result.success) {alert("登录成功");// 跳到index.html页面window.location.href="index.html";}})}
</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>

测试

测试结果和前边“示例2：HTML+jQuery(form data)”一样

1.访问login.html

2.输入用户名和密码

用户名：输入abc；密码：输入 1234

3.点击登录

4.点击确定

其他网址

基于Jquery实现登录功能的前端页面_阳菜-CSDN博客_jquery登录页面

web登录页面jquery校验的简单实现（一）_Mr.wang的博客-CSDN博客_jquery登录页面验证

HTML简单的登录页面--实例相关推荐

写一个简单的登录页面!!!(html)
写一个简单的登录页面!!! 大家好,我是伍柒. 今天我又双叒叕发现了一个好东西. 那就是用html做一个登录页面那,该如何做呢? 首先现在html里的body里写一个头部header标签(双标签 ...
html+css 制作简单QQ登录页面
HTML+css制作简单QQ登录页面这是效果图这是HTML源码 <!DOCTYPE html> <html lang="zh"><head> ...
JSP实现简单的登录页面实现及代码（非连接数据库）
** JSP实现简单的登录页面实现及代码(非连接数据库) ** 1.实现一个简单的登陆页面: 2.如果登陆成功,提示页面欢迎你,进入我的主页: 3.如果登陆不成功跳转到登陆页面: 4.使用固定用户名和 ...
实现一个简单的登录页面
实现一个简单的登录页面设计了一个登录页面,感觉还挺不错的实现效果设计的还是挺好看的吧分析需要的功能一个登录页面一个注册页面翻转效果输入后的正则判断,给用户提示信息翻转要清空页面的全部信 ...
Android开发实现简单QQ登录页面
Android开发实现极为简单的QQ登录页面设计一个简单QQ登录页面,无任何功能.然后打包安装到手机. 1.首先创建一个空白页面 2.打开样式设计的页面在activity_main.xml中写入代 ...
PHP连接数据库实现简单的登录页面
最后实现结果如下图所示: 如果输入的用户名或密码为空,则会弹出对话框提示同样的,如果输入的密码不正确也会弹出对话框提示: 登录成功页面: 具体实现代码如下: HTML代码: <!DOCTYPE ...
Kotlin实现简单的登录页面
目录一.流程: 二.代码实现: 一.流程: 输入登录昵称+密码,点击登录按钮,登录成功显示成功toast并进入详情页面,登录失败显示失败toast Kotlin实现简单的登录页面视频 Kotlin实 ...
简单java登录页面android_Android 之路 - RxJava2+Retrofit实现简单登陆
原标题:Android 之路 - RxJava2+Retrofit实现简单登陆前言使用RxJava2+Retrofit实现简单登陆. 正文1. Hello world1.1 相关版本 Androi ...
用html和css语言编写一个登录页面,简单css登录页面
CSS布局HTML小编今天和大家分享一个简单的登录界面CSS代码登陆微信登陆QQ登陆注册 #zuo{ width: 500px; height: 540px; background: whi ...
超详细超简单的登录页面实现(MVC实现)
一个简单的利用数据库的查找实现网页的登录.话不多说,上代码. 目录 1.项目结构 2.数据库的设计 3.pojo编写 4.数据库(BaseDao)的实现 4.编写一个接口实现查询功能 5.编写一个测试 ...

HTML简单的登录页面--实例

简介

公共代码(后端接口)

示例1：最简(纯HTML)

代码

测试

示例2：HTML+jQuery(form data)

代码

测试

示例3：HTML+jQuery(json)

代码

测试

其他网址

HTML简单的登录页面--实例相关推荐

最新文章

热门文章