欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-10 10:25:26
目录简介公共代码(后端接口)示例1:最简(纯html)代码测试示例2:html+jquery(form data)代码测试示例3:html+jquery(json)代码测试简介本文用示例展示简单的登录...

简介

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

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

代码

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实现简单的登录页面

2.输入用户名和密码

用户名:输入abc;密码:输入 1234

结果

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

示例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表单里面的数据传到后台
                //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

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

2.输入用户名和密码

用户名:输入abc;密码:输入 1234

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

3.点击登录

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

4.点击确定

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

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

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

2.输入用户名和密码

用户名:输入abc;密码:输入 1234

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

3.点击登录

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

4.点击确定

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

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