简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 用户登录表单数据的前端处理与后端PHP处理流程（1125）
Blogger Information
Blog 20
fans 0
comment 0
visits 8586
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
用户登录表单数据的前端处理与后端PHP处理流程（1125）
A 管志岗-电商策划
Original
441 people have browsed it

用户登录表单数据的前端处理与后端PHP处理流程

前端代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8" />
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.   <title>首页</title>
  9.   <link rel="stylesheet" href="static/css/style.css" />
  10. </head>
  12. <body>
  13.   <?php
  14.   require __DIR__ . '/config/common.php';
  15.   ?>
  16.   <!-- 动态替换首页导航  -->
  17.   <header>
  18.     <!-- 动态替换首页导航  -->
  19.     <nav>
  20.       <?php
  21.       // $navs = include './data/header.php';
  22.       $navs = include TMPL_PATH_PUBLIC . '/header.php';
  24.       ?>
  25.       <?php foreach ($navs as $nav) : ?>
  26.         <a href="<?= $nav['url'] ?>"><?= $nav['title'] ?></a>
  27.       <?php endforeach ?>
  28.     </nav>
  29.   </header>
  30.   <!-- 主体 -->
  31.   <main>
  32.     <!-- 用户登录 -->
  33.     <form class="login" id="login.php">
  34.       <table>
  35.         <caption>
  36.           用户登录
  37.         </caption>
  38.         <tbody>
  39.           <tr>
  40.             <td><label for="email">邮箱:</label></td>
  41.             <td><input type="email" name="email" id="email" value="" /></td>
  42.           </tr>
  43.           <tr>
  44.             <td><label for="password">密码:</label></td>
  45.             <td><input type="password" name="password" id="password" /></td>
  46.           </tr>
  48.           <tr>
  49.             <td colspan="2"><button type="button" onclick="check(this)">提交</button></td>
  50.           </tr>
  51.         </tbody>
  52.       </table>
  53.     </form>
  55.     <p>
  56.       <a href="register.html">没有帐号,请先注册</a>
  57.     </p>
  58.   </main>
  59.   <?php
  60.   include TMPL_PATH_PUBLIC . '/footer.php'
  61.   ?>
  62.   <script>
  63.     async function check(btn) {
  64.       const email = btn.form.email.value.trim();
  65.       const password = btn.form.password.value.trim();
  66.       // 非空验证
  67.       if (email.length > 0 && password.length > 0) {
  68.         const response = await fetch('./lib/user/login.php', {
  69.           // 请求类型
  70.           method: 'POST',
  71.           // 请求头 
  72.           headers: {
  73.             'Content-Type': 'application/json; charset = utf-8',
  74.           },
  75.           body: JSON.stringify({
  76.             email,
  77.             password
  78.           })
  79.         });
  80.         // 2. 解析数据
  81.         const data = await response.json();
  82.         console.log(data);
  83.       } else {
  84.         alert('邮箱或密码不能为空');
  85.         return false;
  86.       }
  87.     }
  88.   </script>
  89. </body>
  90. </html>

后端代码

  1. <?php
  2. // php接收原始数据
  3. $json = file_get_contents('php://input');
  4. // json 转成php可以处理的数据，这里是数组，也可以是对象，不加true就是对象
  5. $user = json_decode($json, true);
  6. // 验证
  8. // 返回数据
  9. echo json_encode($user);

逻辑图
逻辑图

Correcting teacher：PHPzPHPz

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！