![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：这二种请求方式, 主要差别在于使用场景和参数的发送方式的不同
Collection
Collection
一、GET数据请求
1.创建request请求
var request = new XMLHttpRequest();
2.事件监听，回调
request.addEventListener('readstatechange', successCallback, false);
function successCallback(ev) {
if (request.readyState === 4) {
console.log(request.responseText);
}
}
3.请求参数
request.open('GET', '参数请求文件', true);
4.发送异步请求
request.send(null);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GET请求获取数据</title>
</head>
<body>
<label for="user-id">请输入学号:</label>
<input type="text" id="user-id" name="user_id" autofocus>
<p id="tips"></p>
<script>
var input = document.getElementById('user-id');
var tips = document.getElementById('tips');
var request = new XMLHttpRequest();
input.addEventListener('keypress',getUserInfo,false);
function getUserInfo(ev){
if(ev.key === 'Enter'){
if(input.value.length === 0){
tips.innerHTML = '<span style="color:red;">请输入学号</span>';
}else if(isNaN(input.value)){
tips.innerHTML = '<span style="color:red;">请输入正确格式的学号</span>';
}else{
request.addEventListener('readystatechange', successCallback, false);
var data = encodeURIComponent(input.value);
request.open('GET', 'student.php?user_id='+data, true);
request.send(null);
}
}
}
function successCallback(){
if(request.readyState === 4){
tips.innerHTML = request.responseText;
}
}
input.addEventListener('input',function(){
tips.innerHTML = null;
},false)
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<?php
$userId = isset($_GET['user_id']) ? $_GET['user_id'] : null;
$userInfo = [
['user_id'=>1, 'username'=>'刘备', 'gender'=>'男', 'age'=>30,'grade'=>'90分'],
['user_id'=>2, 'username'=>'关羽', 'gender'=>'男', 'age'=>29,'grade'=>'92分'],
['user_id'=>3, 'username'=>'张飞', 'gender'=>'男', 'age'=>28,'grade'=>'78分'],
];
$res = '';
foreach ($userInfo as $user) {
if ($user['user_id'] === intval($userId)) {
$res .= $user['user_id'].'---'.$user['username'].'---'.$user['gender'].'---'.$user['age'].'---'.$user['grade'];
}
}
echo empty($res) ? '<span style="color: red;">没有找到该用户名</span>' : $res;
exit;
?>点击 "运行实例" 按钮查看在线实例
二、POST请求
1. 创建: 请求对象
var request = new XMLHttpRequest();
2. 监听: 成功回调
request.addEventListener('readstatechange', successCallback, false);
function successCallback(ev) {
if (request.readyState === 4) {
console.log(request.responseText);
}
}
3. 设置: 请求参数
request.open('GET', '参数请求文件', true);
var data = 'key1=value1&key2=value2&...';
4.设置请求头类型
request.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=utf-8');
5. 发送: 异步请求
request.send(data);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>post表单验证</title>
</head>
<body>
<h2>用户登录</h2>
<form action="" name="login">
<p>
<label for="username">用户:</label>
<input type="text" name="username" id="username" placeholder="UserName">
</p>
<p>
<label for="email">邮箱:</label>
<input type="text" name="email" id="email" placeholder="example@email.com">
</p>
<p>
<label for="password">密码:</label>
<input type="password" name="password" id="password" placeholder="******" >
</p>
<p>
<button type="button" name="submit">提交</button>
</p>
</form>
<script>
var login = document.forms.namedItem('login');
var btn = login.submit;
var request = new XMLHttpRequest();
login.username.addEventListener('blur',isEmpty,false);
login.email.addEventListener('blur',isEmpty,false);
login.password.addEventListener('blur',isEmpty,false);
function isEmpty(ev){
if(ev.target.value.length === 0){
if(ev.target.nextElementSibling === null){
var tips = document.createElement('span');
tips.style.color = 'red';
switch(ev.target.name){
case 'username':
tips.innerText = '用户名不能为空';
break;
case 'email':
tips.innerText = '邮箱不能为空';
break;
case 'password':
tips.innerText = '密码不能为空';
break;
default:
'未定义错误';
}
ev.target.parentNode.appendChild(tips);
}
ev.target.focus();
}
}
login.username.addEventListener('input',clearTips,false);
login.email.addEventListener('input',clearTips,false);
login.password.addEventListener('input',clearTips,false);
function clearTips(ev){
var tips = ev.target.nextElementSibling;
if(tips !== null){
tips.parentNode.removeChild(tips);
}
}
btn.addEventListener('click', check, false);
function check(ev){
var username = login.username.value;
var email = login.email.value;
var password = login.password.value;
if(username.length === 0 || email.length === 0 || password.length ===0){
ev.target.removeElevtListener('click',check,false);
var blurEvent = new Event('blur');
login.username.dispatchEvent(
blurEvent);
return false;
}
var data = 'username='+username+'&email='+email+'&password='+password;
request.addEventListener('readystatechange',successCallback,false);
request.open('POST','check.php',true);
request.setRequestHeader('contant-type','x-www-form-urlencoded;charset=utf-8');
request.send(data);
}
function successCallback(ev){
if(request.readyState===4){
console.log(request.responseText);
}
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<?php
session_start();
// 获取表单提交的数据
$username = $_POST['username'];
$email = $_POST['email'];
$password = sha1($_POST['password']);
// 为简化代码,不用数据表验证,使用硬编码,只验证邮箱与密码
if ($username === 'admin' && $email === 'admin@php.cn' && $password === sha1('123456')) {
$_SESSION['username'] = $username;
$_SESSION['email'] = $email;
echo json_encode(['status'=>1, 'message'=>'验证成功']);
} else {
echo json_encode(['status'=>0, 'message'=>'验证失败']);
}
exit;点击 "运行实例" 按钮查看在线实例
