如何获取每个元素作为键传递给帖子表单的对象

How to get an object with each element passed as a key to a post form?

本文关键字：对象 表单 何获取 获取 元素      更新时间：2023-09-26

我遇到一种情况，我需要使用 javascript 动态创建一个表单，以支持一些旧版浏览器。我需要通过表单发送的数据当前位于对象中，因此，例如：

var data = { name: 'John Doe', age: 35 };
var myForm = document.createElement("form");
myForm.setAttribute("action", myPostActionPath);
myForm.setAttribute("method", "post");
// Append data to the form somehow.
myForm.submit();

我觉得这应该是一件简单的事情，但我一定错过了一些明显的东西。我想要的是有一些东西将数据形式作为每个数据属性的键传递，所以上面的例子是"name=John%20Doe&age=35"。我想这样做而不必执行以下操作：

var data = { name: 'John Doe', age: 35 };
var myForm = document.createElement("form");
myForm.setAttribute("action", myPostActionPath);
myForm.setAttribute("method", "post");
// NOT what I would like:
var formField1 = document.createElement("input");
formField1.setAttribute("type", "hidden");
formField1.setAttribute("name", "name");
formField1.setAttribute("value", data.name);
myForm.appendChild(formField1);
var formField2 = document.createElement("input");
formField2.setAttribute("type", "hidden");
formField2.setAttribute("name", "age");
formField2.setAttribute("value", data.age);
myForm.appendChild(formField2);
myForm.submit();

那么，有没有办法以这种方式附加我的数据，而无需循环访问数据的属性以将每个属性添加为隐藏字段？

另外，请注意，我的数据属性本身可以是对象或数组。

更新

这是我当前的解决方案，但我正在寻找一种更直接的方式来传递数据，而无需遍历数据对象，但从这里的所有答案来看，似乎没有其他方法：

var data = { name: 'John Doe', age: 35 };
var myForm = document.createElement("form");
myForm.setAttribute("action", myPostActionPath);
myForm.setAttribute("method", "post");
$.each(data, function(name, value) {
    var formInput = document.createElement("input");
    formInput.setAttribute("type", "hidden");
    formInput.setAttribute("name", name);
    formInput.setAttribute("value", value);
    myForm.appendChild(formInput);
});
myForm.submit();

为了更好地解释，我在将一些数据发送回控制器后使用此操作下载文件，IE8 和 IE9 不允许通过 AJAX 帖子下载文件，因此这是一个回退，允许我下载文件而无需提交原始表单，这会导致不希望的整页刷新。

那么，有没有办法以这种方式附加我的数据，而无需循环访问数据的属性以将每个属性添加为隐藏字段？

不幸的是没有：HTMLFormElement API。

第二次尝试怎么样假设 jQuery 你可以修改纯 JavaScript，我只是太懒了，我想帮助你不要让你的工作:P

var data = { name: 'John Doe', age: 35 }
var arrTemplate = [];
arrTemplate.push("<form id='whateverID' action='' method=''");
for (var k in data){
    if (data.hasOwnProperty(k)) {
         arrTemplate.push("<input type='hidden' name='"+ k +"' value='"+ data[k] +"'>");
    }
}
arrTemplate.push("</form>");
$(document).append(arrTemplate.join(""));
$("#whateverID").submit();
//then you could remove the form if you want to.

这是你想要的吗???

隐藏

的输入中的json.stringify呢？ 然后，您可以在服务器端解码 JSON 并拥有您想要的一切。

这是一个类似的例子，它没有具体回答你的问题，而是使用你的技术。在浏览器中通过 iframe 将 PDF URL 发送到打印机

请参阅 JavaScript 部分。

相关文章：