search

博客列表 >JS基础-ajax 的基础用法/使用 ajax 实现登陆功能小实战

JS基础-ajax 的基础用法/使用 ajax 实现登陆功能小实战

岂几岂几
岂几岂几原创
2020年05月27日 00:00:49583浏览

ajax 的基础用法/使用 ajax 实现登陆功能小实战

1. ajax 发送请求的基本步骤

1.1. ajax 发送 GET 请求

ajax 发送 GET 请求的基本步骤

    1. 创建 ajax 对象
    1. 监听请求(监听当前请求状态的变化: 当当前请求的状态=4 时, 则请求成功, 状态码为 200 时, 表示请求被正常处理).

    其他请求状态:

    • 0 : (未初始化)还没有调用 send()方法
    • 1 : (载入)已调用 send()方法，正在发送请求
    • 2 : (载入完成)send()方法执行完成，
    • 3 : (交互)正在解析响应内容
    • 4 : (完成)响应内容解析完成，可以在客户端调用了

    服务器处理请求返回的状态码很多, 但暂时只需记住 200 为成功, 其他状态码为不成功即可.

    1. 初始化请求参数, 调用格式: 调用格式: xhr.open(当前请求类型, 当前请求脚本地址, 是否异步);
    1. 发送请求, 最好给发送请求的方法传入一个 null 值, 以防止古老的浏览器报错.
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>ajax中的GET请求操作</title>
  7. </head>
  8. <body>
  9.     <h1>helo</h1>
  10.     <script>
  11.         // 1. 创建ajax对象
  12.         var xhr = new XMLHttpRequest;
  13.         // 2. 监听请求(监听当前请求状态的变化: 当当前请求的状态=4时, 则请求成功, 状态码为200时, 表示请求被正常处理)
  14.         xhr.onreadystatechange = function() {
  15.             if(xhr.readyState === 4 && xhr.status === 200) {
  16.                 // 从服务器返回的相应数据, 是个字符串.
  17.                 console.log(xhr.responseText);
  18.             }
  19.         };
  20.         // 3. 初始化请求参数
  21.         /* 调用格式: xhr.open(当前请求类型, 当前请求脚本地址, 是否异步);*/
  22.         xhr.open('GET', 'test1.php', true);
  23.         // 4. 发送请求
  24.         /* 入参null是防止古老的浏览器报错, 仅此而已, 不传也没关系 */
  25.         xhr.send(null);
  26.     </script>
  27. </body>
  28. </html>

1.2. ajax 发送 POST 请求

步骤跟 GET 类似

1.2.1. ajax 发送内容为表单数据的 POST 请求

  • 前面 3 步跟发送 GET 相同.

  • 设置请求头, 指定请求内容以表单类型数据进行发送: xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')

  • 再执行请求发送, 在发送请求的send方法中传入转成 JSON 字符串的表单数据.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>ajax中的POST请求操作(发送表单数据)</title>
  7. </head>
  8. <body>
  9.     <h1>hello</h1>
  10.     <script>
  11.         // 1. 创建ajax对象
  12.         var xhr = new XMLHttpRequest;
  13.         // 2. 监听请求(监听当前请求状态的变化: 当当前请求的状态=4时, 则请求成功, 状态码为200时, 表示请求被正常处理)
  14.         xhr.onreadystatechange = function() {
  15.             if(xhr.readyState === 4 && xhr.status === 200) {
  16.                 // 从服务器返回的相应数据, 是个字符串.
  17.                 console.log(xhr.responseText);
  18.             }
  19.         };
  20.         // 3. 初始化请求参数
  21.         /* 调用格式: xhr.open(当前请求类型, 当前请求脚本地址, 是否异步);*/
  22.         xhr.open('POST', 'test2.php', true);
  23.         // 4. 设置请求头, 指定请求内容以表单类型数据进行发送
  24.         xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
  26.         // 假设只是要插入的表单数据对象
  27.         var user = {
  28.             username: "zhangsan",
  29.             password: "123456",
  30.         };
  31.         // 把js表单对象转换为json字符串来发送
  32.         var dataStr = JSON.stringify(user);
  33.         // 4. 发送请求
  34.         xhr.send(dataStr);
  35.     </script>
  36. </body>
  37. </html>

1.2.2 ajax 发送内容为 JSON 字符串数据的 POST 请求

操作与发送表单数据的 POST 请求基本相同, 唯一区别在设置请求头时, 把值设置为application/json;charset=utf-8即可. 即: xhr.setRequestHeader('content-type', 'application/json;charset=utf-8')

1.2.3 ajax 发送内容为 FormData 封装的数据的 POST 请求

操作与发送表单数据的 POST 请求基本相同, 区别在于发送 FormData 封装的数据的请求, 不需要设置请求头.

  • FormData 不需要序列化, 可直接传入 send 方法发送

  • FormData 的相关操作:

    • 创建 FormData 对象: var formData = new FormData(表单对象[可选]);

    • 向 FormData 对象中添加数据: FormData.append(key, value);

    • 从 FormData 对象中删除数据: FormData.delete(key);

    • 获取 FormData 对象中某个 key 的值: FormData.get(key);

  1. <script>
  2. // 新建FormData对象
  3. var formData = new FormData();
  4. // 如果使用FormData对象封装表单数据, 则在新建FormData对象时把表单对象作为参数传入
  5. var formData1 = new FormData(document.forms[0]);
  6. // 向FormData对象中添加数据: FormData.append(key, value)
  7. formData.append("username", "admin");
  8. formData.append("password", "admin123456");
  9. // 从FormData对象中删除数据: FormData.delete(key);
  10. formData.delete("username");
  11. // 获取FormData对象中某个key的值: FormData.get(key);
  12. formData.get("password");
  13. </script>

2. 使用 ajax 实现登陆功能小实战

实现思路

  • 登录页面做重复登录验证, 即验证session中是否存有键名=user的键值对, 若有, 则提示”不能重复登录”, 然后跳转到主页.

  • 前后端都做录入项的空值判断, 前端判断是为了过滤出缺少录入值的请求, 减轻服务器的压力. 而后端判断是为了用户使用工具模拟发送登录请求, 绕过前端验证.

  • 使用ajax发送异步登录请求, 验证成功, 则跳转到主页; 反之提示异常.

  • 后端需验证session中是否以保存有用户信息, 若没有, 提示用户先登录, 并跳转到登录页.

  • 后端验证登录信息, 成功, 则把用户信息保存到session中; 失败, 则返回异常信息数组(转换为json字符串).

  • 注销操作, 删除session中的用户信息, 返回登录页.

实现代码

登录页login.php

  1. <?php
  2. session_start();
  3. if(isset($_SESSION['user']) || !empty($_SESSION['user'])) {
  4.     echo ('<script>alert("请不要重复登录");window.location.href="/js/0521ajax/homework/home.php";</script>');
  5. }
  6. ?>
  7. <!DOCTYPE html>
  8. <html lang="en">
  9.   <head>
  10.     <meta charset="UTF-8" />
  11.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  12.     <title>用户登陆</title>
  13.     <style>
  14.       @import 'style.css';
  15.     </style>
  16.   </head>
  17.   <body>
  18.     <section>
  19.       <div class="login-title">
  20.         <span>用户登录</span>
  21.       </div>
  22.       <form action="" onsubmit="return false;">
  23.         <div class="login-content">
  24.           <div class="item-box">
  25.             <label for="username">用户名:</label>
  26.             <input type="text" name="username" maxlength="50" value=""/>
  27.           </div>
  28.           <div class="item-box">
  29.             <label for="password">密码:</label>
  30.             <input type="password" name="password" maxlength="50" value=""/>
  31.           </div>
  32.           <div class="item-box">
  33.             <label for="captcha_code">验证码:</label>
  34.             <div class="captcha">
  35.               <input type="text" name="captcha_code" maxlength="4"/>
  36.               <img src="javascript:void(0);" alt="" onclick="getCaptcha()" />
  37.             </div>
  38.           </div>
  39.           <div class="item-box">
  40.             <button onclick="doLogin()">登陆</button>
  41.           </div>
  42.         </div>
  43.       </form>
  44.     </section>
  45.   </body>
  46.   <script>
  47.     // 登录执行函数
  48.     function doLogin() {
  49.       // 获取所有input元素
  50.       var inputs = document.querySelectorAll('input');
  51.       // 判空操作
  52.       for(var index = 0; index < inputs.length; index ++) {
  53.         var input = inputs[index];
  54.         var inputValue = input.value;
  55.         // 空字符串也不算
  56.         if(inputValue === undefined || inputValue.trim() == '' ) {
  57.           if(input.name == 'captcha_code') {
  58.             alert('验证码不能为空');
  59.             return false;
  60.           } else {
  61.             alert(input.previousElementSibling.innerText + '不能为空');
  62.             return false;
  63.           }
  64.         }
  65.       }
  67.       // 使用ajax发送异步登录请求
  68.       xhr = new XMLHttpRequest();
  69.       xhr.onreadystatechange = function () {
  70.         if (xhr.readyState === 4 && xhr.status === 200) {
  71.           // document.write(xhr.responseText);
  72.           var res = JSON.parse(xhr.responseText);
  73.           // 约定status值为1时表示登录成功
  74.           if(res.status != undefined && res.status == 1) {
  75.             alert(res.message);
  76.             window.location.href = '/js/0521ajax/homework/home.php';
  77.           } else {
  78.             // 登陆失败
  79.             alert(res.message);
  80.             // 刷新验证码
  81.             getCaptcha();
  82.             // 登陆失败的输入项获得焦点
  83.             document.getElementsByName(res.data)[0].focus();
  85.           }
  86.         }
  87.       };
  89.       // 3. 初始化请求参数
  90.       /* 调用格式: xhr.open(当前请求类型, 当前请求脚本地址, 是否异步);*/
  91.       xhr.open("POST", "doLogin.php", true);
  92.       // 4. 设置请求头, 指定请求内容以表单类型数据进行发送
  93.       //   xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
  95.       var user = document.querySelector("form");
  96.       //   var dataStr = JSON.stringify(user);
  97.       var fd = new FormData(user);
  98.       fd.set('password', fd.get('password').trim());
  100.       xhr.send(fd);
  101.     }
  103.     // 验证码获取函数
  104.     function getCaptcha() {
  105.       // 发送异步GET请求获取
  106.       xhr = new XMLHttpRequest();
  107.       xhr.onreadystatechange = function () {
  108.         if (xhr.readyState === 4 && xhr.status === 200) {
  109.           // 从服务器返回的相应数据, 是个字符串.
  110.           //   console.log(xhr.responseText);
  111.           //   return xhr.responseText;
  112.           document.getElementsByTagName("img").item(0).src = xhr.responseText;
  113.         }
  114.       };
  115.       xhr.open("GET", "createCaptcha.php", true);
  116.       xhr.send(null);
  117.     };
  119.     // 进入页面时获取一次验证码
  120.     getCaptcha();
  121.   </script>
  122. </html>

获取验证码脚本文件createCaptcha.php

  1. <?php
  2. require 'vendor/autoload.php';
  4. use Gregwar\Captcha\CaptchaBuilder;
  6. //生成验证码图片的Builder对象，配置相应属性(4位验证码)
  7. $builder = new CaptchaBuilder(4);
  8. //可以设置图片宽高及字体
  9. $builder->build($width = 100, $height = 40, $font = null);
  10. //获取验证码的内容
  11. $phrase = $builder->getPhrase();
  13. session_start();
  14. //把内容存入session
  15. $_SESSION['captcha'] = $phrase;
  17. // 返回验证码到客户端
  18. echo $builder->inline();

登录处理脚本文件doLogin.php

  1. <?php
  2. // $arr = print_r($_POST, true);
  4. $res = [
  5.     'status' => 1,
  6.     'message' => '登陆成功',
  7. ];
  9. // 各输入项判空
  10. // 用户名
  11. if (empty($_POST['username']) || trim($_POST['username']) == '') {
  12.     $res = [
  13.         'status' => 0,
  14.         'message' => '用户名不能为空',
  15.         'data' => 'username',
  16.     ];
  17.     echo json_encode($res);
  18.     exit;
  19. }
  20. // 密码
  21. if (empty($_POST['password']) || trim($_POST['password']) == '') {
  22.     $res = [
  23.         'status' => 0,
  24.         'message' => '密码不能为空',
  25.         'data' => 'password',
  26.     ];
  27.     echo json_encode($res);
  28.     exit;
  29. }
  30. // 验证码
  31. if (empty($_POST['captcha_code']) || trim($_POST['captcha_code']) == '') {
  32.     $res = [
  33.         'status' => 0,
  34.         'message' => '验证码不能为空',
  35.         'data' => 'captcha_code',
  36.     ];
  37.     echo json_encode($res);
  38.     exit;
  39. }
  41. // 开启session
  42. session_start();
  43. $captchaCode = trim($_POST['captcha_code']);
  44. // 判断验证码是否输入正确
  45. // 忽略大小写
  46. if (strtoupper($captchaCode) != strtoupper($_SESSION['captcha'])) {
  47.     $res = [
  48.         'status' => 0,
  49.         'message' => '验证码不正确',
  50.         'data' => 'captcha_code',
  51.     ];
  52.     echo json_encode($res);
  53.     exit;
  54. }
  56. // 创建PDO对象, 查询用户信息
  57. $pdo = new PDO('mysql:host=localhost;dbname=phpedu;charset=utf8;port=3306', 'root', 'root');
  58. $sql = 'SELECT `id`, `username`, `password`, `realname` from `user` WHERE `username` = ?';
  59. $username = trim($_POST['username']);
  60. $stmt = $pdo->prepare($sql);
  61. $stmt->execute([$username]);
  62. // var_dump($stmt->debugDumpParams());
  63. $userInfo = $stmt->fetch(PDO::FETCH_ASSOC);
  64. // 查到了, 比较加密后的密码
  65. if ($userInfo) {
  67.     // 密码比对成功
  68.     if (md5(trim($_POST['password']) == $userInfo['password'])) {
  69.         // 保存到session中的用户信息去掉密码
  70.         unset($userInfo['password']);
  71.         // 用户信息保存到session中
  72.         $_SESSION['user'] = $userInfo;
  73.         // 返回登陆成功的信息数组(json字符串)
  74.         echo json_encode($res);
  75.         exit;
  76.     } else {
  77.         // 比对不成功, 返回错误信息数组
  78.         $res = [
  79.             'status' => 0,
  80.             'message' => '密码错误',
  81.             'data' => 'username',
  82.         ];
  83.         echo json_encode($res);
  84.         exit;
  85.     }
  86. }
  88. // 没查到用户数据, 则用户名无效.
  89. $res = [
  90.     'status' => 0,
  91.     'message' => '无效的用户名',
  92.     'data' => 'username',
  93. ];
  94. echo json_encode($res);

主页页面文件home.php

  1. <?php
  2. session_start();
  3. if(!isset($_SESSION['user']) && empty($_SESSION['user'])) {
  4.     echo ('<script>alert("请先登录！");window.location.href="/js/0521ajax/homework/login.php";</script>');
  5. }
  7. $user = $_SESSION['user'];
  8. ?>
  9. <!DOCTYPE html>
  10. <html lang="en">
  11. <head>
  12.     <meta charset="UTF-8">
  13.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  14.     <title>欢迎!<?php echo($user['realname']); ?></title>
  15. </head>
  16. <body>
  17.     <h1>欢迎！<?php echo($user['realname']); ?></h1>
  18.     <h6><button onclick="logout(event)">注销</button></h6>
  19. </body>
  20. <script>
  21.     function logout(event) {
  22.         // 发送异步请求, 执行注销操作
  23.         var xhr = new XMLHttpRequest();
  24.         xhr.onreadystatechange = function() {
  25.             if (xhr.readyState === 4 && xhr.status === 200) {
  26.             var res = JSON.parse(xhr.responseText);
  27.             // 注销成功
  28.             if(res.status != undefined && res.status == "1") {
  29.                 alert(res.message);
  30.                 window.location = 'login.php';
  31.             } else {
  32.                 注销失败
  33.                 alert('注销失败');
  34.             }
  35.             }
  37.         }
  39.         xhr.open('GET', 'doLogout.php', true);
  41.         xhr.send(null);
  42.     }
  43. </script>
  44. </html>

注销登录脚本文件doLogout.php

  1. <?php
  2. session_start();
  3. // 把用户信息从session中移除
  4. unset($_SESSION['user']);
  6. echo json_encode([
  7.     'status' => "1",
  8.     'message' => '注销成功'
  9. ]);

运行效果

学习心得

ajax提交请求的基本用法比较过程化, 记住步骤即可. ajax提交请求可以实现页面局部数据刷新, 提升交互体验, 可以让从后端获取数据的操作零散化,让一些不是很重要的数据获取出错时,不至于让整个页面无法浏览.ajax提交请求,是实现前后端分离的基础.

上一条：CORS和JSONP的跨域请求下一条：DOM操作与事件机制
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多