表单的传统验证
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>get和post请求与传统的表单验证</title> </head> <body> <!-- 1.get参数通过url传递，post放在request body中。 2.get请求在url中传递的参数是有长度限制的，而post没有。 3.get比post更不安全，因为参数直接暴露在url中，所以不能用来传递敏感信息。 4.get请求只能进行url编码，而post支持多种编码方式 5.get请求会浏览器主动cache，而post支持多种编码方式。 6.get请求参数会被完整保留在浏览历史记录里，而post中的参数不会被保留。 7.GET和POST本质上就是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。 8.GET产生一个TCP数据包；POST产生两个TCP数据包。 --> <h2>用户登录</h2> <form action="login/check.php" method="POST"> <p> <label for="name">用户名:</label> <input type="text" name="name" placeholder="用户名"> </p> <p> <label for="password">密码:</label> <input type="password" name="password" placeholder="********"> </p> <p><button>登录</button></p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
check.php:
<?php
// GET
if ($_SERVER['REQUEST_METHOD'] == 'GET') {
echo 'GET请求: <br>';
print_r($_GET);
}
//POST
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
echo 'POST请求: <br>';
print_r($_POST);
// 已注册过的用户邮箱
$nameList = ['帅的被人砍', '丑的想整容'];
$info = '';
if (empty($_POST['name'])) {
exit('<script>alert("用户名不能为空");history.back();</script>');
} elseif (!in_array($_POST['name'], $nameList)) {
exit('<script>alert("新用户,请先注册");location.href="register.php";</script>');
}
if (empty($_POST['password'])) {
exit('<script>alert("密码不能为空");history.back();</script>');
}
if ($_POST['email'] && $_POST['password']) {
echo '<script>alert("验证通过,登录成功");location.href="index.php";</script>';
}
}
表单通过ajax异步验证：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ajax原理与应用</title>
</head>
<body>
<!--
1. Ajax: 用户与服务器之间进行异步交互
2. 同步: 所有操作按事先约定的步骤进行,前面工作未完成,后面工作不能开始,遇到执行时间过长的操作,会千万阻塞
例如传统的表单提交,在等待服务器处理结果返回之前,用户只能等待
3. 异步: 所有操作放到队列中,前一个操作不必等到执行结果,后一个操作就可以开始,前一操作执行完成后通过事件通知调用者即可
所以, 异步是基于事件机制的, 并通过事先设置的回调函数来处理响应数据, 不会形成阻塞
4. 同步与异步的根本区别在于: 请求发出后, 是否需要等待结果, 必须等待结果就是同步, 不用等待继续执行就是异步
5. Ajax: 执行异步操作最有用的工具,可以代理用户的请求,并对执行结果进行回调处理,例如局部刷新,非阻塞验证等
6. 所有Ajax操作,都是通过一个: XMLHttpRequest 对象来实现
-->
<!-- 下面以异步表单验证为例,学习Ajax -->
<!-- check.php: 传统的同步方式处理 -->
<!-- check01.php: Ajax异步处理 -->
<h2>用户登录</h2>
<form action="login/check01.php" method="POST">
<p>
<label for="name">用户名:</label>
<input type="text" name="name">
</p>
<p>
<label for="password">密码:</label>
<input type="password" name="password">
</p>
<p>
<button>登录</button>
<!-- 占位符:显示提示信息 -->
<span id="tips" style="color:red"></span>
</p>
</form>
<!-- 异步Ajax验证 -->
<script>
// 获取表单对象与控件
var login = document.forms['login'];
var name = document.getElementsByName('name')[0];
var password = document.getElementsByName('password')[0];
var btn = document.getElementsByTagName('button')[0];
var tips = document.getElementById('tips');
function check(checkName) {
checkName.onblur = function () {
//1. 创建ajax请求对象
var request = new XMLHttpRequest();
//2. 请求成功的回调处理
request.onreadystatechange = function () {
// 当请求完成(4)并成功的获取到了数据(200)
if (this.readyState === 4 && this.status === 200) {
// 更新提示信息
tips.innerHTML = this.responseText;
}
};
//3. 设置请求参数
request.open('POST', 'login/check01.php', true); //true异步 false同步
//4. POST请求需要设置请求头信息
request.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
//5. 发送请求
request.send('name=' + name.value + '&password=' + password.value);
};
// 用户修改信息时,清空提示信息
checkName.oninput = function () {
tips.innerHTML = '';
};
}
//验证用户名
check(name);
//验证密码
check(password);
btn.onclick = function () {
if (name.value.length > 0 && password.value.length > 0) {
tips.innerHTML = '登录成功,正在跳转...';
setTimeout(function (){
location.href = 'login/index.php';
}, 2000);
} else {
tips.innerHTML = '用户名和密码不能为空';
}
return false;
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
check01.php；
<?php
// print_r($_POST);
$name = empty($_POST['name']) ? '' : $_POST['name'];
$password = empty($_POST['password']) ? '' : $_POST['password'];
$nameList = ['帅的被人砍', '丑的想整容'];
if (empty($name)) {
echo '用户名不能为空';
} elseif (!in_array($name, $nameList)) {
echo '新用户,请先注册 <a href="http://demo.io/admin/register.php">注册</a>';
} elseif (empty($password)){
echo '密码不能为空';
}
