form 的 method 属性仅支持 get 和 post,其他值如 put、delete 会被浏览器静默降级为 get;get 将数据拼在 url 后,适合查询,有长度限制且参数暴露;post 将数据放请求体,无硬长度限制,适合提交、上传等操作。

form 的 method 属性只能是 get 或 post
浏览器只认这两个值,其他如 PUT、DELETE 会被静默降级为 get(多数浏览器),不是报错,而是“假装没看见”。所以别在 <form method="PUT"></form> 里赌行为一致。
-
get:数据拼在 URL 后(?key=value),适合查询类操作;有长度限制(URL 长度通常 ≤2048 字符),且参数暴露在地址栏和服务器日志里 -
post:数据走请求体,无长度硬限制,适合提交表单、上传文件、修改数据等场景 - 不写
method属性时,默认就是get,不是空或继承父级
用 post 却收到 GET 请求?检查有没有 JavaScript 干预
常见现象:明明写了 method="post",但 Network 面板里看到的是 GET,或者后端收不到 body。大概率是 JS 主动调用了 form.submit() 前,又做了 location.href = ... 或 window.open(),导致原生提交被中断。
- 检查是否在
submit事件里用了return false却没阻止默认行为(应写e.preventDefault()) - 避免在
<form></form>上绑onclick并跳转——这会绕过表单提交机制 - 如果用
fetch或axios提交,那method属性根本不起作用,它只对原生提交有效
get 表单提交后刷新页面,参数却消失了?
典型表现:填完搜索框点提交,URL 变成 /search?q=xxx,一刷新就 404 或回到首页。这是因为服务器没处理该路径,或前端路由(如 Vue Router、React Router)没配 history 模式下的 fallback。
mall-admin-web是mall电商系统(https://down.chinaz.com/soft/41350.htm)的前端项目,基于Vue+Element实现。 主要包括商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计报表、财务管理、权限管理、设置等功能。 搭建步骤1、下载node并安装:https://down.chinaz.com/ruanjian/43369.ht
-
get表单本质是导航,触发的是整个页面跳转,不是局部更新 - 若用前端路由,需确保服务端对所有非 API 路径都返回
index.html,否则刷新时 Nginx/Apache 直接 404 - 想保留参数又不跳转?那就别用原生
get表单,改用fetch+URLSearchParams拼接查询字符串
后端接收不到 post 数据?先看 Content-Type 和编码
表单的 enctype 决定数据怎么打包,它和 method 是搭档关系。光设 method="post" 不够,enctype 错了,后端照样解析失败。
立即学习“前端免费学习笔记(深入)”;
-
enctype="application/x-www-form-urlencoded"(默认):键值对编码,后端通常直接映射到 request body 参数 -
enctype="multipart/form-data":必须用在含<input type="file">的表单,否则文件上传失败;后端需用 multipart 解析器(如 Express 的multer) -
enctype="text/plain":几乎没人用,仅用于调试,值不编码,空格变+,后端难解析 - Node.js + Express 默认不解析
multipart,要手动加中间件;PHP 的$_POST自动处理urlencoded,但对multipart需查$_FILES
method 看似简单,但和 enctype、JS 提交逻辑、前端路由、服务端解析方式全绑在一起,漏掉任一环都会让“明明写了 post 却收不到数据”这类问题反复出现。










