表单提交的两种方式分析(表单提交的原理和过程)
1. form 的常用属性
action: 设置提交表单数据时请求的URLmethod: 请求方法（常用的有get和post），默认是get（不区分大小写）target: 在什么地方打开URL（参考a元素的target）enctype: 规定了在向服务器发送表单数据之前如何对数据进行编码，取值有三种：application/x-www-form-urlencoded: 默认的编码方式multipart/form-data: 文件上传时必须为这个值，并且method必须是posttext/plain: 普通文本传输accept-charset: 规定表单提交时使用的字符编码（默认值UNKNOWN，和文档相同的编码）
2. get 和 post
提交表单数据时，浏览器发送的是
http请求，有两种请求方法可以选择发给服务器的参数全部放在请求体中
理论上，
post传递的数据量没有限制（具体还得看服务器的处理能力）在请求
URL后面以?的形式跟上发送给服务器的参数，多个参数之间用&隔开，比如由于浏览器和服务器对
URL长度有限制，因此在URL后面附带的参数是有限制的，通常不能超过1KBwww.test.com/login?phone…
getpost
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 中输入的内容提交给服务器
传统的表单提交
弊端一：会进行页面的跳转（这意味着服务器必须提前将一个页面写好（即服务端渲染，有很多好处，比如：利于
SEO优化；利于首屏的渲染速度），并且将写好的页面返回给前端，前端直接展示这个页面）弊端二：不方便进行表单数据的验证
将所有的
input包裹在一个form中form设置action（服务器的地址）input/button类型是submit点击
submit，会自动将所有数据提交给服务器前后端分离
通过
JavaScript获取到表单的所有数据通过正则表达式进行表单的验证
发送
ajax请求，将数据发送给服务器验证成功后，服务器会返回结果，需要前端解析这个数据，并决定显示什么内容（前端渲染和前端路由）
伪原创工具 SEO网站优化 https://www.237it.com/
作者：种花家的进阶
链接：https://juejin.cn/post/7036006580537524254