摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>无刷新表单验证</title> </head> <bo
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>无刷新表单验证</title> </head> <body> <h3>后台管理系统登录</h3> <form> <p>邮箱: <input id="email" type="email" name="email"></p> <p>密码: <input id="password" type="password" name="password"></p> <p><button type="button">提交</button></p> <p id="p-txt"></p> </form> <script> let btn = document.getElementsByTagName('button')[0]; btn.onclick = function () { //1.创建xhr对象 let xhr = new XMLHttpRequest(); //2.监听响应状态 xhr.onreadystatechange = function(){ if (xhr.readyState === 4) { // 准备就绪 // 判断响应结果: if (xhr.status === 200) { // 响应成功,通过xhr对象的responseText属性可以获取响应的文本,此时是html文档内容 let p = document.getElementById('p-txt') ; p.style.color = 'red'; let json = JSON.parse(xhr.responseText); if (json.status === 1) { p.innerHTML = json.msg; } else if (json.status == 0) { p.innerHTML = json.msg; } document.forms[0].appendChild(p); btn.disabled = true; setTimeout(function(){ document.forms[0].removeChild(p); btn.disabled = false; if (json.status == 1) { location.href = 'D:/daima/home.html'; } },2000); } else { // 响应失败,并根据响应码判断失败原因 alert('响应失败'+xhr.status); } } } //3.设置请求参数 xhr.open('post','user.php',true); //4. 设置头信息,将内容类型设置为表单提交方式 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); //4.发送请求 let data = { email: document.getElementById('email').value, password: document.getElementById('password').value }; let data_json=JSON.stringify(data); xhr.send('data='+data_json); } </script> </body> </html>
user.php
<?php
$arr = array("email"=>"604335659@qq.com","password"=>"123456");
$user = json_decode($_POST['data']);
$email = $user->email;
$password = $user->password;
if ($arr['email'] == $email && $arr['password'] == $password ) {
echo json_encode(['status'=>1,'msg'=>'登录成功,正在跳转...']) ;
exit;
} else {
echo json_encode(['status'=>0,'msg'=>'邮箱或密码错误,登录失败!']) ;
exit;
}
home.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>后台管理系统</title> <link rel="stylesheet" type="text/css" href="D:/my-mi/layui/css/layui.css"> <script type="text/javascript" src="D:/my-mi/layui/layui.js"></script> <style type="text/css"> header{width: 100%;height: 50px;line-height: 50px;background:#00B9D6;color: #fff;font-size: 22px;text-indent: 20px;} header span{float: right;font-size: 14px;margin-right: 15px;} header span a{float: right;font-size: 14px;color:red;} .left{width: 200px;background: #222;position: absolute;} .layui-colla-title{background: #ff6b00;color:#fff;} .layui-colla-content{padding: 0px;} .right{position: absolute;left: 200px;height: 100%;width: 1055px;} </style> </head> <body> <header> 后台——管理系统<span>admin[管理登陆]<a href="#"onclick="out()" >退出</a></span> </header> <div> <div> <div> <h2>明星</h2> <div class="layui-colla-content layui-show"> <ul class="layui-nav layui-nav-tree" lay-filter="test"> <li class="layui-nav-item layui-nav-itemed"> <a href="javascript:;" src="gongfu.html" onclick="newSrc(this)" >功夫明星</a> </li> <li class="layui-nav-item layui-nav-itemed"> <a href="javascript:;">歌星</a> </li> <li class="layui-nav-item layui-nav-itemed"> <a href="javascript:;">舞星</a> </li> </ul> </div> </div> <div> <h2>电影</h2> <div class="layui-colla-content "> <ul class="layui-nav layui-nav-tree" lay-filter="test"> <li class="layui-nav-item layui-nav-itemed"> <a href="javascript:;">动作片</a> </li> <li class="layui-nav-item layui-nav-itemed"> <a href="javascript:;">爱情片</a> </li> </ul> </div> </div> <div> <h2>电视剧</h2> <div class="layui-colla-content "> <ul class="layui-nav layui-nav-tree" lay-filter="test"> <li class="layui-nav-item layui-nav-itemed"> <a href="javascript:;">默认展开1</a> </li> <li class="layui-nav-item layui-nav-itemed"> <a href="javascript:;">默认展开2</a> </li> </ul> </div> </div> <div> <h2>动漫</h2> <div class="layui-colla-content ">内容区域</div> </div> <div> <h2>科幻</h2> <div class="layui-colla-content ">内容区域</div> </div> <div> <h2>玄幻</h2> <div class="layui-colla-content ">内容区域</div> </div> </div> </div> <div> <iframe src="de.html" frameborder="0" scrolling="0" style="width: 100%;height: 100%;"></iframe> </div> </body> <script> //注意:折叠面板 依赖 element 模块,否则无法进行功能性操作 layui.use('element', function(){ var element = layui.element; //… }); layui.use('layer', function(){ var layer = layui.layer; $= layui.jquery; newHeight() }); //上面简写 // layui.use(['layer','element'] function(){ // var element = layui.element; // var layer = layui.layer; // var $= layui.jquery; // newHeight(); // }); function out(){ layer.confirm('是否确定退出?', { icon:3, btn: ['确定', '取消'] //可以无限个按钮 }, function(index, layero){ //按钮【按钮一】的回调 }, function(index){ //按钮【按钮二】的回调 }); } function newHeight(){ var height=document.documentElement.clientHeight; $('.left').height(height); } function newSrc(obj){ var src=$(obj).attr('src'); $('iframe').attr('src',src); } </script> </html>
批改老师:天蓬老师批改时间:2019-02-02 11:51:42
老师总结:这类无刷新的表单验证, 是开发过程 , 经常要写的代码, 一定要背下来