用户登录表单数据的前端处理与后端PHP处理流程
前端代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>首页</title><link rel="stylesheet" href="static/css/style.css" /></head><body><?phprequire __DIR__ . '/config/common.php';?><!-- 动态替换首页导航 --><header><!-- 动态替换首页导航 --><nav><?php// $navs = include './data/header.php';$navs = include TMPL_PATH_PUBLIC . '/header.php';?><?php foreach ($navs as $nav) : ?><a href="<?= $nav['url'] ?>"><?= $nav['title'] ?></a><?php endforeach ?></nav></header><!-- 主体 --><main><!-- 用户登录 --><form class="login" id="login.php"><table><caption>用户登录</caption><tbody><tr><td><label for="email">邮箱:</label></td><td><input type="email" name="email" id="email" value="" /></td></tr><tr><td><label for="password">密码:</label></td><td><input type="password" name="password" id="password" /></td></tr><tr><td colspan="2"><button type="button" onclick="check(this)">提交</button></td></tr></tbody></table></form><p><a href="register.html">没有帐号,请先注册</a></p></main><?phpinclude TMPL_PATH_PUBLIC . '/footer.php'?><script>async function check(btn) {const email = btn.form.email.value.trim();const password = btn.form.password.value.trim();// 非空验证if (email.length > 0 && password.length > 0) {const response = await fetch('./lib/user/login.php', {// 请求类型method: 'POST',// 请求头headers: {'Content-Type': 'application/json; charset = utf-8',},body: JSON.stringify({email,password})});// 2. 解析数据const data = await response.json();console.log(data);} else {alert('邮箱或密码不能为空');return false;}}</script></body></html>
后端代码
<?php// php接收原始数据$json = file_get_contents('php://input');// json 转成php可以处理的数据，这里是数组，也可以是对象，不加true就是对象$user = json_decode($json, true);// 验证// 返回数据echo json_encode($user);
逻辑图
