表单提交的两种方式分析

·  阅读 232

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

1. form 的常用属性

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

2. getpost

  • 提交表单数据时,浏览器发送的是 http 请求,有两种请求方法可以选择
    • get
      • 在请求 URL 后面以 ? 的形式跟上发送给服务器的参数,多个参数之间用 & 隔开,比如
      • 由于浏览器和服务器对 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>
复制代码

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

image-20201212163711035.png

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

image-20201212164341769.png

其它网页数据获取,以斗鱼为例:

打开斗鱼官网,按 F12Ctrl + Shift + i,再按下图所示顺序操作:

image-20201212165626387.png

即可拿到数据:

image-20201212165751254.png

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

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

  1. 传统的表单提交

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

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

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

  2. 前后端分离

    • 通过 JavaScript 获取到表单的所有数据
    • 通过正则表达式进行表单的验证
    • 发送 ajax 请求,将数据发送给服务器
    • 验证成功后,服务器会返回结果,需要前端解析这个数据,并决定显示什么内容(前端渲染和前端路由)
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改