表单提交的两种方式分析

「这是我参与11月更文挑战的第29天，活动详情查看：2021最后一次更文挑战」

1. form 的常用属性

• action: 设置提交表单数据时请求的 URL
• method: 请求方法（常用的有 get 和 post），默认是 get（不区分大小写）
• target: 在什么地方打开 URL（参考 a 元素的 target）
• enctype: 规定了在向服务器发送表单数据之前如何对数据进行编码，取值有三种：
  • application/x-www-form-urlencoded: 默认的编码方式
  • multipart/form-data: 文件上传时必须为这个值，并且 method 必须是 post
  • text/plain: 普通文本传输
• accept-charset: 规定表单提交时使用的字符编码（默认值 UNKNOWN，和文档相同的编码）

2. get 和 post

• 提交表单数据时，浏览器发送的是 http 请求，有两种请求方法可以选择
  • get
    • 在请求 URL 后面以 ? 的形式跟上发送给服务器的参数，多个参数之间用 & 隔开，比如
      • www.test.com/login?phone…
    • 由于浏览器和服务器对 URL 长度有限制，因此在 URL 后面附带的参数是有限制的，通常不能超过 1KB
  • post
    • 发给服务器的参数全部放在请求体中
    • 理论上，post 传递的数据量没有限制（具体还得看服务器的处理能力）

post 请求示例：

fieldset {
  width: 380px;
}

input, textarea {
  outline: none;
}

input:focus, textarea:focus {
  border-color: skyblue;
  border-style: solid;
}

textarea {
  resize: none;
}

<form action="http://www.baidu.com" method="POST">
  <fieldset>
    <legend>必填信息</legend>
    <!-- 1. 手机输入框 -->
    <div>
      <label for="phone">手机：</label>
      <input type="text" 
        maxlength="11"
        placeholder="请输入您的手机号"
        id="phone"
        name="phone"
        tabindex="-1">
    </div>
    <!-- 2. 密码输入框 -->
    <div>
      <label for="pwd">密码：</label>
      <input type="password" id="pwd" name="pwd">
    </div>
    <!-- 3. 验证码输入框 -->
    <div>
      <label for="validate">验证码：</label>
      <input type="text" id="validate" name="code">
      <!-- 3.1 按钮的实现方式一：button -->
      <!-- <button>获取验证码</button> -->
      <!-- 3.2 按钮的实现方式二：input -->
      <input type="button" value="获取验证码" disabled>
    </div>
  </fieldset>
  <fieldset>
    <legend>选填信息</legend>
    <!-- 4. 照片选择（文件上传） -->
    <div>
      <label for="photo">照片：</label>
      <input type="file" id="photo">
    </div>
    <!-- 5. 性别选择 -->
    <div>
      <span>性别：</span>
      <label for="male">男</label>
      <input type="radio" name="sex" id="male" value="male">
      <label for="female">女</label>
      <input type="radio" name="sex" id="female" value="female" checked>
    </div>
    <!-- 6. 兴趣选择 -->
    <div>
      <span>兴趣：</span>
      <label for="basketball">篮球</label>
      <input type="checkbox" id="basketball" name="hobbies" value="basketball" checked>
      <label for="football">足球</label>
      <input type="checkbox" id="football" name="hobbies" value="football" checked>
      <label for="running">跑步</label>
      <input type="checkbox" id="running" name="hobbies" value="running">
    </div>
    <!-- 7. 学历选择 -->
    <div>
      <span>学历：</span>
      <!-- 设置 multiple 后，通过 Ctrl/Shift + click 可以选中多个 -->
      <select name="education" id="" multiple>
        <option value="0">小学</option>
        <option value="1" selected>中学</option>
        <option value="2">大学</option>
      </select>
    </div>
    <!-- 8. 简介 -->
    <div>
      <label for="introduction">简介：</label>
      <textarea name="intro" cols="20" rows="5"></textarea>
    </div>
  </fieldset>
  <!-- 9. 重置按钮 -->
  <!-- 
    前提：
    1. type 必须是 reset 类型（value 可以不写）
    2. 所有内容都必须在同一个表单（form）中
  -->
  <!-- <input type="reset" value="重置"> -->
  <input type="reset">

  <!-- 10. 表单提交 -->
  <input type="submit">
</form>

在表单中填写一些信息，然后点击“提交”：

在提交后跳转的页面按 F12 打开开发者工具，再按下图所示顺序操作，即可看到表单提交的方式和数据：

其它网页数据获取，以斗鱼为例：

打开斗鱼官网，按 F12 或 Ctrl + Shift + i，再按下图所示顺序操作：

即可拿到数据：

3. 表单提交的两种方式分析

表单提交：将用户在 input 中输入的内容提交给服务器

1. 传统的表单提交

   • 将所有的 input 包裹在一个 form 中
   • form 设置 action（服务器的地址）
   • input/button 类型是 submit
   • 点击 submit，会自动将所有数据提交给服务器

   弊端一：会进行页面的跳转（这意味着服务器必须提前将一个页面写好（即服务端渲染，有很多好处，比如：利于 SEO 优化；利于首屏的渲染速度），并且将写好的页面返回给前端，前端直接展示这个页面）

   弊端二：不方便进行表单数据的验证

2. 前后端分离

   • 通过 JavaScript 获取到表单的所有数据
   • 通过正则表达式进行表单的验证
   • 发送 ajax 请求，将数据发送给服务器
   • 验证成功后，服务器会返回结果，需要前端解析这个数据，并决定显示什么内容（前端渲染和前端路由）