1、使用Ajax验证表单数据
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用Ajax验证表单数据</title>
</head>
<body>
<h3>用户登录</h3>
<form name="login" method="post" onsubmit="return false">
<p>
<label for="username">账号:</label>
<input type="email" id="username" name="username" placeholder="example@gmail.com">
<span style="color: red" id="error_email">*</span>
</p>
<p>
<label for="password">密码: </label>
<input type="password" id="password" name="password" placeholder="密码不少于6位">
<span style="color: red" id="error_psw">*</span>
</p>
<p>
<button id="submit" type="button">登录</button>
<span id="result"></span>
</p>
</form>
<script>
// 获取必要的元素,以及提示信息的占位符元素
var login = document.forms.namedItem('login');
var submit = document.getElementById('submit');
var error_email = document.getElementById('error_email');
var error_psw = document.getElementById('error_psw');
var result = document.getElementById('result');
// 为提交按钮设置点击事件, 并分配一个事件响应函数(只需要名称即可)
submit.addEventListener('click', checkUser, false);
// 主函数: 定义提交事件函数, 内部会调用二个子函数,完成主要功能
function checkUser() {
// 1.数据非空验证
var user = isEmpty(login, error_email, error_psw);
// 2. Ajax异步验证
// 如果非空验证返回false,说明验证失败, 就不必再到服务器进行Ajax验证了, 直接返回false
// 否则就将需要验证的数据(对象字面量user)做为参数,调用异步验证器: verfiy()
return user ? verfiy(user, result) : false;
}
// 非空验证函数
function isEmpty(form, error1, error2) {
// 获取表单控件中的内容,并清空前后空格
var username = form.username.value.trim();
var password = form.password.value.trim();
// 先验证邮箱,再验证密码,并正确的设置焦点与返回值
if (username.length === 0) {
error1.innerText = '账号不能为空';
login.username.focus();
return false;
} else if (password.length === 0){
error2.innerText = '密码不能为空';
login.password.focus();
return false;
}
// 非空验证通过, 则返回账号与密码组成的对象字面量,方便后续代码调用
return {
username: username,
password: password
}
}
function verfiy(user, result) {
//1.创建request对象
var request = new XMLHttpRequest();
//2.监听响应状态
request.onreadystatechange = function(){
if (request.readyState === 4) { // 准备就绪
console.log(request.responseText);
// 设置验证提示
result.innerHTML = request.responseText;
// 验证通过的跳转功能, 需要使用JSON来实现
}
return false;
};
//3.设置请求参数
request.open('post','check.php',true);
//4. 设置头信息,将内容类型设置为表单提交方式(固定模板语法结构)
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//4.发送请求
// 准备要提交的数据
var data = 'username=' + user.username + '&password=' + user.password;
request.send(data);
}
// input: 当用户修改错误数据时, 提示信息应该消失
login.username.addEventListener('input', function (){
error_email.innerText = ''; // 清除账号错误提示
result.innerText = ''; // 清除服务器返回的验证提示
}, false);
login.password.addEventListener('input', function (){
error_psw.innerText = ''; // 清除密码错误提示
result.innerText = ''; // 清除服务器返回的验证提示
}, false);
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<?php
//print_r($_POST);
$email = $_POST['username'];
$password = $_POST['password'];
$emailList = ['admin@php.cn', 'admin@html.cn', 'admin@qq.com'];
$pwd = md5('123456');
if (!in_array($email, $emailList)) {
echo '<span style="color: red">账号不正确</span>';
} else if (md5($password) !== $pwd) {
echo '<span style="color: red">密码不正确</span>';
} else {
echo '<span style="color: green">验证通过,正在跳转...</span>';
}运行实例 »
点击 "运行实例" 按钮查看在线实例
2、使用Ajax制作选项卡
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡案例</title>
<style>
h2 {
text-align: center;
}
.box {
width: 538px;
height: 500px;
background-color: white;
border: 1px solid #ccc;
margin: 20px auto;
color: #363636;
}
.box > ul {
margin: 0;
padding: 0;
background-color: #f8f8f8;
/*border-bottom: 1px solid #ccc;*/
overflow: hidden;
}
.box > ul li {
list-style-type: none;
width: 90px;
height:36px;
float:left;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
text-align: center;
line-height: 36px;
}
.box ul + span {
float:right;
width:90px;
height: 36px;
line-height: 36px;
margin-top: -36px;
}
.box ul + span >a {
color: #696969;
text-decoration: none;
}
.box li.active {
background-color: #fff;
font-weight: bolder;
border-bottom: none;
border-top: 3px solid orangered;
}
.box div {
display: none;
}
.box div ul {
margin: 0;
padding: 10px;
list-style-type: none;
}
.box div ul li {
line-height: 1.5em;
/*background-color: yellow;*/
}
.box div ul li a {
color: #636363;
text-decoration: none;
}
.box div ul li a:hover {
color: #000;
}
.box div ul li span {
float: right;
color: red;
}
</style>
</head>
<body>
<h2>优酷视频软件</h2>
<div class="box">
<ul>
<!-- 创建四个选项卡,并设置第一个为当前激活高亮状态 -->
<li class="active">最新电影</li>
<li>电视剧</li>
<li>综艺节目</li>
<li>最新动漫</li>
</ul>
<span><a href="">更多精彩>></a></span>
<div style="display: block;">
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
<script>
//1. 获取选项卡与对应显示的内容区块对象
var box = document.getElementsByClassName('box')[0];
var ul = box.getElementsByTagName('ul')[0];
var tab = ul.getElementsByTagName('li');
var list = box.getElementsByTagName('div');
//给每一个选项卡添加事件
for (var i=0; i<tab.length; i++) {
//为当前的选项卡添加自定义属性index:当前对象的编号
tab[i].index = i;
// 为每一个标签添加点击事件
tab[i].addEventListener('click', getData, false);
}
// 点击事件对应函数
function getData() {
console.log(this.index);
//1. 初始化标签页的样式
for (var i=0; i<tab.length; i++) {
//第一步: 将除了当前选项卡之外的所有标签样式全部清空
tab[i].className = '';
//第二步: 将除了当前信息列表之外的列表全部隐藏
list[i].style.display = 'none';
}
// 2. 设置激活标签页样式
this.classList.add('active');
list[this.index].style.display = 'block';
// 3. Ajax获取数据
// 获取与当前标签页对应的列表信息
var n = this.index;
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
if (request.readyState === 4) {
// console.log(request.responseText);
list[n].innerHTML = request.responseText;
}
};
request.open('get', 'admin/data.php?p='+n, true);
request.send(null);
}
// 模拟点击操作, 获取默认页数据, 这里假定第一页是默认标签页
var defaultTab = ul.firstElementChild;
defaultTab.addEventListener('click', show, false);
var event = new Event('click');
// 将事件click分配/派发给指定的元素, 注意, 这里不需要用户参与,会自动执行, 相当于用户选择了首页
defaultTab.dispatchEvent(event);
function show() {
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
if (request.readyState === 4) {
// console.log(request.responseText);
list[0].innerHTML = request.responseText;
}
};
request.open('get', 'admin/data.php?p=0', true);
request.send(null);
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<?php $data = [ '<ul> <li><a href="">最新电影 | 复仇者联盟4终局之战</a><span>05-15</span></li> <li><a href="">最新电影 | 复仇者联盟4终局之战</a><span>05-15</span></li> <li><a href="">最新电影 | 复仇者联盟4终局之战</a><span>05-15</span></li> <li><a href="">最新电影 | 复仇者联盟4终局之战</a><span>05-15</span></li> <li><a href="">最新电影 | 复仇者联盟4终局之战</a><span>05-15</span></li> <li><a href="">最新电影 | 复仇者联盟4终局之战</a><span>05-15</span></li> <li><a href="">最新电影 | 复仇者联盟4终局之战</a><span>05-15</span></li> <li><a href="">最新电影 | 复仇者联盟4终局之战</a><span>05-15</span></li> <li><a href="">最新电影 | 复仇者联盟4终局之战</a><span>05-15</span></li> <li><a href="">最新电影 | 复仇者联盟4终局之战</a><span>05-15</span></li> <li><a href="">最新电影 | 复仇者联盟4终局之战</a><span>05-15</span></li> <li><a href="">最新电影 | 复仇者联盟4终局之战</a><span>05-15</span></li> <li><a href="">最新电影 | 复仇者联盟4终局之战</a><span>05-15</span></li> <li><a href="">最新电影 | 复仇者联盟4终局之战</a><span>05-15</span></li> <li><a href="">最新电影 | 复仇者联盟4终局之战</a><span>05-15</span></li> <li><a href="">最新电影 | 复仇者联盟4终局之战</a><span>05-15</span></li> <li><a href="">最新电影 | 复仇者联盟4终局之战</a><span>05-15</span></li> <li><a href="">最新电影 | 复仇者联盟4终局之战</a><span>05-15</span></li> </ul>', '<ul> <li><a href="">电视剧 | 倚天屠龙记</a><span>05-15</span></li> <li><a href="">电视剧 | 倚天屠龙记</a><span>05-15</span></li> <li><a href="">电视剧 | 倚天屠龙记</a><span>05-15</span></li> <li><a href="">电视剧 | 倚天屠龙记</a><span>05-15</span></li> <li><a href="">电视剧 | 倚天屠龙记</a><span>05-15</span></li> <li><a href="">电视剧 | 倚天屠龙记</a><span>05-15</span></li> <li><a href="">电视剧 | 倚天屠龙记</a><span>05-15</span></li> <li><a href="">电视剧 | 倚天屠龙记</a><span>05-15</span></li> <li><a href="">电视剧 | 倚天屠龙记</a><span>05-15</span></li> <li><a href="">电视剧 | 倚天屠龙记</a><span>05-15</span></li> <li><a href="">电视剧 | 倚天屠龙记</a><span>05-15</span></li> <li><a href="">电视剧 | 倚天屠龙记</a><span>05-15</span></li> <li><a href="">电视剧 | 倚天屠龙记</a><span>05-15</span></li> <li><a href="">电视剧 | 倚天屠龙记</a><span>05-15</span></li> <li><a href="">电视剧 | 倚天屠龙记</a><span>05-15</span></li> <li><a href="">电视剧 | 倚天屠龙记</a><span>05-15</span></li> <li><a href="">电视剧 | 倚天屠龙记</a><span>05-15</span></li> <li><a href="">电视剧 | 倚天屠龙记</a><span>05-15</span></li> </ul>', '<ul> <li><a href="">综艺节目 | 奔跑吧兄弟</a><span>05-15</span></li> <li><a href="">综艺节目 | 奔跑吧兄弟</a><span>05-15</span></li> <li><a href="">综艺节目 | 奔跑吧兄弟</a><span>05-15</span></li> <li><a href="">综艺节目 | 奔跑吧兄弟</a><span>05-15</span></li> <li><a href="">综艺节目 | 奔跑吧兄弟</a><span>05-15</span></li> <li><a href="">综艺节目 | 奔跑吧兄弟</a><span>05-15</span></li> <li><a href="">综艺节目 | 奔跑吧兄弟</a><span>05-15</span></li> <li><a href="">综艺节目 | 奔跑吧兄弟</a><span>05-15</span></li> <li><a href="">综艺节目 | 奔跑吧兄弟</a><span>05-15</span></li> <li><a href="">综艺节目 | 奔跑吧兄弟</a><span>05-15</span></li> <li><a href="">综艺节目 | 奔跑吧兄弟</a><span>05-15</span></li> <li><a href="">综艺节目 | 奔跑吧兄弟</a><span>05-15</span></li> <li><a href="">综艺节目 | 奔跑吧兄弟</a><span>05-15</span></li> <li><a href="">综艺节目 | 奔跑吧兄弟</a><span>05-15</span></li> <li><a href="">综艺节目 | 奔跑吧兄弟</a><span>05-15</span></li> <li><a href="">综艺节目 | 奔跑吧兄弟</a><span>05-15</span></li> <li><a href="">综艺节目 | 奔跑吧兄弟</a><span>05-15</span></li> <li><a href="">综艺节目 | 奔跑吧兄弟</a><span>05-15</span></li> </ul>', '<ul> <li><a href="">最新动漫 | 雄兵连之天河战役</a><span>05-15</span></li> <li><a href="">最新动漫 | 雄兵连之天河战役</a><span>05-15</span></li> <li><a href="">最新动漫 | 雄兵连之天河战役</a><span>05-15</span></li> <li><a href="">最新动漫 | 雄兵连之天河战役</a><span>05-15</span></li> <li><a href="">最新动漫 | 雄兵连之天河战役</a><span>05-15</span></li> <li><a href="">最新动漫 | 雄兵连之天河战役</a><span>05-15</span></li> <li><a href="">最新动漫 | 雄兵连之天河战役</a><span>05-15</span></li> <li><a href="">最新动漫 | 雄兵连之天河战役</a><span>05-15</span></li> <li><a href="">最新动漫 | 雄兵连之天河战役</a><span>05-15</span></li> <li><a href="">最新动漫 | 雄兵连之天河战役</a><span>05-15</span></li> <li><a href="">最新动漫 | 雄兵连之天河战役</a><span>05-15</span></li> <li><a href="">最新动漫 | 雄兵连之天河战役</a><span>05-15</span></li> <li><a href="">最新动漫 | 雄兵连之天河战役</a><span>05-15</span></li> <li><a href="">最新动漫 | 雄兵连之天河战役</a><span>05-15</span></li> <li><a href="">最新动漫 | 雄兵连之天河战役</a><span>05-15</span></li> <li><a href="">最新动漫 | 雄兵连之天河战役</a><span>05-15</span></li> <li><a href="">最新动漫 | 雄兵连之天河战役</a><span>05-15</span></li> <li><a href="">最新动漫 | 雄兵连之天河战役</a><span>05-15</span></li> </ul>' ]; $index = $_GET['p']; echo $data[$index];
运行实例 »
点击 "运行实例" 按钮查看在线实例