mysql+php+ajax实现登录(无加密)

最新推荐文章于 2021-02-08 22:08:20 发布

spfLinux

最新推荐文章于 2021-02-08 22:08:20 发布

阅读量563

点赞数

分类专栏： js 文章标签： JS AJAX 登录

本文链接：https://blog.csdn.net/spfLinux/article/details/78466405

版权

js 专栏收录该内容

137 篇文章 3 订阅

订阅专栏

前端：

common.css

body,h1,h2,h3,h4,h5,h6,ul,ol,dl,dd,pre,p{
	margin:0;
	padding: 0;
	border: 0;
}

login1.css

#head {
	margin-left: 200px;
	margin-top: 20px;
	margin-bottom: 20px;
}
#head>span {
	display: inline-block;
	padding-left: 10px;
	font-size: 24px;
	color: #4F4D4E;
}
#main {
	height: 500px;
	background-image: url("../img/login/login1/bg.png");
	background-repeat: no-repeat;
}
#login {
	width: 300px;
	height: 300px;
	position: relative;
	left: 950px;
	top: 120px;
	background-color: rgba(0,0,0,0.3);
}
#login>div {
	color: #FFF;
	width: 80%;
	margin-left: 20px;
}
#d_head span {
	display: inline-block;
	margin-top: 10px;
}
#tip1, #tip2, #tip3 {
	display: inline-block;
	font-size: 10px;
	color: red;
	margin: 0;
	width: 235px;
	height: 10px;
}
#uname, #upwd {
	display: inline-block;
	width: 235px;
	height: 30px;
	margin-top: 10px;
}
.log_btn {
	display: inline-block;
	background: -webkit-linear-gradient(top, #27b0f6 0%, #0aa1ed 100%);
	width: 240px;
	margin-top: 10px;
	color: #FFF;
	border: none;
	border-radius: 2px;
	cursor: pointer;
	text-align: center;
	line-height: 35px;
	font-weight: bold;
}

common.js

function $(id) {
	return document.getElementById(id);
}
function createXhr(){
	var xhr;
	if(window.XMLHttpRequest){
		xhr = new XMLHttpRequest();
	}else{
		xhr = new ActiveXObject("Microsoft XMLHttp");
	}
	return xhr;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/common.css">
	<link rel="stylesheet" href="css/login1.css">
</head>
<body>
	<!-- IE中效果很不好 -->
	<div id="head">
		<img src="img/login/login1/logo.png" alt="">
		<span>欢迎登录</span>
	</div>
	<div id="main">
		<div id="login">
			<div id="d_head">
				<span>登录学子商城</span>
				<span>新用户注册</span>
			</div>
			<!-- 登录 -->
			<div id="d_uname">
				<input type="text" name="uname" id="uname" placeholder="请输入您的用户名" οnblur="checkuname()">
				<br/>
				<span id="tip1"></span>
			</div>
			<div id="d_upwd">
				<input type="password" name="upwd" id="upwd" placeholder="请输入您的密码" οnblur="checkupwd()">
				<br/>
				<span id="tip2"></span>
			</div>
			<div>
				<input type="submit" value="登录" class="log_btn" οnclick="checklogin()">
				<span id="tip3"></span>
			</div>
			
		</div>
	</div>
	
	<script src="js/common.js"></script>
	<script>
		function checkuname() {
			var uname = $("uname").value;
			if(uname == ""){
				$("tip1").innerHTML = "用户名不能为空";
			}else{
				$("tip1").innerHTML = "";
			}
		}
		function checkupwd() {
			var upwd = $("upwd").value;
			if(upwd == ""){
				$("tip2").innerHTML = "密码不能为空";
			}else{
				$("tip2").innerHTML = "";
			}
		}

		function checklogin() {
			var flag = 0;
			var xhr = createXhr();
			var uname = $("uname").value;
			var upwd = $("upwd").value;
			if(uname == ""){
				$("tip1").innerHTML = "用户名不能为空";
				return;
			}
			if(upwd == ""){
				$("tip2").innerHTML = "密码不能为空";
				return;
			}
			xhr.open("post","login1.php",false);
			xhr.onreadystatechange = function() {
				if(xhr.readyState == 4 && xhr.status == 200){
					var resText = xhr.responseText;
					if(resText == "0"){
						$("tip3").innerHTML = "用户名或密码错误";
					}else if(resText == "1"){
						flag = 1;
					}else if(resText == "-1"){
						flag = -1;
					}
				}
			}
			var str = "";
			str += "uname="+uname+"&upwd="+upwd;
			xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			xhr.send(str);
			if(flag == 1){
				window.location.href = "index.html";
			}
			if(flag == -1){
				window.location.href = "warn/warn.html";
			}
		}
	</script>
</body>
</html>

后端：

init.php

<?php 

	$conn = mysqli_connect("127.0.0.1","root","","login",3306);
	$initsql = "SET NAMES UTF8";
	mysqli_query($conn,$initsql);
?>

login1.php

<?php 

	require("init.php");

	@$uname = $_REQUEST["uname"];
	@$upwd = $_REQUEST["upwd"];

	$sql = "SELECT * FROM login_users WHERE uname ='$uname' AND upwd = '$upwd'";
	$result = mysqli_query($conn,$sql);

	if($result === false){
		echo -1;
	}else {
		$count = mysqli_affected_rows($conn);
		if($count == 0){
			echo 0;
		}else if($count > 0){
			echo 1;
		}
	}
?>