登陆 记住密码 ajax

最新推荐文章于 2022-01-13 17:55:07 发布
最新推荐文章于 2022-01-13 17:55:07 发布
阅读量223 收藏
点赞数
文章标签： 登录逻辑 Cookie jQuery 记住密码 AJAX验证
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZhYa24/article/details/119606727
版权

逻辑

1.点击登陆,根据后端请求的相应,判定出登陆成功或失败.若成功,就检查记住密码按钮是否勾上,如果勾上,则使用cookies保存,如果没有勾上,就清理cookies的信息
2.在下一次打开登陆页面时,网站会自动从 cookies提取出数据填入input里面.

代码

<!doctype html>
<html class="x-admin-sm">
	<head>
		<meta charset="UTF-8">
		<title>后台登录-X-admin2.2</title>
		<meta name="renderer" content="webkit|ie-comp|ie-stand">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport"
			content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<link rel="stylesheet" href="../../css/font.css">
		<link rel="stylesheet" href="../../css/login.css">
		<link rel="stylesheet" href="../../css/xadmin.css">
		<script type="text/javascript" src="../../js/jquery.min.js"></script>
		<script src="../../js/jquery.cookie.js"></script>
		<script src="../../lib/layui/layui.js" charset="utf-8"></script>
		<!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
	</head>
	<body class="login-bg">

		<div class="login layui-anim layui-anim-up">
			<div class="message">员工之家登陆</div>
			<div id="darkbannerwrap"></div>
			<div class="layui-row">
				<div class="layui-col-md12">
					<input id="username" name="username" placeholder="用户名" type="text" lay-verify="required"
						class="layui-input">
					<hr class="hr15">
				</div>
			</div>
			<div class="layui-row">
				<div class="layui-col-md12">
					<input id="password" name="password" lay-verify="required" placeholder="密码" type="password"
						class="layui-input">
					<hr class="hr15">
				</div>
			</div>
			<div class="layui-row">
				<div class="layui-col-md1">
					<input type="checkbox" lay-filter="remember" name="remember_user" id="remember"
						lay-skin="primary" title="记住密码">
				</div>
				<div class="layui-col-md5">
					<p>记住密码</p>
				</div>
				<div class="layui-col-md6" style="text-align: right;">
					<p>忘记密码</p>
					<hr class="hr15">
				</div>
			</div>
			<hr class="hr15">
			<input id="login" value="登录" lay-submit lay-filter="login" style="width:100%;" type="submit">
			<hr class="hr20">
			<input value="刷脸登录" lay-submit lay-filter="brush_face_login" style="width:100%;" type="submit">
			<hr class="hr20">
			<div class="layui-row">
				<div class="layui-col-md12" id="message">

				</div>
			</div>
		</div>

		<script>
			$(function() {
				//检查cookie
				$(document).ready(function() {
					console.log("ok");
					console.log($.cookie("username"));
					if ($.cookie("username") != null) {
						console.log("ok");
						//往input#username填入存到cookie中username的值
						$("#username").val($.cookie("username"));
						//往input#password填入存到cookie中username的值
						$("#password").val($.cookie("password"));
						//让“记住我”的复选框保持被选中状态
						$('input:checkbox').attr("checked", true);
					}
				});


				$("#login").on("click", function() {
					if ($("#password").val() == "" || $("#username").val() == "") {
						if ($("#password").val() == "") {
							$("#message").html("密码不能为空")
						}
						if ($("#username").val() == "") {
							$("#message").html("用户名不能为空")
						}
						return false
					}

					$.ajax({
						//发出请求时的接口的url
						//url: "http://localhost:8080/employee/add",
						//url: "https://www.fastmock.site/mock/3ed295aee6d14fb413a810520c35c035/api/login",
						type: "post",
						data: {
							"username": $("#username").val(),
							"password": $("#password").val(),
						},
						dateType: "json",
						success: function(res) {
							if (res.code == 200) {
								if ($("#remember").is(":checked")) {
								        var str_username = $("#username").val();
								        var str_password = $("#password").val();
								        $.cookie("rmbUser", "true", { expires: 7 }); //存储一个带7天期限的cookie
								        $.cookie("username", str_username, { expires: 7 });
								        $.cookie("password", str_password, { expires: 7 });
								    }
								    else {
								        $.cookie("rmbUser", "false", { expire: -1 });
								        $.cookie("username", "", { expires: -1 });
								        $.cookie("password", "", { expires: -1 });
								    }

								//location.href = '../员工管理/员工列表.html'
								alert("登陆成功")
							} else {
								alert("账号密码错误")
								location.reload()
							}
						}
					})
				})
			})
		</script>
		<!-- 底部结束 -->
		<script>
			//百度统计可去掉
			var _hmt = _hmt || [];
			(function() {
				var hm = document.createElement("script");
				hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
				var s = document.getElementsByTagName("script")[0];
				s.parentNode.insertBefore(hm, s);
			})();
		</script>
	</body>
</html>
zYan_g
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
登陆注册，修改密码模版
06-22
此外，注册时可能需要验证码防止机器人，登录时可能提供“记住我”选项或找回密码功能。 综上所述，这个压缩包提供的模版涵盖了构建一个基本且大气的登录、注册和修改密码功能所需的主要元素。开发者可以根据自己的...
LayUI记住密码功能(已实现)
Linlietao0587的博客
04-25 2272
文章目录前言一、效果与逻辑二、使用步骤1.html2.js三、总结四、补充 前言 为了提高客户用户体验，每一个管理系统都有自己的记住密码功能。让客户减少账号与密码的输入，从而提高客户的体验 一、效果与逻辑 效果 逻辑 没有选择记住密码，会记录用户名 有选择记住密码，会记住密码，下次不用输入 二、使用步骤 1.html 代码如下（示例）： <form class="layui-form" action="" lay-filter="add_form"> &l
使用Ajax完成一个简单的用户名密码登录验证
qq_43182827的博客
07-08 3244
Ajax介绍 Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 举例： 使用Ajax做一个简单的用户名密码登录验证 1，建立一个web工程，导入相关依赖， 重点： 记得导入json依赖，我们这里
layui实现记住密码功能
顽强的化石的博客
12-29 1148
登录的时候大部分都是记住密码这个功能的，最近用layui写项目，顺便把这个常用的功能记录下 准备 需要layui、jquery.min.js、jquery.cookie.js jquery.cookie.js的下载地址为：jquery.cookie.js 前端样式 这里我把我的form表单展示出来，引用的时候jquery.cookie.js放在jquery下 <form class="layui-form" lay-filter="add_form" > &
Layui登陆记住密码
单筱风的博客
01-23 2903
1.引入文件（jquery，jquery.cookie.js） 注意顺序（未包含layui，自行添加） <script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js" th:src="@{/lib/jquery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script> <sc...
layui登录（生成验证码、记住密码、登录、退出）学习笔记
宁
01-15 4612
页面 <html class="loginHtml"> <head> <meta charset="utf-8"> <title>登录页</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name
ajax实现用户登录注册
07-28
在Web开发中，AJAX（Asynchronous JavaScript and XML）是一种技术，它允许我们在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容...记住，实践是学习的关键，尝试修改和扩展代码，使其适应不同的应用场景。
ajax登陆
05-22
在这个“ajax登陆”的示例中，我们将深入探讨如何利用Ajax实现用户登录功能，同时结合Visual Studio 2003（VS2003）和SQL Server 2000数据库进行后端处理。 ### 1. Ajax 基础 Ajax的核心是JavaScript的...
Python实现csdn模拟登陆
12-27
'RememberMe': 'on' # 如果CSDN有记住密码选项，这里设置为'on' } ``` 5. **发送POST请求**：使用requests库向登录接口发送POST请求，并携带登录数据。同时，可能需要设置Cookie以保持会话状态。 ```python import ...
ajax+php技术的登陆实例
06-11
**Ajax+PHP技术的登录实例详解** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下...在实际项目中，还可以扩展这个例子，比如添加验证码、记住密码、自动填充等功能，以满足更复杂的需求。
vue项目实现表单登录页保存账号和密码到cookie功能
10-18
主要介绍了vue项目实现表单登录页保存账号和密码到cookie功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
LayuiAdmin的登录、注册、忘记密码、退出模块（源码实例）
热门推荐
ZLZQ_Yuan
10-19 2万+
LayuiAdmin基本模块登录模块注册模块忘记密码模块退出模块登录凭证 关于LayuiAdmin的登录、注册等模块，是有自己的规范的，还有些诸如登陆拦截获取凭证等小细节。所以专门把这块整理了出来。 另，各模块用的都是Layui自带的html代码，文章重心主要放在js部分，旨在给出一个实际样例。 Tip1. 在LayuiAdmin模板源码中start\json\user路径下，有各模块返回的数据格式样例。 Tip2. 在LayuiAdmin模板源码中src\controller\路径下，有一些封装好的j
使用cookie实现记住密码功能，以及可能出现的问题500
Love666Code的博客
05-28 910
java使用cookie实现记住密码： 后端： String username = request.getParameter("username"); String password = request.getParameter("password"); String remFlag = request.getParameter("remFlag"); if("1".eq...
解决记住登录账号密码的网站，会将账号密码回显到输入框问题
Lear的博客
09-18 7664
场景：某个网站登录时在浏览器会选择保存密码，则在页面上的输入框内会将该网站保存过的账号或密码回显。一般这种需求对用户是不需要的，所以下面为解决此问题的方法????： 1.input 标签不要用id选择器，去掉就不会自动回填浏览器自动保存的用户名,密码了。可以用class类选择器。 2.解决密码回显： 2.1“大部分浏览器都是根据表单域的type="password"来判断密码域”，因此解决办...
用户密码的提交
qq_58849698的博客
08-07 108
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc...
layui 前后端分离项目 实现登录记住用户名和密码操作
m0_56869255的博客
01-13 1222
前端页面： 实现操作首先导入 jquery.cookie.js这个插件 下载网址:jQuery Cookie | jQuery Plugin Registry 再看下面部分js代码 有要注意的是监听登录操作最后面正常返回的 return false 但是使用jquery.cookie.js这个插件return true表单是可以提交了，但如果用的$.ajax请求会失效异常，解决方法是把button标签 改为使用input type="button"，layui的form赋值用的是l..
ajax验证用户登陆及记住密码
molaifeng的专栏
08-28 9363
一个人独自负责一个项目，正好记下以前没实现过的技术点，今天就从登陆功能开始，前端是js验证，后端是php脚本验证并且添加了记住密码功能。 从上图可以看出，前端主要的技术点是验证用户名和密码是否输入并给予提示，为了提高用户体验，用户一进入该页面，便自动聚焦到用户名输入框，同时在密码输入框里绑定个onkeypress事件，也就是用户输入完密码后，按回车键就可以完成操作，当然了这里做的事a
利用JQuery记住用户名及密码以实现自动登录
如风
08-01 1万+
实现此功能需要引用JQuery.js与jquery.cookie.js插件，具体代码如下： <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>
web实现登录，记住密码功能（cookie）
大海无量的博客
09-14 2万+
界面： &lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="UTF-8"&gt;         &lt;title&gt;登录页面&lt;/title&gt;         &lt;link rel="stylesheet" href="lay
idea jsp记住密码
最新发布
09-02
- *1* *2* [登录页面中“记住我”功能实现（本文以idea开发工具+SSM框架+ajax+jsp+Cookie为Demo）](https://blog.csdn.net/baidu_41773019/article/details/81948190)[target="_blank" data-report-click={"spm":...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值