Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Ajax实战
Blogger Information
Blog 60
fans 5
comment 3
visits 65267
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Ajax实战
longlong
Original
563 people have browsed it

1. Ajax实战案例

本案例是完善课堂作业，将表单用户验证加入，并且使用会话控制技术，使用户名在主页显示，另外通过学习Ajax技术的特点，做了一个简单的实时搜索，不过很简陋，大概实现了一下效果，如果需要优化的话，应该将实时搜索结果的地方使用动态添加的方式，创建节点，然后动态添加到页面，后期我会再优化，案例代码如下：

  • config.php
  1. <?php
  2. return [
  3.     'type' => $type ?? 'mysql',
  4.     'host' => $host ?? 'php.edu',
  5.     'username' => $username ?? 'root',
  6.     'password' => $password ?? 'root',
  7.     'dbname' => $dbname ?? 'first',
  8.     'port' => $port ?? '3306',
  9.     'charset' => $charset ?? 'utf8',
  10. ];
  • connect.php
  1. <?php
  2. // 连接数据库
  3. $config = require __DIR__.'/config.php';
  4. extract($config);
  6. $dsn = sprintf('%s:host=%s;dbname=%s;charset=%s;port=%s',$type,$host,$dbname,$charset,$port);
  8. try {
  9.     $pdo = new PDO($dsn,$username,$password);
  10. } catch (Throwable $e) {
  11.     exit($e->getMessage());
  12. } catch (PDOException $e) {
  13.     exit($e->getMessage());
  14. }
  • login.php
  1. <?php
  2. session_start();
  3. if ($_GET['action']==='out' && !empty($_SESSION)){
  4.   $_SESSION = [];
  5. }
  6. ?>
  8. <!DOCTYPE html>
  9. <html lang="en">
  10.   <head>
  11.     <meta charset="UTF-8" />
  12.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  13.     <title>登录页面</title>
  14.     <style>
  15.       form {
  16.         display: grid;
  17.         gap: 10px;
  18.         justify-items: center;
  19.       }
  20.       h3 {
  21.         text-align: center;
  22.       }
  23.       input {
  24.         width: 300px;
  25.         outline: 1px solid #999;
  26.         border: none;
  28.         padding: 5px 10px;
  29.       }
  30.       button {
  31.         width: 100px;
  32.         padding: 5px 0;
  33.       }
  34.       button:hover {
  35.         cursor: pointer;
  36.       }
  37.     </style>
  38.   </head>
  39.   <body>
  40.     <!-- 登录表单 -->
  41.     <h3>账户登录</h3>
  42.     <form action="" method="POST" autocomplete="off">
  43.       <input
  44.         type="text"
  45.         name="username"
  46.         placeholder="请输入用户名"
  47.         required
  48.         onkeyup="show(this.value)"
  49.       />
  50.       <span id="liveSearch"></span>
  51.       <input type="password" name="pwd" placeholder="请输入密码" required />
  52.       <button>登录</button>
  53.     </form>
  54.     <script>
  55.       // 做了一个简答的输入框实时搜索
  56.       function show(str) {
  57.         let xhr = new XMLHttpRequest();
  58.         xhr.onreadystatechange = function () {
  59.           if (xhr.readyState === 4 && xhr.status === 200) {
  60.             // 将后端响应数据放入前端的span中
  61.             document.querySelector("#liveSearch").innerHTML = xhr.responseText;
  62.           }
  63.         };
  64.         xhr.open("GET", "search.php?q=" + str, true);
  65.         xhr.send();
  66.       }
  68.       // 获取表单
  69.       let form = document.querySelector("form");
  70.       // 这里必须关掉表单自身的提交功能，否则Ajax的数据请求会失效
  71.       form.onsubmit = function () {
  72.         return false;
  73.       };
  74.       // 获取按钮
  75.       let btn = document.querySelector("button");
  76.       // 给按钮绑定点击事件
  77.       btn.addEventListener("click", getData, false);
  78.       function getData() {
  79.         // 1. 创建Ajax对象
  80.         let xhr = new XMLHttpRequest();
  81.         // 2. 监听请求
  82.         xhr.onreadystatechange = function () {
  83.           if (xhr.readyState === 4 && xhr.status === 200) {
  84.             // 这里是后端响应完成传过来的json数据
  85.             // console.log(xhr.responseText);
  86.             // 处理json数据，渲染到页面上
  87.             let obj = JSON.parse(xhr.responseText);
  88.             // console.log(obj);
  89.             let error = "未知错误";
  90.             switch (obj.status) {
  91.               case 0:
  92.                 error = obj.message;
  93.                 break;
  94.               case 1:
  95.                 alert("恭喜你，验证通过！");
  96.                 location.href = "index.php";
  97.                 break;
  98.               default:
  99.                 error = "未知错误";
  100.             }
  101.             let span = document.createElement("span");
  102.             span.innerHTML = error;
  103.             form.appendChild(span);
  104.           }
  105.         };
  106.         // 3. 初始化请求参数
  107.         xhr.open("POST", "check.php", true);
  108.         // 4. 以表单数据对象的形式发送
  109.         let data = new FormData(form);
  110.         // 5. 发送数据
  111.         xhr.send(data);
  112.       }
  113.     </script>
  114.   </body>
  115. </html>
  • search.php
  1. <?php
  2. // 连接数据库
  3. require_once __DIR__."/connect.php";
  4. // 拿到GET参数值
  5. $q=$_GET["q"];
  6. // 查询语句
  7. $sql = "SELECT `username` FROM `student` ";
  8. $users = $pdo->query($sql)->fetchAll(PDO::FETCH_ASSOC);
  9. // print_r($users);
  10. // 当用户按下键盘时，就将结果集遍历，并与GET参数值对比
  11. // 如果数据库中的用户名包含了输入的字符，那么输出提示用户名
  12. if($q){
  13.     foreach($users as $user){
  14.         if(strpos($user['username'],$q) !== false){
  15.             echo $user['username'],'<br>';
  16.         }
  17.     }
  18. }
  20. ?>
  • check.php
  1. <?php
  2. session_start();
  3. // 测试数据是否能正常传输
  4. // print_r($_POST);
  6. // 连接数据库
  7. require_once __DIR__."/connect.php";
  9. $sql = "SELECT `username`,`password` FROM `student`";
  10. $users = $pdo->query($sql)->fetchAll(PDO::FETCH_ASSOC);
  11. // 给定一个初始状态，便于后期返回数据
  12. $status = 0;
  13. $message = '<span style="color:red;">用户名或密码错误</span>';
  14. foreach($users as $user){
  15.     if ($user['username']===$_POST['username'] && $user['password']===$_POST['pwd']){
  16.         // 如果验证成功，将用户名保存到$_SESSION中，便于index.php中使用
  17.         $_SESSION['name'] = $_POST['username'];
  18.         $_SESSION['status'] = 1;
  19.         $status = 1;
  20.         $message = '<span style="color:green">恭喜您，验证通过</span>';
  21.     }
  22. }
  23. echo json_encode(['status'=>$status,'message'=>$message],JSON_UNESCAPED_UNICODE );
  • index.php
  1. <?php
  2. session_start();
  3. // 如果没有通过登录页面提交，则不允许登录
  4. if (empty($_SESSION) || $_SESSION['status']!==1){
  5.    die(
  6.      '<script>
  7.         alert("请回去登录再进入主页");
  8.         location.href = "login.php";
  9.      </script>'
  10.    );
  11. }
  12. ?>
  13. <!DOCTYPE html>
  14. <html lang="en">
  15.   <head>
  16.     <meta charset="UTF-8" />
  17.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  18.     <title>商城主页</title>
  19.     <style>
  20.       a {
  21.         text-decoration: none;
  22.         color: #666;
  23.         padding: 10px 20px;
  24.         background: rgb(38, 160, 168);
  25.         color: white;
  26.         border-radius: 5px;
  27.       }
  28.       a:hover {
  29.         background-color: rgb(4, 62, 66);
  30.       }
  31.     </style>
  32.   </head>
  33.   <body>
  34.     <h1>
  35.       恭喜您
  36.       <?=$_SESSION['name']?>，祝您购物愉快！
  37.     </h1>
  38.     <a href="login.php?action=out">退出</a>
  39.   </body>
  40. </html>

操作的数据库如下：

接下来，进入主页开始验证：

  • 开始输入时，实时搜索的效果，如下：

  • 点击登录时，效果如下：

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：很有想法
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post