作业1、Ajax制作表单
html页面
实例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Ajax验证表单数据</title>
</head>
<body>
<form id="login">
<p>
<label for="email">邮箱:</label>
<input type="text" id="email">
<span id="em"></span>
</p>
<p>
<label for="password">密码:</label>
<input type="password" id="password">
<span id="psw"></span>
</p>
<p>
<button id="submit" type="button">登录</button>
<span id="btn"></span>
</p>
</form>
<script>
// 首先拿到各个标签
var login = document.forms.namedItem('login');
var email = login.email;
var em = login.querySelector('#em');
var password = login.password;
var psw = login.querySelector('#psw');
var submit = login.submit;
var btn = login.querySelector('#btn');
submit.addEventListener('click',function () {
// 非空验证 验证完毕反正真后进入表单验证
if (show()) {
// 验证表单
// 创建Ajax
var xhr = new XMLHttpRequest;
// 创建监听事件
xhr.onreadystatechange = function () {
if (xhr.readyState === 4){
if (xhr.status === 200){
btn.innerHTML =xhr.responseText;
// console.log(xhr.responseText);
}
}
};
// 初始化连接
xhr.open('POST','admin/admin.php',true);
// 设置http头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// 发送信息
xhr.send('email='+email.value+'&password='+password.value);
}
},false);
// 非空验证
function show() {
// trim 是清空文本前后空格的命令函数
var temp1 = email.value.trim();
var temp2 = password.value.trim();
if (temp1.length === 0){
em.innerHTML = '请输入邮箱';
email.focus();
return false;
}else if (temp2.length === 0){
psw.innerHTML = '请输入密码';
password.focus();
return false;
}
return true;
}
// 编辑框输入内容后清空占位符的提示
email.addEventListener('input',function () {
em.innerHTML = '';
btn.innerHTML = '';
},false);
password.addEventListener('input',function () {
psw.innerHTML = '';
btn.innerHTML = '';
},false);
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
php页面
实例
<?php
//print_r($_POST);
$email = $_POST['email'];
$password = $_POST['password'];
//创建数组代替数据库模拟访问
$emailList = ['admin@php.cn','admin@html.cn','admin@py.cn'];
//密码是转换成了md5形式
$pwd = md5('123456');
if (!in_array($email,$emailList)){
echo '<span style = "color: red">邮箱不正确</span>';
}elseif (md5($password) !== $pwd){
echo '<span style = "color: red">密码不正确</span>';
}else {
echo '<span style = "color: green">验证通过，正在跳转...</span>';
}运行实例 »
点击 "运行实例" 按钮查看在线实例
作业2、Ajax标签选项卡
html页面
实例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Ajax制作选项卡</title>
<style>
#wrap{
width: 400px;
height: 600px;
margin: 0 auto;
border-radius: 3px;
border: 1px solid grey;
}
#wrap ul{
list-style: none;
margin: 0;
padding: 0;
}
#box1{
height: 38px;
background-color: #A9A9A9;
/*border: 2px solid grey;*/
}
#box1 li{
float: left;
margin: 5px;
width: 80px;
height: 30px;
line-height: 30px;
text-align: center;
/*border-bottom: 2px solid red;*/
/*background-color: #A9A9A9;*/
cursor: pointer;
}
#wrap div{
display: none;
clear: both;
margin: 5px;
}
div ul li:hover{
color: #AF3434;
cursor: pointer;
}
</style>
</head>
<body>
<div id="wrap">
<!--<hr style="background-color: darkgray; height: 1px;clear: both;position: relative;top: -7px">-->
<ul id="box1">
<li>技术文章</li>
<li>网站源码</li>
<li>原生手册</li>
<li>推荐博文</li>
</ul>
<div class="dit" style="display: block;">
<!--<ul>-->
<!--<li>这是第一个选项卡的DIV内容</li>-->
<!--<li>这是第一个选项卡的DIV内容</li>-->
<!--<li>这是第一个选项卡的DIV内容</li>-->
<!--<li>这是第一个选项卡的DIV内容</li>-->
<!--<li>这是第一个选项卡的DIV内容</li>-->
<!--<li>这是第一个选项卡的DIV内容</li>-->
<!--<li>这是第一个选项卡的DIV内容</li>-->
<!--<li>这是第一个选项卡的DIV内容</li>-->
<!--<li>这是第一个选项卡的DIV内容</li>-->
<!--<li>这是第一个选项卡的DIV内容</li>-->
<!--<li>这是第一个选项卡的DIV内容</li>-->
<!--<li>这是第一个选项卡的DIV内容</li>-->
<!--<li>这是第一个选项卡的DIV内容</li>-->
<!--<li>这是第一个选项卡的DIV内容</li>-->
<!--<li>这是第一个选项卡的DIV内容</li>-->
<!--<li>这是第一个选项卡的DIV内容</li>-->
<!--<li>这是第一个选项卡的DIV内容</li>-->
<!--<li>这是第一个选项卡的DIV内容</li>-->
<!--<li>这是第一个选项卡的DIV内容</li>-->
<!--<li>这是第一个选项卡的DIV内容</li>-->
<!--</ul>-->
</div>
<div class="dit">
<!--<ul>-->
<!--<li>这是第二个选项卡的DIV内容</li>-->
<!--<li>这是第二个选项卡的DIV内容</li>-->
<!--<li>这是第二个选项卡的DIV内容</li>-->
<!--<li>这是第二个选项卡的DIV内容</li>-->
<!--<li>这是第二个选项卡的DIV内容</li>-->
<!--<li>这是第二个选项卡的DIV内容</li>-->
<!--<li>这是第二个选项卡的DIV内容</li>-->
<!--<li>这是第二个选项卡的DIV内容</li>-->
<!--<li>这是第二个选项卡的DIV内容</li>-->
<!--<li>这是第二个选项卡的DIV内容</li>-->
<!--<li>这是第二个选项卡的DIV内容</li>-->
<!--<li>这是第二个选项卡的DIV内容</li>-->
<!--<li>这是第二个选项卡的DIV内容</li>-->
<!--<li>这是第二个选项卡的DIV内容</li>-->
<!--<li>这是第二个选项卡的DIV内容</li>-->
<!--<li>这是第二个选项卡的DIV内容</li>-->
<!--<li>这是第二个选项卡的DIV内容</li>-->
<!--<li>这是第二个选项卡的DIV内容</li>-->
<!--<li>这是第二个选项卡的DIV内容</li>-->
<!--<li>这是第二个选项卡的DIV内容</li>-->
<!--</ul>-->
</div>
<div class="dit">
<!--<ul>-->
<!--<li>这是第三个选项卡的DIV内容</li>-->
<!--<li>这是第三个选项卡的DIV内容</li>-->
<!--<li>这是第三个选项卡的DIV内容</li>-->
<!--<li>这是第三个选项卡的DIV内容</li>-->
<!--<li>这是第三个选项卡的DIV内容</li>-->
<!--<li>这是第三个选项卡的DIV内容</li>-->
<!--<li>这是第三个选项卡的DIV内容</li>-->
<!--<li>这是第三个选项卡的DIV内容</li>-->
<!--<li>这是第三个选项卡的DIV内容</li>-->
<!--<li>这是第三个选项卡的DIV内容</li>-->
<!--<li>这是第三个选项卡的DIV内容</li>-->
<!--<li>这是第三个选项卡的DIV内容</li>-->
<!--<li>这是第三个选项卡的DIV内容</li>-->
<!--<li>这是第三个选项卡的DIV内容</li>-->
<!--<li>这是第三个选项卡的DIV内容</li>-->
<!--<li>这是第三个选项卡的DIV内容</li>-->
<!--<li>这是第三个选项卡的DIV内容</li>-->
<!--<li>这是第三个选项卡的DIV内容</li>-->
<!--<li>这是第三个选项卡的DIV内容</li>-->
<!--<li>这是第三个选项卡的DIV内容</li>-->
<!--</ul>-->
</div>
<div class="dit">
<!--<ul>-->
<!--<li>这是第四个选项卡的DIV内容</li>-->
<!--<li>这是第四个选项卡的DIV内容</li>-->
<!--<li>这是第四个选项卡的DIV内容</li>-->
<!--<li>这是第四个选项卡的DIV内容</li>-->
<!--<li>这是第四个选项卡的DIV内容</li>-->
<!--<li>这是第四个选项卡的DIV内容</li>-->
<!--<li>这是第四个选项卡的DIV内容</li>-->
<!--<li>这是第四个选项卡的DIV内容</li>-->
<!--<li>这是第四个选项卡的DIV内容</li>-->
<!--<li>这是第四个选项卡的DIV内容</li>-->
<!--<li>这是第四个选项卡的DIV内容</li>-->
<!--<li>这是第四个选项卡的DIV内容</li>-->
<!--<li>这是第四个选项卡的DIV内容</li>-->
<!--<li>这是第四个选项卡的DIV内容</li>-->
<!--<li>这是第四个选项卡的DIV内容</li>-->
<!--<li>这是第四个选项卡的DIV内容</li>-->
<!--<li>这是第四个选项卡的DIV内容</li>-->
<!--<li>这是第四个选项卡的DIV内容</li>-->
<!--<li>这是第四个选项卡的DIV内容</li>-->
<!--<li>这是第四个选项卡的DIV内容</li>-->
<!--</ul>-->
</div>
</div>
<script>
var li = document.getElementById('box1');
var div = document.getElementsByClassName('dit');
Object.keys(li.children).forEach(function (value) {
li.children[value].addEventListener('click',function () {
// 点击的时候显示相对应的div内容 显示之前把其他的div内容都隐藏
for (var i = 0; i < li.children.length; i++) {
li.children[i].style.color = 'black';
li.children[i].style.borderBottom = '';
div[i].style.display = 'none';
}
// 全部隐藏后显示当前点击对应的DIV标签
li.children[value].style.color = 'red';
li.children[value].style.borderBottom = '2px solid red';
div[value].style.display = 'block';
// 获取后端数据
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
if (request.readyState === 4){
div[value].innerHTML = request.responseText;
}
};
request.open('get','admin/data.php?p='+value,true);
request.send(null);
},false);
});
// 打开页面后默认显示第一个标签内容方法
// 第一种
// var request = new XMLHttpRequest();
// request.onreadystatechange = function () {
// if (request.readyState === 4){
// div[0].innerHTML = request.responseText;
// }
// };
// request.open('get','admin/data.php?p='+0,true);
// request.send(null);
//
// li.children[0].style.color = 'red';
// li.children[0].style.borderBottom = '2px solid red';
// 第二种 自动点击方法
// 模拟机器人点击操作,获取默认页数据,这里点击第一个li标签
// 获取到要点击的标签
var defaultTab = li.firstElementChild;
// 给标签添加点击事件
defaultTab.addEventListener('click',show,false);
// 因为要自动点击 不是认为点击 所以要实例化一下
var event = new Event('click');
// 把事件分配给标签 让标签自动执行这个点击事件 不需要认为点击
defaultTab.dispatchEvent(event);
function show() {
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
if (request.readyState === 4){
div[0].innerHTML = request.responseText;
}
};
request.open('get','admin/data.php?p='+0,true);
request.send(null);
li.children[0].style.color = 'red';
li.children[0].style.borderBottom = '2px solid red';
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
php页面
实例
<?php /** * Created by PhpStorm. * User: Administrator * Date: 2019/5/16 0016 * Time: 12:16 */ $data = [ '<ul> <li>这是第一个选项卡的DIV内容</li> <li>这是第一个选项卡的DIV内容</li> <li>这是第一个选项卡的DIV内容</li> <li>这是第一个选项卡的DIV内容</li> <li>这是第一个选项卡的DIV内容</li> <li>这是第一个选项卡的DIV内容</li> <li>这是第一个选项卡的DIV内容</li> <li>这是第一个选项卡的DIV内容</li> <li>这是第一个选项卡的DIV内容</li> <li>这是第一个选项卡的DIV内容</li> <li>这是第一个选项卡的DIV内容</li> <li>这是第一个选项卡的DIV内容</li> <li>这是第一个选项卡的DIV内容</li> <li>这是第一个选项卡的DIV内容</li> <li>这是第一个选项卡的DIV内容</li> <li>这是第一个选项卡的DIV内容</li> <li>这是第一个选项卡的DIV内容</li> <li>这是第一个选项卡的DIV内容</li> <li>这是第一个选项卡的DIV内容</li> <li>这是第一个选项卡的DIV内容</li> </ul>', '<ul> <li>这是第二个选项卡的DIV内容</li> <li>这是第二个选项卡的DIV内容</li> <li>这是第二个选项卡的DIV内容</li> <li>这是第二个选项卡的DIV内容</li> <li>这是第二个选项卡的DIV内容</li> <li>这是第二个选项卡的DIV内容</li> <li>这是第二个选项卡的DIV内容</li> <li>这是第二个选项卡的DIV内容</li> <li>这是第二个选项卡的DIV内容</li> <li>这是第二个选项卡的DIV内容</li> <li>这是第二个选项卡的DIV内容</li> <li>这是第二个选项卡的DIV内容</li> <li>这是第二个选项卡的DIV内容</li> <li>这是第二个选项卡的DIV内容</li> <li>这是第二个选项卡的DIV内容</li> <li>这是第二个选项卡的DIV内容</li> <li>这是第二个选项卡的DIV内容</li> <li>这是第二个选项卡的DIV内容</li> <li>这是第二个选项卡的DIV内容</li> <li>这是第二个选项卡的DIV内容</li> </ul>', '<ul> <li>这是第三个选项卡的DIV内容</li> <li>这是第三个选项卡的DIV内容</li> <li>这是第三个选项卡的DIV内容</li> <li>这是第三个选项卡的DIV内容</li> <li>这是第三个选项卡的DIV内容</li> <li>这是第三个选项卡的DIV内容</li> <li>这是第三个选项卡的DIV内容</li> <li>这是第三个选项卡的DIV内容</li> <li>这是第三个选项卡的DIV内容</li> <li>这是第三个选项卡的DIV内容</li> <li>这是第三个选项卡的DIV内容</li> <li>这是第三个选项卡的DIV内容</li> <li>这是第三个选项卡的DIV内容</li> <li>这是第三个选项卡的DIV内容</li> <li>这是第三个选项卡的DIV内容</li> <li>这是第三个选项卡的DIV内容</li> <li>这是第三个选项卡的DIV内容</li> <li>这是第三个选项卡的DIV内容</li> <li>这是第三个选项卡的DIV内容</li> <li>这是第三个选项卡的DIV内容</li> </ul>', '<ul> <li>这是第四个选项卡的DIV内容</li> <li>这是第四个选项卡的DIV内容</li> <li>这是第四个选项卡的DIV内容</li> <li>这是第四个选项卡的DIV内容</li> <li>这是第四个选项卡的DIV内容</li> <li>这是第四个选项卡的DIV内容</li> <li>这是第四个选项卡的DIV内容</li> <li>这是第四个选项卡的DIV内容</li> <li>这是第四个选项卡的DIV内容</li> <li>这是第四个选项卡的DIV内容</li> <li>这是第四个选项卡的DIV内容</li> <li>这是第四个选项卡的DIV内容</li> <li>这是第四个选项卡的DIV内容</li> <li>这是第四个选项卡的DIV内容</li> <li>这是第四个选项卡的DIV内容</li> <li>这是第四个选项卡的DIV内容</li> <li>这是第四个选项卡的DIV内容</li> <li>这是第四个选项卡的DIV内容</li> <li>这是第四个选项卡的DIV内容</li> <li>这是第四个选项卡的DIV内容</li> </ul>' ]; $index = $_GET['p']; echo $data[$index];
运行实例 »
点击 "运行实例" 按钮查看在线实例