任务18 优化跳转目标
任务19 注册时使用Ajax验证用户名是否有效
- 19.1 修改singup.php
- 19.2 创建checkUsername.php
任务20 beforeSend的使用
任务22 验证码的使用

任务18 优化跳转目标

当管理员修改其他会员资料的时候，修改完后，应跳转到修改对应用户的那一页数据

我们可以使用一个标识符来实现
首先在admin.php中

在nav.php中

在modify.php中
如果 $source不存在，或者$source既不等于admin也不等于member
那么页面的来源是不对的

在修改页面点击提交后，是postModify.php处理修改请求的，但是在postModify.php中，修改完成后的url没有回到admin.php的

我们可以根据$source的情况来决定url是跳转回admin.php，那么我们怎么在postModify.php中拿到$source呢？现在$source是在modify.php中的。
可以通过隐藏域来解决。
在modify.php中

在postModify.php中，添加

但是现在还有一个问题，需要把当前页码也传递才行
在admin.php中

在modify.php中

在postModify.php中

然后修改一个会员资料，观察结果，是否返回修改该会员的那一页数据

任务19 注册时使用Ajax验证用户名是否有效

19.1 修改singup.php

这里我们使用JQuery中的ajax方法
在singup.php中
先引入JQuery

给用户名的表单绑定失去焦点事件

添加span标签用于显示提示消息

编写checkUsername()事件处理函数

添加样式类

19.2 创建checkUsername.php

用于处理检查用户名是否可用的请求

完成后进行测试，填写用户名，然后
效果如下：

按F12，然后在控制台中的Network可以查看网络请求
填写用户名，然后点击其他地方，就可以看到确实是发送了请求

任务20 beforeSend的使用

从上一个任务我们可知，使用JQuery中的ajax()可以使网页无刷新进行网络请求
用户在填写完用户名点击其他地方后，则会去发起网络请求验证用户名是否可用，但目前我们这样做，用户并不清楚这一处理，所以我们可以加一个loading的动图，加强用户体验性。
先引入图片

在singup.php中

完成后进行测试

由于现在我们是在本地运行的，所以不会存在网络卡顿的状况，因此动图会一闪而过就隐藏了
可以在checkUsername.php中

测试完后可以注释掉或者删除上图红框代码。

任务22 验证码的使用

在用户进行登录的时候使用验证码

22.1 创建code.php

code.php用于输出验证码图片

<?php
/**
 * 字母+数字的验证码生成
 */
// 开启session
session_start();
//1.创建黑色画布
$image = imagecreatetruecolor(100, 30);
//2.为画布定义(背景)颜色
$bgcolor = imagecolorallocate($image, 255, 255, 255);
//3.填充颜色
imagefill($image, 0, 0, $bgcolor);
// 4.设置验证码内容
//4.1 定义验证码的内容
$content = "ABCDEFGHIJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz123456789";
//4.1 创建一个变量存储产生的验证码数据，便于用户提交核对
$captcha = "";
for ($i = 0; $i < 4; $i++) {  //验证码长度为4
    // 字体大小
    $fontsize = 10;
    // 字体颜色
    $fontcolor = imagecolorallocate($image, mt_rand(0, 120), mt_rand(0, 120), mt_rand(0, 120));
    // 设置字体内容
    $fontcontent = substr($content, mt_rand(0, strlen($content)), 1);
    $captcha .= $fontcontent;
    // 显示的坐标
    $x = ($i * 100 / 4) + mt_rand(5, 10);
    $y = mt_rand(5, 10);
    // 填充内容到画布中
    imagestring($image, $fontsize, $x, $y, $fontcontent, $fontcolor);
}
$_SESSION["captcha"] = $captcha;
//4.3 设置背景干扰元素
for ($i = 0; $i < 200; $i++) {
    $pointcolor = imagecolorallocate($image, mt_rand(50, 200), mt_rand(50, 200), mt_rand(50, 200));
    imagesetpixel($image, mt_rand(1, 99), mt_rand(1, 29), $pointcolor);
}
//4.4 设置干扰线
for ($i = 0; $i < 3; $i++) {
    $linecolor = imagecolorallocate($image, mt_rand(50, 200), mt_rand(50, 200), mt_rand(50, 200));
    imageline($image, mt_rand(1, 99), mt_rand(1, 29), mt_rand(1, 99), mt_rand(1, 29), $linecolor);
}
//5.向浏览器输出图片头信息
header('content-type:image/png');
//6.输出图片到浏览器
imagepng($image);
//7.销毁图片
imagedestroy($image);