![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：其实你只需要提交前端的代码就可以了, php还没有学, 不提交我也知道的
Collection
Collection
<?php
$userId = isset($_GET['uid']) ? $_GET['uid'] : null;
$userInfo = [
['uid'=>1, 'uid'=>'苍老师', 'gender'=>'女', 'age'=>26],
['uid'=>2, 'uid'=>'波老师', 'gender'=>'女', 'age'=>23],
['uid'=>3, 'uid'=>'黑老师', 'gender'=>'男', 'age'=>33],
];
$res = '';
foreach ($userInfo as $user) {
if ($user['uid'] === intval($userId)) {
$res .= $user['uid'].'---'.$user['uid'].'---'.$user['gender'].'---'.$user['age'];
}
}
echo empty($res) ? '<span style="color: red;">没有找到该用户名</span>' : $res;
exit;点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax -- GET 传参</title>
</head>
<body>
<label for="uid">输入用户ID：</label>
<input type="text" name="uid" id="uid" autofocus>
<p id="tips"></p>
<script>
var input = document.getElementById('uid');
var tips = document.getElementById('tips');
var request = new XMLHttpRequest();
input.addEventListener('keypress',getUserInfo,false);
function getUserInfo(ev){
if( ev.key === 'Enter'){
// 根据用户输入的数据进行判断
switch (true) {
//如果没有输入查询条件
case input.value.length === 0:
tips.innerHTML = '<span style="color:red">ID不能为空</span>';
return false;
// 检查输入的是否是整数
case isNaN( input.value ):
tips.innerHTML = '<span style="color:red">ID必须为整数</span>';
return false;
// 当输入正确数据后，执行Ajax异步调用
default:
// 监听成功回调
request.addEventListener('readystatechange',successCallback,false);
// 配置参数
// encodeURIComponent(): 对值中的非法字符进行编码，如空格等，解码：encodeURIComponent();
var data = encodeURIComponent(input.value);
request.open('GET','php/user_info.php?uid='+data,true);
// 发送请求
request.send(null);
}
}
// 成功回调
function successCallback(){
//当 Ajax 对象的 readystatechange 状态属性变更为4时，表示请求成功并换回了数据
if(request.readyState === 4){
// 获取页面元素，并将数据渲染到DOM元素中
// console.log( request.responseText );
tips.innerHTML = request.responseText;
}
}
// 用户更新 ID 时，清空提示信息，提升用户体验
input.addEventListener('input',function(){
tips.innerHTML = null;
},false);
}
</script>
</body>
<html>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax -- POST 表单验证</title>
</head>
<body>
<h2>用户登陆</h2>
<form action="" name="login">
<p><label for="uname">用户名：</label>
<input type="text" name="uname" id="uname" placeholder="UserName"></p>
<p><label for="email">邮箱：</label>
<input type="text" name="email" id="email" placeholder="molang@qq***"></p>
<p><label for="password">密码：</label>
<input type="password" name="password" id="password" placeholder="123456"></p>
<p><label for="remember">记住我：</label>
<select name="remember" id="remember">
<option value="1" selected>一天</option>
<option value="7">一星期</option>
<option value="30">一个月</option>
</select></p>
<p><button type="button" name="submit">提交</button></p>
</form>
<script>
// 1、获取相关的变量
// 获取表单元素
var login = document.forms.namedItem('login');
// 获取提交按钮
var btn = login.submit;
// 创建Ajax请求对象
var request =new XMLHttpRequest();
/* **************************************** */
// 2、表单元素内容非空验证：控件失去焦点时触发
login.uname.addEventListener('blur',isEmpty,false);
login.email.addEventListener('blur',isEmpty,false);
login.password.addEventListener('blur',isEmpty,false);
// 失去焦点的事件方法
function isEmpty(ev){
// ev.target：正在触发事件的元素，当前是<input>
// 如果用户没有输入内容，则创建提示元素，并提示用户
if(ev.target.value.length === 0){
// 1.创建非空验证的提示信息
if(ev.target.nextElementSibling === null){
// 创建提示元素<span>
var tips = document.createElement('span');
// 创建提示信息的基本样式
tips.style.color = 'red';
// 根据事件目标对象设置对应的提示信息内容
switch( ev.target.name ){
case 'uname':
tips.innerText = '用户名不能为空';
break;
case 'email':
tips.innerText = '邮箱不能为空';
break;
case 'password':
tips.innerText = '密码不能为空';
break;
default:
tips.innerText = '未定义的错误';
}
// 将提示元素添加到表单控件后面
ev.target.parentNode.appendChild(tips);
}
// 锁定文本框输入焦点，直到用户输入内容
ev.target.focus();
}
}
/* ******************************* */
// 3.用户输入内容时，为控件的input事件添加监听器
login.uname.addEventListener('input',clearTips,false);
login.email.addEventListener('input',clearTips,false);
login.password.addEventListener('input',clearTips,false);
// input 事件监听方法
function clearTips(ev){
// 判断当前控件是否有提示信息元素
var tips = ev.target.nextElementSibling;
if( tips != null ){
// 移除提示信息元素<span>
tips.parentNode.removeChild(tips);
}
}
/* ******************************* */
// 4.Ajax 异步验证
btn.addEventListener('click',check,false);
// click事件监听方法
function check(ev){
// 获取需要提交的数据
var uname = login.uname.value;
var email = login.email.value;
var password = login.password.value;
var remember = login.remember.value;
// 当没有输入任何数据的时候，禁止提交
if(uname.length === 0 || email.length === 0 || password.length ===0 ){
// 移除当前点击事件
ev.target.removeEventListener('click',check,false);
// 模拟第一个输入框的blur事件，等待用户输入数据
var blurEvent = new Event('blur');
login.uname.dispatchEvent(blurEvent);
return false;
}
//以表单键值对方式封装需要发送的数据
var data = 'uname='+uname+'&email='+email+'&password='+password+'&remember='+remember;
// 监听事件回调
request.addEventListener('readystatechange',successCallback,false);
// 配置请求参数
request.open('POST','php/check.php',true);
// 关键步骤：POST请求，需要设置请求头，以表单数据格式发送数据
request.setRequestHeader('content-type','application/x-www-form-urlencoded;charset=uft-8');
// 发送请求
request.send(data);
}
// Ajax 请求成功的回调
function successCallback(ev){
// 事件目标对象就是XHR，可以清楚的看到readyState四种状态，等于4表示请求成功
// console.log(ev.target)
if(request.readyState ===4 ){
console.log(request.responseText);
}
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<?php
session_start();
// 获取表单提交的数据
$uid = $_POST['uid'];
$email = $_POST['email'];
$password = sha1($_POST['password']);
$remember = $_POST['remember'];
// 为简化代码,不用数据表验证,使用硬编码,只验证邮箱与密码
if ($email === 'molang@qq***' && $password === sha1('123456')) {
$_SESSION['uid'] = $uid;
$_SESSION['email'] = $email;
echo json_encode(['status'=>1, 'message'=>'验证成功']);
} else {
echo json_encode(['status'=>0, 'message'=>'验证失败']);
}
exit;点击 "运行实例" 按钮查看在线实例
