Ajax+Php+Mysql实现简单的登录界面无刷新验证

最新推荐文章于 2022-10-31 12:47:45 发布

马铃薯煲土豆

最新推荐文章于 2022-10-31 12:47:45 发布

阅读量1.2k

点赞数

分类专栏： PHP

本文链接：https://blog.csdn.net/weixin_42356649/article/details/89675717

版权

PHP 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

前端+Ajax代码

<!DOCTYPE html>
<html>
<head>
	<title>宠物商店管理界面</title>
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<meta charset="utf-8">
</head>
<body onload="document.getElementById('userid').focus();"> //定位焦点
<div id="total">
<header id="header"><h3>XX管理系统</h3></header>
<div id="left">

	<form id="login" action="" method="post" onsubmit="return false" > //这里阻止里表单的提交

		<table>
			<tr>
				<td colspan="2"><div><h1>登录</h1></div><td>
			</tr>
			<tr>
				<td>账号：</td>
				<td><input type="text" id="userid"  name="useid" required><br><span id="msg"></span></td>
			</tr>
			<tr>
				<td>密码：</td>
				<td><input type="password" id="userpsw" name="usepsw" required><br>
				<span id="msg1"></span></td>
			</tr>
			<tr>
				<td colspan="2"><input type="submit" name="sub" id="submit" value="登录" ></td>
			</tr>

		</table>
	</form>
</div>
<div id="content"></div>
</div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
	
	$(document).ready(function() {

	//ajax阻止表单提交并异步给出提示！
		$('#submit').click(function(event) {
		     var msg1=$('#msg1').text();
		//阻止表单提交
		// if(msg.length!=0||msg1.length!=0){
		//     return false;
		// }else{
		// 	return true;
		// }
		if(msg1.length==0){
		$.ajax({
			url: 'test/PDO.php',
			type: 'GET',
			data: {user:$('#userid').val(),uspw:$('#userpsw').val()},
			//async:false,
		})
		.done(function(msg) {
			 // $("#msg1").html(typeof $panduan+'  '+typeof $flag);
			  if ($trim(msg)==‘true’) {    //当你返回不是JSON的对象时而是通过echo输出来返回data时返回的字符串将会带有空格或是换行，因此要使用$trim()来清除多余的空格。
				location.href="PHP/operate.html";
			 }else{
			 	$("#msg1").html("<img src='img/index2.png' /><font color=red  class='msg'>密码错误！</font>");
			 }
			 
		})
		.fail(function(data) {
			console.log("false");
		})
		.always(function() {
			console.log("complete");
		});
		}
		});

		//验证账号长度和账号是否存在
	$("#userid").blur(function() {
		var uid=$("#userid").val();	
		if(uid.length>=6&&uid.length<=12){
			$("#msg").text("");
				$.ajax({
		url: 'PHP/Ajaxdemo1.php',
		type: 'GET',
		data: {user: $('#userid').val()},
	})
	.done(function(data) {
		$("#msg").html(data); 
	})
	.fail(function() {
	})
	.always(function() {
	});
		}else{
			$("#msg").text("ps:  账号长度6~12").addClass('msg')
		}
	});
	//验证密码长度
	$('#userpsw').blur(function(event) {
		var upsw=$('#userpsw').val();
		if(upsw==null||upsw==""){
			$('#msg1').text('ps:请输入密码').addClass('msg')
		}else{
			if (upsw.length>=6&&upsw.length<=20) {
				$('#msg1').text('');
			}else{
				$('#msg1').text('ps:  密码长度6~20').addClass('msg')
			}
		}
	});
	});
</script>
</body>
</html>

PHP使用PDO处理Mysql
Ajaxdemo1.php判断用户名是否存在

<?php
header("Content-type:text/html;charset=utf-8");

$user=$_GET['user'];
$dbms='mysql';
$host='localhost:3306';
$dbName='animal';
$user='root';
$pass='';
$dsn="$dbms:host=$host;dbname=$dbName";
//GET方式获取数据（取决于异步提交时提交方式）
if($_GET['user'])
{
	$uid=$_GET['user'];
	try {
			 $dbh = new PDO($dsn, $user, $pass); 
	 //初始化一个PDO对象
			 $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
	$cusr=$dbh->query("select id from admin where id='$uid'");
	$row1=$cusr->fetch(PDO::FETCH_BOTH);
	if(!empty($row1[0])){
		echo "<img src='img/index1.png' /><font color=#50f05A style='font-size:13px;'>账号可使用！</font>";
	}else{
		echo "<img src='img/index2.png' /><font color=red  class='msg'>不存在该账号</font>";
	}
    $dbh = null;
		// if($user=="admincxh")
		// echo "<img src='img/index1.png' /><font color=#50f05A style='font-size:13px;'>账号可使用！</font>";
		// else
		// echo "<img src='img/index2.png' /><font color=red  class='msg'>不存在该账号</font>";
	} catch (PDOException $e) {
		die("ERROE!:".$e->getMessage()."<br/>");
	}
	}else{}
?>

PDO.php Ajax异步处理密码问题

<?php
header("Content-type:text/html;charset=utf-8");

$user=$_GET['user'];
$dbms='mysql';
$host='localhost:3306';
$dbName='animal';
$user='root';
$pass='';
$dsn="$dbms:host=$host;dbname=$dbName";
//GET方式获取数据（取决于异步提交时提交方式）
if($_GET['user'])
{
	$uid=$_GET['user'];
	$uspw=$_GET['uspw'];
	try {
			 $dbh = new PDO($dsn, $user, $pass); 
	 //初始化一个PDO对象
			 $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
	$cpwd=$dbh->query("select id from admin where id='$uid' and pasw='$uspw'");
	$row2=$cpwd->fetch(PDO::FETCH_BOTH);
	if(!empty($row2[0])){
		echo 'true'; //正确
	}else{
		echo 'false';//错误
	}
    $dbh = null;
		// if($user=="admincxh")
		// echo "<img src='img/index1.png' /><font color=#50f05A style='font-size:13px;'>账号可使用！</font>";
		// else
		// echo "<img src='img/index2.png' /><font color=red  class='msg'>不存在该账号</font>";
	} catch (PDOException $e) {
		die("ERROE!:".$e->getMessage()."<br/>");
	}
	}else{}
?>

运行结果：
在这里插入图片描述

马铃薯煲土豆

关注

0
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
Ajax+Php+Mysql实现简单的登录界面无刷新验证

前端+Ajax代码<!DOCTYPE html><html><head> <title>宠物商店管理界面</title> <link rel="stylesheet" type="text/css" href="css/index.css"> <meta charset="utf-8"></he...
复制链接

扫一扫