正文

基于jquery实现登录功能的前端页面(代码片段)

阳菜  阳菜  2022-12-12  686

关键词：

本篇文章讲解如何用jquery完成登录功能的前端页面展示

html部分：

<div class="name">
    <label>用户名:</label>
    <input type="text" name="username" id="username">
</div>
<div class="password">
    <label>密码:</label>
    <input type="password" name="password" id="password" >
</div>
<div id="errormessage"></div>
<button type="button" id="denglubutton">登陆</button>

一个比较重要的细节是button的type需要设置为button，因为在表单中它默认的type是submit，如果你用到了form表单，没设置type类型，那么再点击button之后，都会刷新一次页面，这不利于我们在输入有误时的提示。

css部分：

#errormessage
    color:#ff0000;

样式根据自己喜欢，个人建议可以将错误提示字体设置为红色，如果想让按钮在提示出来之后的位置保持不变，我们可以在一开始设置errormessage的高度为xx，或者给button加上position：absolute；bottom：xx;其他的样式根据个人喜好添加。

js部分：

//点击button按钮处理
$("#denglubutton").click(function()
    $.post("login.json",
        //发送给后端的数据
        
            "name":$("#username").val(),
            "password":$("#password").val()
        ,
        //回调函数
        function(data)
            var json=data[0];
            if(json.success == 0)
                $("#errormessage").text("用户名或密码错误");
            
            else if(json.success== 1)
                window.location.href="index.html";
            
        
    )
)

[
    "username":"xx","success":"1"
]

js部分使用了$.post函数，并且使用login.json来模拟后台返回的json数据,当返回的success = 0时，在登录页面显示“用户名或密码显示错误”，当success =1时，跳转到主页面，如果需要将后台返回的数据保存，可以使用sessionStorage进行存储，例子中后台返回了一个username值，如下代码可以储存：

sessionStorage.setItem("username",json.username);

这样整个前端部分的代码都编写完毕。示图如下：

基于javaweb的web资源库项目——登录功能demo(代码片段)

在上一篇注册功能中已经搭建了整个项目的架构，下面在此架构上快速添加登录功能。文章目录后端登录功能实现控制层（controller)实现业务逻辑层（service）实现数据访问层(dao)实现前端登录功能实现前端注册页... 查看详情

基于javaweb的web资源库项目——登录功能demo(代码片段)

基于php实现的注册登录程序（crud）(代码片段)

文章目录一、实践要求二、实现思路2.1总体思路2.2体系结构2.3开发工具与平台介绍2.3.1SublimeText2.3.2WAMP2.3.3ajax2.3.4JSON2.3.5PHP（超文本预处理器）2.3.6jQuery2.4注册功能2.5登录功能2.6信息修改2.7信息删除2.8数据库三、成果展示3.1... 查看详情

基于php实现的注册登录程序（crud）(代码片段)

基于sessionredis短信登录功能实现，解决session共享，登录状态刷新问题及threadlocal线程隔离(代码片段)

...模型1.3导入后端项目1.4导入前端工程1.5运行前端项目2、基于Session实现登录流程发送验证码：短信验证码登录、注册：校验登录状态:2.1实现发送短信验证码功能页面流程具体代码如下提示：发送验证码@OverridepublicResultsendCode(String... 查看详情

redis实战之session实现短信登录以及redis完善登录功能(代码片段)

...、导入后端项目1.4、导入前端工程1.5、运行前端项目二、基于Session实现登录流程1、发送验证码：2、短信验证码登录、注册：3、校验登录状态: 4、实现发送短信验证码登录功能4.1、页面流程4.2、验证码获取功能 4.3、短... 查看详情

基于puppeteer模拟登录抓取页面(代码片段)

关于热图在网站分析行业中，网站热图能够很好的反应用户在网站的操作行为，具体分析用户的喜好，对网站进行针对性的优化，一个热图的例子（来源于ptengine）上图中能很清晰的看到用户关注点在那，我们不关注产品中热图... 查看详情

vue项目二登录注册功能的实现(代码片段)

...可参考右边的帮助文档文章目录前言一、系统注册功能的实现1.配置注册页面路由2.注册页面的搭建3.api下发送ajax请求的文件创建二、后台数据服务的创建1.app.js文件的建立2.User.js文件的建立3.配置后端接口路由文件(router.js)4.前端... 查看详情

完成一个ideaweb项目登录功能实现(代码片段)

（二）登录功能实现1.编写前端页面若jsp页面中文乱码：在jsp中指定页面显示的编码为GBK添加page命令<%@pagelanguage="java"contentType="text/html;charset=GBK"%>参考：https://www.cnblogs.com/beijiguangyong/archive/2012/03/31/ 查看详情

完成一个ideaweb项目登录功能实现(代码片段)

基于三层架构+java+jsp+servlet+jquery+bootstrap——web资源库项目（注册功能demo)(代码片段)

文章目录项目需求分析概要设计三层架构搭建项目结构三层架构简介后端注册功能实现eclipse配置创建web项目用户表设计与创建数据库和表创建用户实体类控制层（controller)实现业务逻辑层（service）实现数据访问层(dao)... 查看详情

项目——博客系统(代码片段)

...建创建相应的目录，文件，表，导入前端资源实现common工具类实现拦截器验证用户登录实现统一数据返回格式实现加盐加密类实现encrypt方法实现decrypt方法实现SessionUtil类实现注册页面实现前端代码实现后端代码实现... 查看详情

vue项目实战——基于vue3.x+vantui实现一个多功能记账本（登录注册页面，验证码）(代码片段)

基于Vue3.x+VantUI的多功能记账本（四）文章目录基于Vue3.x+VantUI的多功能记账本（四）项目演示1、登录注册页面2、图片验证码3、修改axios4、写到最后（附源码）系列内容参考链接基于Vue3.x+VantUI的多... 查看详情

家居网购项目(代码片段)

家居网购项目家居网购项目家居网购-程序框架图三层架构MVC项目准备程序框架图页面展示功能实现注册功能1.设计用户表2.Dao层对数据库的CRUD3.Service层对业务的操作4.前端页面效果5.前端页面校验（JQuery库）6.后端校验7.注... 查看详情

前端页面模拟浏览器搜索功能ctrl+f实现(代码片段)

<html><head><styletype="text/css">.rescolor:Red;.resultbackground:yellow;</style><scriptsrc="https://code.jquery.com/jquery-3.3.1.min.js"type="text/javascript"></s 查看详情

网页登录功能的实现(代码片段)

...应跳转到log.html登录功能页面 3.接下来，在登录页面实现点击登录按钮后能够成功登录，并跳转回主页的功能。（在登录按钮中绑定script语法，使得实现点击跳转操作。同时，对登录按钮进行简单设计和属性... 查看详情

基于javaweb的web资源库项目——注册功能demo(代码片段)

文章目录项目涉及技术项目需求分析概要设计三层架构搭建项目结构三层架构简介后端注册功能实现eclipse配置创建web项目用户表设计与创建数据库和表创建用户实体类控制层（controller)实现业务逻辑层（service）实现... 查看详情

基于spring+springmvc+mybatis开发书评网已登录用户写短评和短评点赞功能的实现(代码片段)

目录概要一、写短评1.1 MemberController1.2 MemberServiceImpl二、点赞2.1MemberController2.2 MemberServiceImpl三、前端Ajax实现概要已登录用户对于某本书写短评以及对于这本书其他短评的点赞一、写短评1.1 MemberController/***发布新的短评*/@Pos... 查看详情