跳转到主内容
新派编程网 - 新潮编程理念,全新技术课堂!

HTML怎么提交到不同页面_HTML form action动态设置【教程】

JS动态修改form.action后必须调用submit()才能提交,仅改action无效;设为空字符串或"#"仍会提交至当前URL路径或带锚点地址,并非阻止跳转;兼容IE11应使用setAttribute而非直接赋值。 form 的
action
属性不能靠 JS 改完就“立刻提交到新地址”——它只决定提交时发往哪里,真正触发提交还得靠
submit
事件或
form.submit()
调用。 怎么用 JS 动态改
action
再提交 常见场景是表单复用:同一套 HTML,根据用户操作(比如选了“注册”还是“登录”)提交到不同后端接口。 必须先修改
form.action
,再调用
form.submit()
;光改
action
不提交,什么也不会发生 不要在
submit
事件里只改
action
就 return,这会阻止默认提交,但没手动调用
submit()
,结果就是“点了没反应” 示例:
document.getElementById('myForm').action = '/api/login';
document.getElementById('myForm').submit();
action
设为空字符串或
"#"
会发生什么 这是容易踩的坑:很多人以为设成
""
或
"#"
就能“不跳转”,其实不是。
action=""
(空字符串):浏览器会提交到当前 URL 的路径部分(不含查询参数),比如
https://a.com/page?x=1
→ 提交到
https://a.com/page
action="#"
:提交到当前完整 URL +
#
,比如
https://a.com/page?x=1#
,多数后端收不到,前端也常报 404 或 CORS 错误 真要阻止跳转、走 AJAX,就别用原生 submit,改用
event.preventDefault()
+
fetch
用
form.action
做条件路由时的兼容性注意点 IE11 及更老浏览器对
form.action
的 setter 支持不稳定,尤其当 form 是通过 innerHTML 插入或动态创建时。 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更 下载 立即学习 “ 前端免费学习笔记(深入) ”; 推荐写法:
form.setAttribute('action', '/new/path')
,比直接赋值
form.action = ...
兼容性更好 如果 form 含有
target="_blank"
,动态改
action
后仍会新开页——这个行为不受 JS 影响,由 HTML 属性决定 服务端必须能处理所有可能的
action
地址,否则 404 不是前端能兜住的 最常被忽略的是:动态设置
action
后忘记校验目标地址是否合法(比如拼错路径、漏协议、跨域未配 CORS),结果表单看似提交了,但 network 面板里只有 pending 或 failed。动手前先 curl 测通目标接口,比调半天 JS 有用得多。

相关文章