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.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

    4.0.0
    
        org.springframework.boot
        spring-boot-starter-parent
        2.3.0.RELEASE
         
    
    com.example
    demo_SpringBoot
    0.0.1-SNAPSHOT
    demo_SpringBoot
    Demo project for Spring Boot
 
    
        
            org.springframework.boot
            spring-boot-starter-web
        
    

示例1：最简(纯HTML)

代码

login.html

    
    

 

 

    用户名：
    
 
    密码：
    
 
    
 
    登录

 

测试

1.访问login.html

2.输入用户名和密码

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

结果

示例2：HTML+jQuery(form data)

代码

login.html

    
    
    

 

 

    用户名：
    
 
    密码：
    

 

登录
 

 

index.html

 

    
    

 

 

    登录成功后的页面

 

测试

1.访问login.html

2.输入用户名和密码

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

3.点击登录

4.点击确定

示例3：HTML+jQuery(json)

代码

login.html

    
    
    

 

 

    用户名：
    
 
    密码：
    

 

登录
 

 

index.html

 

    
    

 

 

    登录成功后的页面

 

测试

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

1.访问login.html

2.输入用户名和密码

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

3.点击登录

4.点击确定

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