Collection
Collection
get post是两种数据的提交方式，get主要是向服务器请求数据，是读操作，参数在url上传递，不影响服务器的数据；post是向服务器提交需验证的数据，是写操作，参数只能在请求头上看到，对服务器会产生影响。ajax是用户到服务器的异步交互数据，区别于同步，无需等待，不会阻塞。异步操作时基于事件，所有操作都放在队列里，前面操作不必有结果就可以开始后面的，而前面的在完成后通过事件回调通知操作者。
一，同步提交操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单验证传统方式</title> </head> <body> <form action="admin/check.php" method="POST"> <p> <label for="email">邮箱：</label> <input type="email" name="email" id="email"> </p> <p> <label for="password">密码：</label> <input type="password" name="password" id="password"> </p> <p> <button>登录</button> </p> </form> </body> </html>
点击 "运行实例" 按钮查看在线实例
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<?php
// GET
if ($_SERVER['REQUEST_METHOD'] == 'GET') {
echo 'GET请求: <br>';
print_r($_GET);
}
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
echo 'POST请求: <br>';
print_r($_POST);
// 因为有密码,这里默认为POST请求
// 已注册过的用户邮箱
$emailList = ['admin@php.cn', 'peter@php.cn'];
$info = '';
if (empty($_POST['email'])) {
exit('<script>alert("邮箱不能为空");history.back();</script>');
} elseif (!in_array($_POST['email'], $emailList)) {
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">
<title>表单验证 ajax方式</title>
</head>
<body>
<form action="admin/check1.php" method="POST">
<p>
<label for="email">邮箱：</label>
<input type="email" name="email" id="email">
</p>
<p>
<label for="password">密码：</label>
<input type="password" name="password" id="password">
</p>
<p>
<button>登录</button>
<!-- 占位符 显示提示信息 -->
<span id="tips" style="color:red;"></span>
</p>
</form>
<script>
// 找到email节点
var email = document.getElementById('email');
var password =document.getElementById('password');
//找到错误提示的tips
var tips = document.getElementById('tips');
// 找到按钮button
var btn = document.getElementsByTagName('button')[0];
// email ajax 方式
function check(obj) {
obj.onblur = function () {
// 创建ajax请求对象
var request = new XMLHttpRequest();
// 请求成功的回调处理
request.onreadystatechange = function () {
// 请求状态完成（4）并且返回状态200
if (this.readyState === 4 && this.status === 200) {
tips.innerHTML = this.responseText;
}
}
// 设置请求参数
request.open('POST', 'admin/check1.php', true);
// post要设置请求头信息
request.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
// 发送请求
request.send('email=' + email.value + '&password=' + password.value);
}
// 用户修改信息是 清除错误信息提醒
obj.oninput = function () {
tips.innerHTML = '';
}
}
check(email);
check(password);
btn.onclick = function () {
if (email.value.length > 0 && password.value.length > 0) {
tips.innerHTML = '登录成功,正在跳转...';
setTimeout(function (){
location.href = 'admin/index.php';
}, 2000);
} else {
tips.innerHTML = '邮箱和密码不能为空';
}
return false;
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<?php
$email = empty($_POST['email']) ? '' : $_POST['email'];
$password = empty($_POST['password']) ? '' : $_POST['password'];
$emailList = ['admin@php.cn', 'peter@php.cn'];
if (empty($email)) {
echo '邮箱不能为空';
} elseif (!in_array($email, $emailList)) {
echo '新用户,请先注册 <a href="admin/register.php">注册</a>';
} elseif (empty($password)){
echo '密码不能为空';
}点击 "运行实例" 按钮查看在线实例
以上内容总结：
1、get方式主要用于分页 读取用户资料这些操作，post主要用于登录 注册这些需要将数据提交给服务器进行交互读写；
2、同步与异步的区别就是看需不需要等待，在上面的例子中ajax就是将用户输入的数据在不需要等待提交表单操作知乎在做，无需等待，用户体验好 服务器负担小。
