Skip to content

实训:表单及前后端交互 ​

参考表单,基于 xampp 环境亲手搭一次完整的前后端交互,分两个任务:

  1. 表单提交 — 写表单页面配 PHP 回显脚本,提交、观察、改坏、再修复,体会前后端的分工与依赖
  2. 服务端校验 — 三幕:声明式客户端校验拦住空表单,curl 绕过它直插不设防的后端,最后在服务端建起绕不过的防线

元信息 ​

  • 目标:用最简单的后端示例体会前后端的分工、限制与配合;亲手实现服务端校验,理解"客户端校验管体验、服务端校验管安全"
  • 关键概念:action 与 method、请求与响应、回显、GET/POST 语义、服务端校验、白名单
  • 关联阶段:cp1
  • 常见误区:以为提交不是 HTTP 请求(提交就是 POST 到 action 地址的一个请求);以为表单上加了校验属性就够了(它们只在浏览器里生效,服务端必须再查一遍)

准备:确认环境 ​

  1. XAMPP 已安装且 Apache 能启动(见XAMPP 教程)
  2. 已配置一个虚拟站点(见虚拟站点),下文以 form.x.com 为例,站点目录为 htdocs/form。没有配置虚拟站点的话,直接用 htdocs/form 加 http://localhost/form/ 访问也可以
  3. 浏览器打开 http://httpbin.org/forms/post 留着对照——它是本实训的"标准答案"演示页

验收标准 ​

  • [ ] 两个任务各自的验收(见各篇末尾)
  • [ ] 能不假思索说出一次表单提交里浏览器做了什么、服务器做了什么