摘要：<!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
老师总结：这类无刷新的表单验证, 是开发过程 , 经常要写的代码, 一定要背下来
