如何制作动态的无重定向登录页面?

时间:2019-06-26 11:48:46

标签: html authentication server-side

我想构建一个静态的登录页面。 我的意思是在我按“登录”后,如果我输入 详细的是拧'我想立即看到它,而无需重定向。 例如Google的登录页面,甚至是Stackoverflow的登录页面。 我该怎么做?用什么编程语言?应该是服务器端还是客户端?

1 个答案:

答案 0 :(得分:1)

如果您想得到错误的凭据而无需重定向的结果,则可以对逻辑页面使用AJAX调用 AJAX是异步JavaScript和XML,它们可以调用后端或服务器,而无需重新加载页面并获取结果或数据

以下是ajax的简短代码示例,在login.php中,您必须编写用于数据库连接和登录逻辑的后端代码

function submitForm() {		
		var data = $("#login-form").serialize();				
		$.ajax({				
			type : 'POST',
			url  : 'login.php',
			data : data,
			beforeSend: function(){	
				$("#error").fadeOut();
			},
			success : function(response){						
				if(response=="ok")
				{									
					//do redirection 
				} 
				else 
				{	
					$("#error").html(response);
				}
			}
		});
		return false;
	} 
<!DOCTYPE html>
<html>
<head>
	<title>Sample Login</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>

	<form class="form-login" method="post" id="login-form">
		<h2 class="form-login-heading">User Log In Form</h2><hr />
		<div id="error"></div>
		<div class="form-group">
			<input type="email"  placeholder="Email address" name="user_email" id="user_email" />
			
		</div>
		<div class="form-group">
			<input type="password"  placeholder="Password" name="password" id="password" />
		</div>
		<hr />
		<div class="form-group">
			<button type="button" name="login_button" id="login_button" onclick="submitForm()"> Sign In</button> 
		</div> 
	</form>		


</body>
</html>