HTML+jQuery实现简单的登录页面

2024-07-31 16:38:17

简介

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

会包括如下几种方案：纯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>-->

    <button type="submit">登录</button>
</form>

</body>
</html>

测试

1.访问login.html

2.输入用户名和密码

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

结果

示例2：HTML+jQuery(form data)

代码

<!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表单里面的数据传到后台
                //dataType: "json", // 指定后台传过来的数据是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.点击登录

4.点击确定

示例3：HTML+jQuery(json)

代码

<!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",
            //发送给后端的数据
            {
                "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" 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>

测试

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

1.访问login.html

2.输入用户名和密码

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

3.点击登录

4.点击确定

到此这篇关于HTML+jQuery实现简单的登录页面的文章就介绍到这了,更多相关HTML jQuery 登录页面内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

javascript和jquery分别实现用户登录验证

在上一篇文章http://www.jb51.net/article/83504.htm中,用javascript实现了用户验证,但并没有对密码进行验证,这次追加了这个功能,并分别用javascript和jquery实现. 一.用jquery的ajax实现的关键代码实现如下 /*jquery实现 $(document).ready(function(){ $("#account").blur(function(event) { $.ajax({ type:"GET"
jQuery实现验证用户登录

前言前面的博客对jQuery有所介绍,所以接下来的这几篇博客是对jQuery的介绍,具体介绍方式是用例子呈现给大家. 内容显示效果输入之前输入之后点击校验废话少说,先上代码: HTML代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="
jQuery回车实现登录简单实现

复制代码代码如下: login_form为表单ID名.这里只是实现回车表单提交 $("#login_form").keypress(function(e) { if (e.which == 13) { $("#login_form").submit(); } }); $(window).keydown(function (e) { if (e.which == 13) { return false; } })
jQuery+ajax实现用户登录验证

本文实例为大家分享了jQuery+ajax实现用户登录验证的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>登录界面</title> <style type="text/css"> *{ margin: 0; padding: 0; } h3{ display: block;
jQuery Ajax 实现在html页面实时显示用户登录状态

当网站是全静态的html页面时,而又希望网站会员在登录之后并在所有页面头部显示登录状态,如用户名等,如果未登录就是未登录状态,下面给大家来分享实现的方法. 一.在html静态页面中加入div,并指定ID 如: <div id="ajaxlogin"></div> 二.新建一个动态的ajaxlogin.php文件,用来判断用户是否登录了代码如下: <? session_start(); if( $_SESSION['u_login']=='turelogi
HTML+jQuery实现简单的登录页面

目录简介公共代码(后端接口) 示例1:最简(纯HTML) 代码测试示例2:HTML+jQuery(form data) 代码测试示例3:HTML+jQuery(json) 代码测试简介本文用示例展示简单的登录页面的写法. 会包括如下几种方案:纯HTML.HTML+jQuery(form data)格式.HTML+jQuery(json)格式. 公共代码(后端接口) 用SpringBoot写一个最简单的登录接口. Controller package com.example.co
ajax编写简单的登录页面

AJAX的全称是Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). ajax的优点: 1.最大的一点是页面无刷新,用户的体验非常好. 2.使用异步方式与服务器通信,具有更加迅速的响应能力. 3.可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本.并且减轻服务器的负担,ajax的原则是"按需取数据",可以最大程度的减少冗余请求,和响应对服务器造成的负担. 4.基于
Android实现简单QQ登录页面

Android开发实现极为简单的QQ登录页面,供大家参考,具体内容如下设计一个简单QQ登录页面,无任何功能.然后打包安装到手机. 1.首先创建一个空白页面 2.打开样式设计的页面在activity_main.xml中写入代码 <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="h
使用Vue.js和Element-UI做一个简单登录页面的实例

最近了解到Vue.js挺火的,有同学已经学习了,那我心里痒痒的也学习了一点,然后也学了一点Element组件,就做了简单的登录页面. 效果很简单: 代码如下: 前端页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" hr
ajax实现简单登录页面

本文实例为大家分享了ajax实现简单登录页面的具体代码,供大家参考,具体内容如下一.什么是ajax Ajax是一种无需重新加载整个网页,能够更新部分网页的技术. 二.ajax的工作原理 Ajax工作原理是一个页面的指定位置可以加载另一个页面所有的输出内容,这样就实现了一个静态页面也能获取到数据库中的返回数据信息了. 所以Ajax实现了一个静态网页在不刷新整个页面的情况下与服务器通信,减少了用户等待时间,同时降低了网络流量,增强了客户体验的友好程度. 三.用ajax实现简单的登录页面 1.aja
如何利用IDEA搭建SpringBoot项目整合mybatis实现简单的登录功能

利用闲余时间想自己搭建一个springboot+mybatis的项目,提升一下自己对项目的了解,毕竟自己还是一个小白,在这里为自己创建项目的过程做一个记录,以便以后回忆.同时将搭建中遇到的问题也在这里做记录.如有遇到同样问题的同学,希望能给你一下借鉴. springboot的优势之一就是快速搭建项目,省去了自己导入jar包和配置xml的时间,使用非常方便. 一,搭建项目: 1.打开IDEA,点击File→New→Project...,如图1所示图1 搭建项目 2.当我们选择project..
微信小程序实现登录页面

本文实例为大家分享了微信小程序实现登录页面的具体代码,供大家参考,具体内容如下实现在进入微信小程序首页前的登录验证页面,这里有两种方法,但其实原理都是一样的. 1. 在首页中加入一个弹窗作为登录窗口,效果如下图: (1)index.wxml 登录窗口代码如下: <view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能

简单来说,jQuery validation插件就是来校验表单form里面元素输入的内容是否满足业务规则,如果不满足,可以给出用户自定义的提示信息.该插件不仅默认有一些校验规则,如校验内容是否为空,内容的长度是否符合给定的值,还可以根据用户自定义业务规则,而且错误提示信息,也可以根据用户的要求自定义显示.看来这个插件的功能确实很强大,是不是迫不及待想使用了.好的,那我们就开始简介如何使用它. jQuery validation 插件下载地址:http://plugins.jquery.com/p
jsp登录页面的简单实例雏形

jsp登录页面的简单实例雏形 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.d