接受url发送的数据完成登录

星屑幻想

已于 2022-03-22 21:37:15 修改

阅读量425

点赞数

文章标签： javascript

于 2022-03-22 12:11:41 首次发布

本文链接：https://blog.csdn.net/Stardust_fantasy/article/details/123657294

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		账号：<input id="username" name="username" /><br />
		密码：<input id="pasword" name="pasword" /><br />
		<button onclick="login()">登录</button>
		
		<script type="text/javascript">
			
			//创建用户和密码库
			var usernames = ["lili","xiaoli"];
			var passwords = ["12345","23456"];
			
			//用户注册成功了之后才会到页面
			//获取用户传递过来的用户名和密码，使用String的方法可以实现
			//http://127.0.0.1:8020/%E4%BD%9C%E4%B8%9A%E6%94%B9/%E7%99%BB%E5%BD%95%E6%94%B9.html?username=A123456&pasword=123456			
			var url = window.location.href;
			
			//split的功能是按照指定符号切割，因为一个网站只有一个?所以可以将网站切成两个字符串
			//字符串1是url：http://127.0.0.1:8020/%E4%BD%9C%E4%B8%9A%E6%94%B9/%E7%99%BB%E5%BD%95%E6%94%B9.html
			//字符串2是参数：username=A123456&pasword=123456
			var arr = url.split("?");
			
			//我们只需要参数所以只切字符串2，因为下标是从0开始，所以字符串2=arr[1]
			//用&将账户和密码切成两个字符串[username=lilil,pwd=qqqq]
			var nameAndPwd = arr[1].split("&");
			
			//我们只需要用户输入数据，所以用"="将nameAndPwd切开得到两个字符串
			//字符串1是账户：[username,lililili]
			var names = nameAndPwd[0].split("=");
			//字符串2是密码：[pwds,qqqq]
			var pwds = nameAndPwd[1].split("=");
			
			//用push将切开的字符串推进专门存放用户数据的数组尾部
			usernames.push(names[1]);
			passwords.push(pwds[1]);
			
			//检查是否是想要的数据
			console.log(usernames)
			console.log(passwords)
			
			//当用户点击登录的时候，触发点击事件，方法登录方法，
			function login(){
				//用户输入用户名和密码进行登录,
				//在方法中获取用户输入的内容
				var myName = document.getElementById("username").value;
				var myPwd = document.getElementById("pasword").value;
				
				//循环用户名数组，查看数组中是否存储用户输入的内容，如果存在，则记下他的下标
				var index = -1;
				for (var i = 0; i < usernames.length; i++) {
					if(usernames[i] == myName){
						index = i;
						break;
					}
				}
				
				//index == -1说明账号错误
				if(index == -1){
					alert("账号错误")
				}else{
					
					//根据下标获取密码，比较用户输入的密码和数组中的密码，如果一致则登录成功，不一致则失败
					if(passwords[index] == myPwd){
						alert("登录成功")
					}else{
						alert("密码错误")
					}
					
				}
			}
		</script>
		
	</body>
</html>