用户登录验证功能_PHP中文网手记

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ajax表单验证</title> <style type="text/css"> </style>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ajax表单验证</title>
		<style type="text/css">
		</style>
	</head>
	<body>
<form action="">
	用户名: <input type="email" name="email" >
	<br>
	&nbsp; 密码: <input type="password" name="password">
	<br>
	<button type="submit" name="submit" onsubmit="return false;">登录</button>
	<p></p>
</form>
<script type="text/javascript">
	
	let btn = document.getElementsByTagName('button').item(0);
	let p = document.getElementsByTagName('p')[0];
	
	btn.onclick = function(){
		// 1创建 xhr
		let xhr = new XMLHttpRequest();
		
		//2 监听响应状态
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4){ //准备就绪
				//判断响应结果
				if(xhr.status == 200){
					// 响应成功,通过xhr对象的responseText属性可以获取响应的文本,此时是html文档内容
					let data =JSON.parse(xhr.responseText);
					let color = 'red';
					p.style.display = 'block';
					if(data.status == 1){
						color = 'green';
					}
					p.innerHTML = data.msg;
					p.style.color = color;
					
					btn.setAttribute('disabled',true); //等效语法
					
					setTimeout(function(){
						btn.disabled = false;
						p.style.display = 'none';
						if(data.status == 1){
							location.href = "admin.html";
						}
						
					},2000)
				}else{
					alert("请求失败"+xhr.status);
				}
			}
		}
		
		//3  设置请求参数  第三个参数是异步 true  同步false
		xhr.open('post','*****',true);
	
		//4 设置头信息,将内容类型设置为表单提交方式
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		
		// 5 发送请求
		let data = {
			email : document.getElementsByName('email')[0].value,
			password : document.getElementsByName('password')[0].value
		}
		
		//转换为字符串
		let data_json = JSON.stringify(data);
		
		//加个data=  这样成为键值对 方便后台拿取数据	
		xhr.send('data='+data_json);
			
		//btn.disabled = true; //禁用按钮,防止重复点击
		return false;
	}
</script>		
	</body>
</html>

<?php
$servername = "127.0.0.1";
$username = "*******";
$word = "*******";
$table = "user";

header('Content-Type: text/html; charset=utf-8');
header('Access-Control-Allow-Origin:*'); //设置全部域名可请求
header('Access-Control-Allow-Methods: GET, POST'); //设置请求方式
header('Access-Control-Allow-Credentials:true'); 




// 创建连接
$conn = new mysqli($servername, $username, $word);
 

$user =  json_decode($_POST['data']);  //转换为对象
$email = $user->email;
$password = $user->password;

if(!$email){
  	echo json_encode(['status'=>0,'msg'=>'请输入邮箱']) ;
  	exit;
	$email = "test1";
}

if(!$password){
  	echo json_encode(['status'=>0,'msg'=>'请输入密码']) ;
  	exit;
	$password = "1.11";
}

// 检测连接
if ($conn){
    //echo "链接成功";
  //设置编码
  	$cc = $conn->query("set names utf8;");
  //选库
  	$cc = $conn->query("use ****;");
  //var_dump($cc);  //执行成功
  
  	$sql = "SELECT * FROM `user` WHERE name='{$email}' AND menoyNum={$password}";
  //执行sql语句
  	$res = $conn->query($sql);
  	if($res){
    	$row = null;
  		$row = mysqli_fetch_all($res);
      	echo json_encode(['status'=>1,'msg'=>'登录成功,正在跳转...']) ;
    }else{
    	echo json_encode(['status'=>0,'msg'=>'邮箱或密码错误,登录失败!']) ;
    }
    
}else{
  die("连接失败: " . $conn->connect_error);
  //设置编码为utf8
}
exit;
?>

批改老师：韦小宝批改时间：2019-02-11 09:19:38
老师总结：写的很不错使用ajax进行无刷新提交，这里的form标签甚至都可以不用了！

用户登录验证功能

热门词条