基于Jquery实现登录功能的前端页面

本篇文章讲解如何用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);

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

基于Jquery实现登录功能的前端页面相关推荐

基于jQuery.i18n.properties插件实现前端页面国家化
一.简介在介绍jQuery.i18n.properties 之前,我们先来看一下什么是国际化.国家化英文单词为:Internationalization,又称 i18n,"i"为 ...
基于html+css的购物网站前端页面【折扣社】前端网站
2014年学生时代学前端的时候写的,现在回头来看,很多地方都没有考虑到,比如兼容性,分布式布局现在已做PHP开发,在回头来看代码,发现那个时候的代码稚嫩, 慢慢的有时间了,应该做代码重构,应该尝试 ...
【Redis学习02】基于session和基于redis实现登录功能
文章目录前言 1. 基于session实现短信登录功能 1.1 发送短信验证码 1.2 短信验证登录 1.3 登录校验功能 2. 集群的Session问题 3. 基于redis实现共享session ...
商品增加库存功能，前端页面要求显示表单修改库存（一）
该贴为学习记录贴,记录博主开发项目时遇到的各种问题和解决方法需求:对商品购买增加库存功能,并且在编辑商品页面中,根据商品拥有的规格生成From表单,用户可在From表单中修改商品各个规格的库存. 原 ...
商品增加库存功能，前端页面要求显示表单修改库存（二）
该贴为学习记录贴,记录博主开发项目时遇到的各种问题和解决方法需求:对商品购买增加库存功能,并且在编辑商品页面中,根据商品拥有的规格生成From表单,用户可在From表单中修改商品各个规格的库存. 在 ...
微信小程序登录功能的前端设计与实现
导语 | 登录/注册这模块就像个冰山,我们通常以为它就是「输入账号密码,就完成登录了」,但实际下面还有各种需要考虑的问题.作为应用的基础能力,登录/注册的设计需要有足够的健壮性,避免出现全站性阻塞.同 ...
vue实现网页端企业微信扫码登录功能（前端部分）
时至今日,企业微信在企业日常工作中的使用越来越频繁也越来越重要,不少企业已使用企业微信进行着日常的工作安排管理.在这种背景下,各类系统和企业微信对接的需求也不断增加,今天要说的就是一个比较常见的需求 ...
JavaWeb网上图书商城完整项目--day02-14.登录功能的login页面处理
1.现在注册成功之后,我们来到登录页面,登录页面在于在登录页面.我们也需要向注册页面一样对登录的用户名.密码验证码等在jsp页面中进行校验,校验我们单独放置一个login.js文件中进行处理,然后 ...
基于SpringBoot,vue从数据库到前端页面代码编写实战
文章目录后端数据库sql语句及查询 mapper.xml文件 domain层 MyEmp.java文件中在mapper.java文件下添加接口在service层加上接口在Controller ...

基于Jquery实现登录功能的前端页面

基于Jquery实现登录功能的前端页面相关推荐

最新文章

热门文章