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";
}
时间： 2024-11-10 10:28:24