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

这篇文章主要介绍"HTML+jQuery如何实现简单的登录页面"，在日常操作中，相信很多人在HTML+jQuery如何实现简单的登录页面问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"HTML+jQuery如何实现简单的登录页面"的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

简介

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

会包括如下几种方案：纯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@RestControllerpublic 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如何实现简单的登录页面"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！