收藏
批改状态：合格
老师批语：HTTP请求有许多类型,最常用的就是get和post , php也有对应的全局变量来接收这样的表单数据
一、Ajax-GET 请求获取数据-学生成绩查询系统
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax-GET 请求获取数据-学生成绩查询系统</title>
</head>
<body>
<h2>学生成绩查询系统</h2>
请输入您的学号：<input type="text" id="xueid" name="xueid" autofocus>
<p id="tishi"></p>
<!--<p id="tishi"><span style="color: red">001</span>，张军，您好！2019年第一学期成绩： 数学：65分 语文：75</p>-->
<script>
//定义获取学号id
var input = document.getElementById('xueid');
//定义获取提示
var tishi = document.getElementById('tishi');
//定义Ajax对象
var request = new XMLHttpRequest();
input.addEventListener('keypress',getUserInfo,false);
function getUserInfo(ev) {
if(ev.key === 'Enter'){
//根据用户输入数据进行判断
switch (true){
//如果输入内容为空判断
case input.value.length === 0:
tishi.innerHTML = '<span style="color:red">学号不能为空</span>';
return false;
//输入内容必须为整数
case isNaN(input.value):
tishi.innerHTML = '<span style="color:red">学号必须是整数</span>';
return false;
default:
// 监听成功回调
request.addEventListener('readystatechange',successCallback,false);
//配置参数
var data = encodeURIComponent(input.value);
request.open('GET','php/xue.php?xueid='+data,true);
//发送请求
request.send(null);
}
}
}
//成功回调
function successCallback() {
// 当Ajax对象的readyState状态属性变更为4时, 表示请求成功并返回了数据
if(request.readyState === 4){
//获取页面元素，并将数据渲染到DOM元素中
// console.log(request.responseText);
tishi.innerHTML = request.responseText;
}
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
xue.php后台PHP代码：
<?php
$xueId = isset($_GET['xueid']) ? $_GET['xueid'] : null;
$userInfo = [
['xueid'=>1, 'username'=>'张军', 'gender'=>'男', 'age'=>16,'shuxue'=>"96",'yuwen'=>'100'],
['xueid'=>2, 'username'=>'李俊明', 'gender'=>'男', 'age'=>15,'shuxue'=>"66",'yuwen'=>'80'],
['xueid'=>3, 'username'=>'王丽', 'gender'=>'女', 'age'=>23,'shuxue'=>"100",'yuwen'=>'100'],
];
$res = '';
foreach ($userInfo as $user) {
if ($user['xueid'] === intval($xueId)) {
$res .= '学号:'.$user['xueid'].'<br/>'.$user['username'].'，您好！<br/>'.$user['gender'].'，'.$user['age'].'岁<br>成绩：'.'数学：'.$user['shuxue'].' 语文：'.$user['yuwen'];
}
}
echo empty($res) ? '<span style="color: red;">没有找到该学号用户</span>' : $res;
exit;点击 "运行实例" 按钮查看在线实例
本地运行效果截图如下：
二、Ajax - POST 请求数据-用户登陆案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax - POST 请求数据-用户登陆案例</title>
</head>
<body>
<h2>用户登陆</h2>
<form action="" name="login">
<p>
<label for="username">用户名：</label>
<input type="text" name="username" id="username" placeholder="Joe">
</p>
<p>
<label for="password">密码：</label>
<input type="password" name="password" id="password" placeholder="*****">
</p>
<p>
<label for="email">邮箱：</label>
<input type="text" name="email" id="email" placeholder="admin@php.cn">
</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();
/**********************************************************/
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){
//1.创建非空验证提示信息
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:
tips.innerText = '未定义错误';
}
ev.target.parentNode.appendChild(tips);
}
//将焦点锁定到错误数据上
ev.target.focus();
}
}
// 2.表单非空验证
login.username.addEventListener('blur',isEmpty,false);
login.email.addEventListener('blur',isEmpty,false);
login.password.addEventListener('blur',isEmpty,false);
//定义函数isEmpty
function isEmpty(ev) {
if(ev.target.value.length === 0){
//1.创建非空验证提示信息
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:
tips.innerText = '未定义错误';
}
ev.target.parentNode.appendChild(tips);
}
//将焦点锁定到错误数据上
ev.target.focus();
}
}
/************************************************/
//3.用户输入内容时，为控件input事件添加监听器
login.username.addEventListener('input',clearTips, false);
login.password.addEventListener('input',clearTips, false);
login.email.addEventListener('input',clearTips,false);
//定义事件监听方法clearTips
function clearTips(ev) {
var tips = ev.target.nextElementSibling;
if(tips !== null){
//移除提示信息元素
tips.parentNode.removeChild(tips);
}
}
/******************************************************/
// 4.Ajax异步验证
btn.addEventListener('click',check,false);
//click事件监听方法
function check(ev) {
//获取要提交的数据
var username = login.username.value;
var password = login.password.value;
var email = login.email.value;
//当没有输入任何相间时，禁止提交
if(username.length ===0 || password.length === 0 || email.length ===0){
//移除当前点击事件
ev.target.removeEventListener('click',check,false);
//模拟第一个输入框的blur事件，等待用户输入数据
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','php/checks.php',true);
//关键步骤：POST请求，需要设置请求头：以表单数据格式发送数据
request.setRequestHeader('content-type','application/x-www-form-urlencoded;charset=utf-8');
//发送请求
request.send(data);
}
function successCallback(ev) {
// console.log(ev.target);
if (request.readyState === 4){
console.log(request.responseText);
}
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
后台checks.php请求代码：
<?php
session_start();
// 获取表单提交的数据
$username = $_POST['username'];
$email = $_POST['email'];
$password = sha1($_POST['password']);
// 为简化代码,不用数据表验证,使用硬编码,只验证邮箱与密码
if ($username === 'admin' && $password === sha1('123456')) {
$_SESSION['username'] = $username;
$_SESSION['email'] = $email;
echo json_encode(['status'=>1, 'message'=>'验证成功']);
} else {
echo json_encode(['status'=>0, 'message'=>'验证失败']);
}
exit;点击 "运行实例" 按钮查看在线实例
本地运行效果截图：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
