使用 javascript 的动态表单提交 - 如何优雅的代码？

Posted 2023-02-24

【中文标题】使用 javascript 的动态表单提交 - 如何优雅的代码？

【英文标题】：Dynamic form submission using javascript - how to elegant code?

【发布时间】：2009-05-26 15:57:18

【问题描述】：

问题来了：

我的页面显示一组项目。每个项目都有一个与之关联的复选框（它是表单的一部分）。用户可以选中这些复选框中的任何一个并按“删除”按钮。同一页面还有一个“上传”按钮，可以上传 Excel 项目表。 目前，我的表单动作总结说：“xyzAction”，我有两个不同的处理程序（类似于 Struts Action） - 一个用于删除存储，另一个用于上传存储。

有人告诉我，最好的方法是通过执行以下操作之一来依赖 javascript： 1)) 在按下上传和删除按钮时切换表单动作 - 通过调用不同的动作。 2）使用隐藏变量“act”将其设置为删除/上传并提交到单个表单。服务器端动作将负责识别动作并转发到相应的动作。

方法 (1) - 对我来说似乎很不雅。玩表单动作似乎没有必要。 方法 (2) - 如果您的 javascript 被关闭并且也不是很优雅，那么显然不会工作。

一定有第三种方法可以做到这一点？这会让我开心吗？

【参考方案1】：

听起来您可能需要两种不同的形式，用于两种不同的操作。

【讨论】：

可能是..？但是说不是这样，那你怎么解决呢？

【参考方案2】：

您需要先获取正确的 html。

您有两个不同的操作，因此您应该有两个表单 - 一个好的经验法则是每个表单应该只有一个提交按钮。这是 HTML 的最佳实践，将确保页面在没有 JS 或任何其他技巧的情况下正常工作。

一旦你的页面像这样工作，使用 JS 来操作 DOM 以生成你需要的 UI。这是使用 JS 向 UI 添加行为，是不显眼的 JS 的最佳实践。

（如果你真的想把你的动作合并到一个表单中，用 JS 改变表单的动作是最好的做法。但是考虑一下如果用户选中一个复选框然后改变主意会发生什么上传一个文件，选中复选框。你应该注意这不应该删除任何东西。）