Ajax实战

1. Ajax实战案例

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

config.php

<?php
return [
    'type' => $type ?? 'mysql',
    'host' => $host ?? 'php.edu',
    'username' => $username ?? 'root',
    'password' => $password ?? 'root',
    'dbname' => $dbname ?? 'first',
    'port' => $port ?? '3306',
    'charset' => $charset ?? 'utf8',
];

connect.php

<?php
// 连接数据库
$config = require __DIR__.'/config.php';
extract($config);
$dsn = sprintf('%s:host=%s;dbname=%s;charset=%s;port=%s',$type,$host,$dbname,$charset,$port);
try {
    $pdo = new PDO($dsn,$username,$password);
} catch (Throwable $e) {
    exit($e->getMessage());
} catch (PDOException $e) {
    exit($e->getMessage());
}

<?php
session_start();
if ($_GET['action']==='out' && !empty($_SESSION)){
  $_SESSION = [];
}
?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录页面</title>
    <style>
      form {
        display: grid;
        gap: 10px;
        justify-items: center;
      }
      h3 {
        text-align: center;
      }
      input {
        width: 300px;
        outline: 1px solid #999;
        border: none;
        padding: 5px 10px;
      }
      button {
        width: 100px;
        padding: 5px 0;
      }
      button:hover {
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <!-- 登录表单 -->
    <h3>账户登录</h3>
    <form action="" method="POST" autocomplete="off">
      <input
        type="text"
        name="username"
        placeholder="请输入用户名"
        required
        onkeyup="show(this.value)"
      />
      <span id="liveSearch"></span>
      <input type="password" name="pwd" placeholder="请输入密码" required />
      <button>登录</button>
    </form>
    <script>
      // 做了一个简答的输入框实时搜索
      function show(str) {
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4 && xhr.status === 200) {
            // 将后端响应数据放入前端的span中
            document.querySelector("#liveSearch").innerHTML = xhr.responseText;
          }
        };
        xhr.open("GET", "search.php?q=" + str, true);
        xhr.send();
      }
      // 获取表单
      let form = document.querySelector("form");
      // 这里必须关掉表单自身的提交功能，否则Ajax的数据请求会失效
      form.onsubmit = function () {
        return false;
      };
      // 获取按钮
      let btn = document.querySelector("button");
      // 给按钮绑定点击事件
      btn.addEventListener("click", getData, false);
      function getData() {
        // 1. 创建Ajax对象
        let xhr = new XMLHttpRequest();
        // 2. 监听请求
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4 && xhr.status === 200) {
            // 这里是后端响应完成传过来的json数据
            // console.log(xhr.responseText);
            // 处理json数据，渲染到页面上
            let obj = JSON.parse(xhr.responseText);
            // console.log(obj);
            let error = "未知错误";
            switch (obj.status) {
              case 0:
                error = obj.message;
                break;
              case 1:
                alert("恭喜你，验证通过！");
                location.href = "index.php";
                break;
              default:
                error = "未知错误";
            }
            let span = document.createElement("span");
            span.innerHTML = error;
            form.appendChild(span);
          }
        };
        // 3. 初始化请求参数
        xhr.open("POST", "check.php", true);
        // 4. 以表单数据对象的形式发送
        let data = new FormData(form);
        // 5. 发送数据
        xhr.send(data);
      }
    </script>
  </body>
</html>

search.php

<?php
// 连接数据库
require_once __DIR__."/connect.php";
// 拿到GET参数值
$q=$_GET["q"];
// 查询语句
$sql = "SELECT `username` FROM `student` ";
$users = $pdo->query($sql)->fetchAll(PDO::FETCH_ASSOC);
// print_r($users);
// 当用户按下键盘时，就将结果集遍历，并与GET参数值对比
// 如果数据库中的用户名包含了输入的字符，那么输出提示用户名
if($q){
    foreach($users as $user){
        if(strpos($user['username'],$q) !== false){
            echo $user['username'],'<br>';
        }
    }
}
?>

check.php

<?php
session_start();
// 测试数据是否能正常传输
// print_r($_POST);
// 连接数据库
require_once __DIR__."/connect.php";
$sql = "SELECT `username`,`password` FROM `student`";
$users = $pdo->query($sql)->fetchAll(PDO::FETCH_ASSOC);
// 给定一个初始状态，便于后期返回数据
$status = 0;
$message = '<span style="color:red;">用户名或密码错误</span>';
foreach($users as $user){
    if ($user['username']===$_POST['username'] && $user['password']===$_POST['pwd']){
        // 如果验证成功，将用户名保存到$_SESSION中，便于index.php中使用
        $_SESSION['name'] = $_POST['username'];
        $_SESSION['status'] = 1;
        $status = 1;
        $message = '<span style="color:green">恭喜您，验证通过</span>';
    }
}
echo json_encode(['status'=>$status,'message'=>$message],JSON_UNESCAPED_UNICODE );

index.php

<?php
session_start();
// 如果没有通过登录页面提交，则不允许登录
if (empty($_SESSION) || $_SESSION['status']!==1){
   die(
     '<script>
        alert("请回去登录再进入主页");
        location.href = "login.php";
     </script>'
   );
}
?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>商城主页</title>
    <style>
      a {
        text-decoration: none;
        color: #666;
        padding: 10px 20px;
        background: rgb(38, 160, 168);
        color: white;
        border-radius: 5px;
      }
      a:hover {
        background-color: rgb(4, 62, 66);
      }
    </style>
  </head>
  <body>
    <h1>
      恭喜您
      <?=$_SESSION['name']?>，祝您购物愉快！
    </h1>
    <a href="login.php?action=out">退出</a>
  </body>
</html>

操作的数据库如下：

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

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

点击登录时，效果如下：

1. Ajax实战案例

相关文章