使用原生AJAX 发送异步请求实现 常用的用户登录效果

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用原生AJAX 发送异步请求实现 常用的用户登录效果相关的知识，希望对你有一定的参考价值。

 

html部分

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>...</title>
  <style type="text/css">
	.modal{
		position:fixed;
		left:0;top:0;bottom:0;right:0;
		background:rgba(0,0,0,.2);
		display:none;
	}
	.modal.active {
		display:block;
	}
	.modal-dialog{
		width:350px;
		margin:10% auto;
	}
	.modal-content{
		background:#fff;
		border-radius:5px;
		padding:30px;
	}
	.erro{
		width:100%;
		color:red;
	}
  </style>
 </head>
 <body>
		<p id="loginArea"> 
			<a href="#" id="btLogin">用户登录</a>
		</p>
		<div class="modal" id="modalLogin">  <!--模态框遮罩层-->
			<div class="modal-dialog">
				<div class="modal-content">
					<br>
						手机号: <input type="text" name="phone"><br>
						密码号: <input type="passwrod" name="pwd"><br>
						<input id="sub" type="button" value="提交">
				</div>	
			</div>
		</div>
		<script type="text/javascript">
			btLogin.onclick = function(e){     //绑定模态框点击显示行为
				e.preventDefault(); 
				modalLogin.className="modal active";
			} 
			sub.onclick=function(){      // 绑定异步提交数据方法
				var ph = document.querySelectorAll("input")[0].value;
				var pw = document.querySelectorAll("input")[1].value;
				//console.log(ph,pw);
				var xhr = new XMLHttpRequest();
				xhr.onreadystatechange = function(){
					if(xhr.readyState===4){
						if(xhr.status===200){
							doResponse(xhr,ph);
						}else{
							console.log("请求失败")
						}
					}
				}
				xhr.open("POST","mail_login.php",true);
				xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");    // POST 方法需要设置请求头部
				xhr.send("phone="+ph+"&pwd="+pw);
				function doResponse(xhr,ph){    // 响应处理函数
					if(xhr.responseText==="succ"){
						modalLogin.className="modal";
						var span = document.createElement("span");
						span.innerHTML="欢迎回来："+ph;
						loginArea.removeChild(loginArea.children[0]);
						loginArea.appendChild(span);
					}else if(xhr.responseText==="err"){
						var div = document.querySelector(".modal-content");
						var span = document.createElement("span");
						span.innerHTML="用户名或密码有误";
						span.className="erro";
						div.insertBefore(span,div.firstChild);
					}	
				}
			}
		</script>
 </body>
</html>

　　

简单的PHP 响应如下

<?php
@$ph = $_REQUEST[‘phone‘] or die(‘phone required‘);
@$pw = $_REQUEST[‘pwd‘] or die(‘pwd required‘);
$conn =mysqli_connect(‘127.0.0.1‘,‘root‘,‘‘,‘sohu‘,3306);
$sql = "SET NAMES UTF8";
mysqli_query($conn,$sql);
$sql = "SELECT * FROM mail WHERE phone=‘$ph‘ AND pwd=‘$pw‘";
$result = mysqli_query($conn,$sql);
$list = mysqli_fetch_row($result);
if($list===null){
	echo "err";
}else{
	echo "succ";
}

　　

以上是关于使用原生AJAX 发送异步请求实现 常用的用户登录效果的主要内容，如果未能解决你的问题，请参考以下文章

原生js实现ajax封装

原生js实现ajax封装

原生ajax异步请求基础知识

原生js实现Ajax请求

使用原生JavaScript发送ajax请求

原生JS实现ajax与ajax的跨域请求