练习一下登录

周日没事干,去公司敲会代码~~~~~~~,O(∩_∩)O,学无止境,除了奋斗,别无选择!

需要下载一个base64.js插件,密码加密与解密

 <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<style type="text/css">
    			.wrap {
    				width: 300px;
    				margin: auto;
    				border: 1px solid red;
    			}
    
    			.wrap label {
    				display: block;
    				margin: 20px 0;
    			}
    
    			.wrap button {
    				display: block;
    				margin: auto;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="wrap">
    			<label>
    				账号: <input id="username" type="text" placeholder="请输入用户名" name="" id="" value="" />
    			</label>
    			<label>
    				密码: <input id="password" type="password" placeholder="请输入密码" name="" id="" value="" />
    			</label>
    			<label>
    				<input id="rememberPassword" type="checkbox" name="" id="" value="" />记住密码
    			</label>
    			<button id="sub_btn" type="button">登录</button>
    		</div>
    	</body>
    	<script src="js/base64.min.js" type="text/javascript" charset="utf-8"></script>
    	<script type="text/javascript">
    		var username = document.getElementById("username");
    		var password = document.getElementById("password");
    		var rememberPassword = document.getElementById("rememberPassword");
    		var subBtn = document.getElementById("sub_btn");
    		// 首次加载判断是否记住密码
    		let user = localStorage.getItem("username");
    		let pass = localStorage.getItem("password");
    		let rember = localStorage.getItem("rememberPassword");
    		username.value = user; //记住用户名
    		if ( rember == "true") {
    			rememberPassword.checked = true;
    			password.value = Base64.decode(pass)
    		} else {
    			rememberPassword.checked = false;
    		}
    
    		subBtn.onclick = function() {
    			localStorage.setItem("username", username.value);
    			//是否记住密码
    			if (rememberPassword.checked) {
    				localStorage.setItem("password", Base64.encode(password.value));
    				localStorage.setItem("rememberPassword", rememberPassword.checked);
    			} else {
    				localStorage.setItem("password", '')
    				localStorage.setItem("rememberPassword", false);
    			}
    			var oStr = '';
    			var param = {};
    			param = {
    				"username": username.value,
    				"password": password.value,
    				"market_id": 330106001
    			};
    			//这里需要将json数据转成post能够进行提交的字符串  name1=value1&name2=value2格式
    			param = (function(value) {
    				for (var key in value) {
    					oStr += key + "=" + value[key] + "&";
    				};
    				return oStr;
    			}(param));
    			var xhr = new XMLHttpRequest();
    			xhr.open('post', '登录接口url');
    			xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    			console.log(param)
    			//发送请求
    			xhr.send(param);
    			xhr.onreadystatechange = function() {
    				// 这步为判断服务器是否正确响应
    				if (xhr.readyState == 4 && xhr.status == 200) {
    					var res = JSON.parse(xhr.responseText);
    					localStorage.setItem("token", res.token);
    					
    					if (res.status == 1) {
    						alert(res.reason + ', 即将跳转......');
    						setInterval(function() {
    							window.location.href = 'home.html'
    						}, 1000)
    					} else{
    						alert(res.reason);
    						return false
    					}
    					
    				}
    			};
    
    		}
    	</script>
    </html>
发布了54 篇原创文章 · 获赞 21 · 访问量 5万+

猜你喜欢

转载自blog.csdn.net/qq_42816550/article/details/95005571