jQuery+ajax实现用户登录验证

最新推荐文章于 2023-07-11 17:04:48 发布

清砾

最新推荐文章于 2023-07-11 17:04:48 发布

阅读量1.8k

点赞数 5

分类专栏：技术小妙招文章标签： html jquery ajax php

本文链接：https://blog.csdn.net/m0_46690660/article/details/108476133

版权

技术小妙招专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录界面</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			h3{
				display: block;
				width: 100%;
				height: 50px;
				text-align: center;
				line-height: 50px;
				background-color: cornflowerblue;
				cursor: move;
			}
			#login{
				width: 500px;
				height: 270px;
				margin: 0 auto;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -250px;
				margin-top: -140px;
				border: 1px solid #6495ED;
				background-color: #FFFFFF;
				display: block;
				-moz-user-select: none;
				-ms-user-select: none;
				-webkit-user-select: none;
			}
			table{
				margin-top: 50px;
				position: absolute;
				top: 50px;
				left: 0;
				width: 100%;
				height: 150px;
				text-align:center;
			}
			tr,td{
				border: none;
			}
			tr{
				height: 50px;
			}
			td{
				padding: 0 5px 0 5px;
			}
			#bg{
				width: 100%;
				height: 100%;
				background-color:rgba(0,0,0,0.2);
				position: absolute;
				top: 0;
				left: 0;
			}
			span{
				width: 100px;
				height: 16px;
				display:block;
				margin-bottom: 12px;
			}
			body{
				width: 100%;
				height: 100%;
			}
			.inpt{
				width: 300px;
				height: 30px;
				outline: none;
				border: 1px solid darkturquoise;
			}
			.red{
				color: red;
				font-size: 12px;
			}
			.btn{
				outline: none;
				width: 60px;
				height: 25px;
				border: 1px solid #00CED1;
			}
		</style>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function () {
				// 定义变量
				var $mX;
				var $mY;
				var $move = false; // true是可以移动登录框
				// 鼠标按下事件
				$("h3").mousedown(function (event) {
					$("#login").css("opacity",0.5); // 改变透明度
					$move = true;
					// 得到鼠标与登录框原点之间的距离
					$mX = event.pageX-parseInt($("#login").css("left"));
				    $mY = event.pageY-parseInt($("#login").css("top"));
				})
				// 鼠标移动事件
				$(document).mousemove(function (event) {
					// 得到登录框要移动的量
					var x = (event.pageX-$mX);
					var y = (event.pageY-$mY);
					console.log(x,y)
					if($move){
						if(x>0&&y>0){
							$("#login").css("left",x+"px")
							$("#login").css("top",y+"px")
						}
						
					}
				}).mouseup(function () {
					// 鼠标弹起事件
					$move = false;
					$("#login").css("opacity",1);
				})
				
//				异步请求
				$(":submit").click(function () {
					$.ajax({
						type:"get",
						url:"data.php",
						data:{"name":$("#user").val(),"password":$("#pwd").val()},
						dataType:"json",
						success:function (data) {
							console.log("成功：",data);
							/*if (data.usermsg==1&&data.pwdmsg==1) {
								$(location).prop("href","index1.html");
							} else{
								$("span").text("用户名或密码错误").prop("class","red");
							}*/
							if (data.usermsg==1&&data.pwdmsg==1) {
								$(location).prop("href","index1.html");
							} else if(data.usermsg==0&&data.pwdmsg==0){
								$("span").text("用户名或密码错误").prop("class","red");
							} else if(data.usermsg==0&&data.pwdmsg==1){
								$("span").text("该用户不存在").prop("class","red");
							} else if(data.usermsg==1&&data.pwdmsg==0){
								$("span").text("密码错误").prop("class","red");
							}
						},
						error:function (err) {
							console.log("失败",err);
						}
					})
				})
				$(":reset").click(function () {
					$("span").text("");
				})
				
			})
		</script>
		
	</head>
	<body>
		<div id="bg"></div>
		<form action="javascript:;" id="login" method="get">
			<h3>欢迎登录！</h3>
			<table border="0" cellspacing="0" cellpadding="0">
				<tr>
					<td align="right">用户名：</td>
					<td align="left"><input type="text" class="inpt" id="user" name="userName"/></td>
				</tr>
				<tr>
					<td align="right">密&nbsp&nbsp&nbsp码：</td>
					<td align="left"><input type="password" class="inpt" id="pwd" name="pwd"/></td>
				</tr>
				<tr>
					<td align="center" colspan="2">
						<span></span>
						<input type="submit" class="btn" value="提交"/>
						&nbsp&nbsp&nbsp&nbsp&nbsp
						<input type="reset" class="btn" value="重置"/>
					</td>
				</tr>
			</table>
		</form>
	
	</body>
</html>

<?php
	$user="将军";
	$password="1234321";
	$username=$_GET["name"];
	$pwd=$_GET["password"];
	$usermsg=0;
	$pwdmsg=0;
	if($user==$username){
		$usermsg=1;
	}
	if($password==$pwd){
		$pwdmsg=1;
	}
	echo json_encode(array("usermsg"=>$usermsg,"pwdmsg"=>$pwdmsg));
?>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>登录成功页面</title>
	</head>
	<body>
		<span id="" style="font-size: 60px;color: #008000;">
			登录成功
		</span>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>登录失败页面</title>
	</head>
	<body>
		<span id="" style="font-size: 60px;color: #FF0000;">
			登录失败
		</span>
	</body>
</html>

清砾

关注

5
点赞
踩
28

收藏

觉得还不错? 一键收藏
0
评论
jQuery+ajax实现用户登录验证

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>登录界面</title> <style type="text/css"> *{ margin: 0; padding: 0; } h3{ display: block; width: 100%; height: 50px; te
复制链接

扫一扫

专栏目录