Javascript隐藏输入数组答案

【问题标题】：Javascript Hidden Input ArrayJavascript隐藏输入数组
【发布时间】：2012-06-11 23:33:12
【问题描述】：

是否可以将隐藏输入字段的值作为数组传递给 Spring MVC 控制器？

function foo(){
    var myArray = new Array();
    myArray[0] = "Hello";
    myArray[1] = "World!";
    document.getElementById("hiddenInp").value=myArray;
}

然后在控制器中执行类似的操作

@RequestMapping ...
public String test(HttpServletRequest request)
{
    String[] myArray = request.getParameter("hiddenInp");
    // Assuming that the name of the hidden input field is also hiddenInp
    System.out.println(myArray[0] + myArray[1]);
    ...
}

如果我正在使用关联数组呢？索引是字符串而不是 int

【问题讨论】：

JavaScript 没有关联数组。
@JonathanSampson 也许我使用了错误的术语。我的意思是，我不使用诸如“0”和“1”之类的索引，而是使用myArray["A"] = "Hello";。我知道这行得通，因为我尝试过alert(myArray["A"])，它给了我一个带有“Hello”的弹出框。
@JonathanSampson：但是对象可以（并且正在）用作地图......
@Bergi 是的；对象可以有键，但它们不是关联数组。一个很大的区别是值的顺序。使用数组，顺序是固定的；对象及其属性并非如此。
@szrrizvi 你指的是一个对象：var myArray = { 'A' : 'Hello' };。

标签： javascript arrays input hidden

【解决方案1】：

你最好的选择是stringify数组然后分配它。

element.value = JSON.stringify( ["Hello", "World"] );

结果值将是一个JSON 字符串，然后可以在服务器上对其进行解析，从而重新创建数组。如果您希望拥有类似于关联数组的东西，这种方法也适用于对象。

我应该注意，虽然JSON 在今天的浏览器中得到了相当好的支持，但旧的浏览器可能不支持它。在这些情况下，您可以polyfill the feature fairly easily：

【讨论】：

没必要这样做。将值设置为数组将完全符合 .join() 的作用。使用 .join() 只是额外的处理。
@ianpgall 注意到。我倾向于忘记 JavaScript 会自动将数组转换为适当的类型和值。
我没想到它会起作用——我认为它可能包括“[”和“]”，但它最终还是像 .join() 一样工作。没问题，只是想指出来！
@ianpgall - .join() 真的是 extra 处理吗？如果你设置的值已经是字符串JS就不用转换了，所以不会像处理两次一样。当然，.join() 还可以让您明确控制连接字符。
这并不完全是“额外”处理......尤其是用户永远不会注意到的东西。所以你是对的，如果你想控制分隔字符串的字符，你应该使用.join()。但对我来说，如果你可以接受 "," 作为分隔符，那么使用它是没有意义的，因为使用 .value=[1, 2, 3] 会将数组转换为值 "1,2, 3" 这正是你想要的。

【解决方案2】：

您只能将字符串作为参数以及输入值传递。这意味着您的 Array 将通过与“;”连接自动转换为字符串，您也可以使用 .join() method 手动执行此操作。

然后，您需要在服务器端按所选分隔符拆分该字符串。

如果您想将它们作为数组发送，afaik 您将需要两个输入元素：

<input type="hidden" name="hiddenInp[]"<!-- should be more descriptive --> value="a" />
<input type="hidden" name="hiddenInp[]"<!-- the same name --> value="b" />

【讨论】：

您可以将输入的值设置为数组。 javascript 基本上做了 .join() 会做的事情，但没有必要使用 .join() 除非你想要除 "," 以外的分隔符
这正是我所说的。但是，我什至会使用 .join(",") 来明确我正在设置一个字符串。
我最喜欢这种“多重隐藏字段”解决方案，它的行为类似于多重选择，不需要进一步的序列化或反序列化

【解决方案3】：

无论您在 Javascript 中如何设置它，您都必须在服务器上对其进行解析。这可能意味着通过“，”将值拆分为 C# 数组，然后根据需要访问它。在表单提交中发送的所有值都按原样作为字符串发送。

您可能想使用http://www.w3schools.com/jsref/jsref_join.asp 来设置隐藏输入的值。但这不是必需的——不使用 .join() 似乎没问题。但重要的是要记住，该值将是服务器上的字符串，而不是数组。

【讨论】：

是的，我很久以前就看到了。虽然我认为这很有趣，但这与使用 w3 学校进行简单参考无关。我提供了链接，以便 OP 可以正确使用语法，而不是作为解决方案（特别是因为我说 .join() 不应该使用）。

【解决方案4】：

我通过以下link找到了答案。

当您想要分配任何 JavaScript 对象或数组时，请执行以下操作：

var javascript_variable = 'object' or ['fruit1', 'fruit2', 'fruit3'];
$( '#hiden_input_element_unique_id' ).val( JSON.stringify(javascript_variable) );

表单提交后，在服务端我们要解码如下：

$fruits_array = json_decode( $_POST['hiden_input_element_unique_name'] );

通过这种方式，您可以在服务器端获取任何 JavaScript 数组，然后在客户端通过 JavaScript 将其设置为表单元素！

【讨论】：

@Flexo 感谢您的指导和编辑！在此期间将遵循！ :-)