HTMX与JavaScript协同：优化动态表单提交与隐藏输入更新

js如何实现弹出form提交表单？

呃，这个我很熟悉。
几年前，当我为客户构建电子商务网站时，我就这样做了。
但我当时是这样做的：
当时在杭州，有一个客户要做一个“点击按钮直接调出填单框”的功能，而且不能跳转到新的页面。
我只是想了想，就用原生JS吧。

你看，我当时写的：
1 首先将整个表单放入HTML中，但在开头使用CSS隐藏它，使用display: none;
<form id="orderForm" style="display:none;"> <input type="text" name="orderNo" placeholder="订单号"> <button type="submit">确认</button> </form>
2 .然后在按钮的单击事件中显示表单和半透明遮罩层： javascript document.getElementById('showOrderBtn').addEventListener('click', function() { document.getElementById('overlay').style.display = 'block'; document.getElementById('orderForm').style.display = 'block'; });
3 .单击时遮罩层会关闭： javascript document.getElementById('overlay').addEventListener('click', function() { document.getElementById('orderForm').style.display = 'none'; document.getElementById('overlay').style.display = 'none'; });
4 提交表单后，我使用 FormData 检索数据，然后将 AJAX 请求发送到后端。
当时，后端是用Java编写的。
每次我提交订单数据时，后台都会给我发送订单成功的提示。

JavaScript document.getElementById('orderForm').addEventListener('提交', function(e) { e.preventDefault(); const formData = new FormData(this); fetch('/api/submitOrder', { 方法：'POST'， 正文：表单数据 }).then(响应 => response.json()) .then(数据 => { alert('订单已提交！'); document.getElementById('orderForm').style.display = 'none'; document.getElementById('overlay').style.display = 'none'; }); });
客户当时非常高兴，并表示这个弹出窗口比他们以前使用的系统更容易使用。
但后来我发现手机版使用时出现了一些问题。
例如，按钮有点大，网格层没有完全覆盖。
后来我改用了那个框架中的模态框组件，效果有所改善。

所以你看，这件事有几个要点：
先隐藏表单
单击按钮显示表单和掩码
点击即可关闭遮罩
用AJAX提交发送数据
如果动态创建的话，代码会比较复杂，但是原理是一样的。
我以前没接触过这个，不敢乱说。

探讨 JavaScript 和 form 表单两种提交方式的优缺点

JavaScript表单提交的优点是页面不刷新……比如我2 02 2 年在上海创建了一个搜索框，用户打字的时候使用JavaScript、AJAX请求、后台词搜索。
结果直接插入到下拉框中，页面不移动。
用户感觉很棒。

另一个例子：当用户单击提交时，我显示一个加载圆圈并告诉用户“正在进行”。
如果成功，将出现“提交成功”消息。
如果出现问题，您会看到以下消息：“X 错误。
请尝试另一个。
”这改善了用户体验。
也可以实时测试。
当用户输入电子邮件地址时，我键入它，JavaScript 立即使用正则表达式“电子邮件地址必须包含 @”。

缺点...兼容性是一个障碍。
我记得 2 01 0 年左右，仍然有 IE6 和 IE7 ，而 AJAX 支持那东西却是一团糟。
当我在做一个项目并遇到 IE6 时，我必须编写大量兼容性代码或整个 jQuery $.ajax 文件来覆盖所有内容，这非常烦人。
现在好多了，但是旧设备和旧浏览器仍然需要考虑到。

安全风险也是缺陷。
如果用户使用[xss_clean]提交了一个奇怪的字符串，而我没有正确处理它，没有将其直接插入到网页中，那就结束了，这就是XSS攻击。
你需要学习规则，使用textContent向DOM中插入文本，不要盲目使用innerHTML，在服务器端再次过滤，不能完全依赖客户端。

技术门槛也不低。
如果你刚刚学习了JS、Promise、FetchAPI、异步回调等东西，它们是非常混乱的。
要创建带有进度条的上传，编写代码可能非常复杂。
这并不像提交表格那么容易。

提交表格...优点是...老牌了，兼容性无与伦比。
我在2 000年就使用Form发送，它可以在任何浏览器上运行，甚至是手机上过时的浏览器。
安全性也很高。
浏览器本身对数据进行加密。
它不像 JavaScript 直接操作 DOM 那样容易受到漏洞的影响。
开发很简单，只需要两个标签：<form action="..." method="POST">，就可以了。
适用于“填写并完成”的静态表单。

缺点是...该网站需要更新。
用户填写了一半的表单，点击提交，然后整个页面弹回。
上次输入的所有内容都消失了，用户体验极差。
当年接手一个老项目，有一个通过表单提交的注册表，用户投诉很多。
我改用 JavaScript 进行异步交付，并立即收到好评如潮。

功能限制也很明显。
表单在提交之前无法动态交互。
如果你想添加“输入密码时显示眼睛图标”之类的东西，Form 无法做到这一点，你必须依赖 JS。
如果您只想传输部分数据，例如例如，上传文件时，表单结构变得复杂时会变得混乱。

所以...如果你想要实时搜索、复杂的验证和要上传带有进度条的文件，请使用 JavaScript。
如果只是一个简单的注册表单，并且到处都是旧的、古董的浏览器，请使用 Form。
在目前的项目中我们经常使用表单的组合，但是在提交之前使用JavaScript进行监控和重新审核。
如果出现问题，提交就会被阻止，否则后端就得重建。