问题：模态框“取消”按钮点击后触发表单提交，导致 405
咏方舟-长流支流 2026-07-18
正常情况下，在表格中选择一条记录编辑，弹出模拟的模态对话框加载数据如图，但是当点取消按钮时，发现出现了405，说明网页触发了一个请求，可按F12去看。在移植报表的时候，又碰到这个问题，因为我封装了以后其实是前端、后端再也一行代码也不用写的，结果又一不小心踩坑了。
现象
点击模态框中的“取消”按钮，页面出现 405 错误，或页面刷新/跳转。
原因
HTML 规范中，<button>元素如果没有指定type属性，默认是type="submit"。当按钮位于<form>标签内部时，点击会触发表单提交，导致页面刷新或 405。
解决方案
给所有“取消”类按钮显式添加type="button"：
<buttontype="button"onclick="closeModal()">取消</button>type="button"表示这是一个普通按钮，不会触发表单提交。
涉及范围
- 模态框的“取消”按钮
- 模态框的“关闭”按钮
- 任何在
<form>内部但不想触发表单提交的按钮
经验总结
表单内的按钮，如果意图不是“提交”，一定要加type="button"。
这个坑在模态框里尤其常见，因为模态框经常放在表单内部，而取消/关闭按钮的初衷只是关闭弹窗，不该提交数据。不加type属性就会触发提交，导致页面刷新或 405。
submit，它触发了一个标准的 POST 请求。
具体机制如下：
- 请求方向：浏览器默认将表单数据提交到当前页面的 URL，即
https://localhost:7222/NormViewGrid?controller=products。 - 请求内容：这是一个
Content-Type: application/x-www-form-urlencoded的 POST 请求，会携带表单中所有输入框的值。 - 为什么是 405：
NormViewGrid控制器设计为渲染页面视图，只配置了[HttpGet]（用于打开页面），服务器没有配置响应 POST 请求的处理方法。当收到 POST 请求时，服务器返回“方法不允许”的错误。
所以，它既不是“不存在的路由”（404），也不是“跨域问题”（CORS），而是一个路由存在但方法不匹配的典型场景。通过添加type="button"，按钮不再承担“提交”角色，从而规避了浏览器自动发起的这个 POST 请求。
 agent和组件)