利用json完成简单登录验证

用json实现简单登录跳转页面，文件结构如下：总目录9_18login，需要将data.json监听起来，


<!-- login.html
    主要实现登录验证，登录成功跳转页面
    页面美化使用Bootstrap，可到官网直接下载
 -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="bootstrap.css">
	<style type="text/css">
		div.wrap{
			width: 400px;
			margin: 100px auto;
		}
		span.help-block{
			color: red!important;
			display: none;
		}

	</style>
</head>
<body>
	<div class="wrap">
		<form>
		  <div class="form-group">
		    <label for="username">Username</label>
		    <input type="text" class="form-control" id="username" placeholder="please enter your name">
		    <span id="helpBlock1" class="help-block">用户名不能为空</span>
		  </div>
		  <div class="form-group">
		    <label for="pwd">Password</label>
		    <input type="password" class="form-control" id="pwd" placeholder="please enter your password">
		     <span id="helpBlock2" class="help-block">密码不能为空</span>
		  </div>
		   <span id="helpBlock3" class="help-block">用户名或密码错误</span>
		 
		  <button type="button" class="btn btn-default" id="login">Login In</button>
		</form>
	</div>

	<script type="text/javascript">
		var nameInput = document.getElementById("username");
		var pwdInput = document.getElementById("pwd");
		var loginBtn = document.getElementById("login");
		var hb1 = document.getElementById("helpBlock1");
		var hb2 = document.getElementById("helpBlock2");
		var hb3 = document.getElementById("helpBlock3");
		var xmlHttp = new XMLHttpRequest();
		var jsonObj = null;
		xmlHttp.onload = function(){
			if(xmlHttp.readyState == 4){ //表示响应完成
				if(xmlHttp.status == 200){ //响应码为200  表示服务器正确响应
					//获取响应内容
					txt = xmlHttp.responseText ;
					//把json字符串解析成json对象
					jsonObj = JSON.parse(txt);
					console.info(jsonObj)
					
				}else{
					console.info('数据返回失败！状态代码：'+xmlHttp.status+'状态信息：'+xmlHttp.statusText);
				}
			}
		}
		xmlHttp.open('GET','http://localhost:3000/usermanager',true);
		xmlHttp.send();

		loginBtn.onclick = function(){

			//获取用户名和密码
			var uname = nameInput.value;
			var pwd = pwdInput.value;
			//判断是否为空
			if(!uname){
				hb1.style.display = 'block';
			}else if(!pwd){
				hb2.style.display = 'block';
			}else{ //登录成功
				for(var i=0;i<jsonObj.length;i++){
					if( uname==jsonObj[i]['name'] && pwd==jsonObj[i]['psw'])
						window.location.href='success.html?name='+uname+'&psw='+pwd;
					else{
						
						hb3.style.display = 'block';
					}
				}
			}


		}


	</script>
</body>
</html>

<!-- 
	success.html 
	登录成功后的页面，主要实现展示json中的所有数据，并完成模糊搜索的功能。页面较为简陋
-->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.search{
			border-radius:10px 20px 0 0;
		}
		.btnSea{
			display: inline-block;
			margin-top: 0px;
			margin-left: 200px;
			width: 40%!important;
		}
		.result{
			background-color: #FF99CC;
			width: 400px;
			height: 50px;
			margin: 30px 200px;
			left: 300px;
		}
		#list{
			margin: 10px 200px;
		}
	</style>
</head>
<body>
	<div class="search">
		<frameset>
			<input type="text" class="form-control btnSea" id="search">
			<input class="btn btn-default" type="button" value="搜索" id="btn">
		</frameset>
	</div>
	<ul id="list">
			
	</ul>
	<div id="result" class="result"></div>
	<script type="text/javascript">
		
		var xmlHttp = new XMLHttpRequest(); //创建一个ajax对象
		var txt = null;
		var ul = document.getElementById('list');
		var btn = document.getElementById('btn');
		
		var result = document.getElementById('result');
		var array = new Array();
		xmlHttp.onreadystatechange = function(){
			if(xmlHttp.readyState == 4){ //表示响应完成
				if(xmlHttp.status == 200){ //响应码为200  表示服务器正确响应
					//获取响应内容
					txt = xmlHttp.responseText ;
					//把json字符串解析成json对象
					var jsonObj = JSON.parse(txt);

					//动态拼接DOM结构
					for(var i = 0;i<jsonObj.length;i++){

						var li = document.createElement("li");
						var txtNode = document.createTextNode( jsonObj[i]['name'] + '      ' + jsonObj[i]['price']);
						array.push(jsonObj[i]['name']);

						li.appendChild(txtNode);
						ul.appendChild(li);

					}

				}else{
					console.info('数据返回失败！状态代码：'+xhr.status+'状态信息：'+xhr.statusText);

				}
			}
		}
		xmlHttp.open('GET','http://localhost:3000/frite',true);

		xmlHttp.send()

		btn.onclick = function(){

			var search = document.getElementById('search').value;

			for(i=0; i<array.length; i++){

				if(array[i].indexOf(search) >= 0)
				{
					result.innerHTML = array[i];
					console.info = '----'
				}
			}
		}


	</script>
</body>
</html>

data.json数据
{
  "usermanager":[
          {
            "name": "admin",
            "psw": "passadmin"
          },
          {
            "name": "root",
            "psw": "root"
          }
        ],
  "frite":[
          {
            "name": "apple",
            "price": "5"
          },
          {
            "name": "banana",
            "price": "3"
          }
        ]
}

原文链接：https://blog.csdn.net/hard_days/article/details/82862992