现在很多网站都采用了jQuery弹窗功能，看起来是非常的酷炫，在代码狗以前的文章中也说过ajax与服务器的异步通讯，今天就结合两者，做一个弹窗异步登陆效果。
首先使用HTML写一个登陆界面，如下图：
代码很简单，HTML、css、js所有代码都贴出来。
<!DOCTYPE html><head> <meta charset="UTF-8"> <title>代码狗</title> <link href="css/main.css" rel="stylesheet"/> <script src="js/jquery-3.2.0.min.js"></script> <script src="js/layer/layer.js"></script> <script src="js/main.js"></script></head><body><div id="header"> <div id="daohang"> <div><a href="javascript:;" onclick="showloginbox()" >登陆</a></div> <div><a href="javascript:;" >注册</a></div> </div></div><div id="loginbox"> <div class="login-item"><input type="text" id="username"/></div> <div class="login-item"><input type="password" id="password"/></div> <div class="login-item"><a href="javascript:;" onclick="login()"/>登陆</div></div></body></html>
*{ padding: 0px; margin: 0px; font-family:"微软雅黑";}#header{ width: 100%; height: 40px; background-color: #fff;}a{ text-decoration: none;}#daohang{ width: 800px; height: 40px; background-color: #555555; margin: 0px auto;}#daohang div{ float: right; line-height: 40px; margin-left: 10px; display: block;}#daohang div a{ color: #fff;}.login-item input{ width: 350px; height: 40px;}.login-item a{ width: 355px; height: 50px; background-color:#ff00ef; display: block; text-align: center; line-height: 50px; color: #fff; font-size: 20px;}.login-item{ margin-top: 15px; margin-left: 20px;}#loginbox{ display: none;}function showloginbox(){ layer.open({ type:1, title:"登陆", area:["395px","300px"], content:$("#loginbox") });}function login(){ var username= $.trim($("#username").val()); var pwd= $.trim($("#password").val());if(username==""||pwd==""){ layer.alert("用户名或密码不能为空",{ title:"提示", icon:5 });} else{ var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { layer.alert(xmlhttp.responseText,{ title:"提示", icon:6, time:1000 }); } } xmlhttp.open("POST","http://127.0.0.1/test.php",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("username="+username+"&pwd="+pwd);}}弹窗使用了layer的弹窗效果，使用简单漂亮。喜欢的朋友可以去百度进他的官网学习学习。
测试时使用的本地服务器通讯，服务端PHP文件很简单，直接使用PHP输出post数据。
注意：ajax在本地环境调试时，不要使用Chrome内核浏览器，Chrome内核的流量器会拦截本地的ajax请求，使用IE内核即可，或者上传到服务器测试。
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/241442.html