Javascript 隐藏输入数组

Javascript Hidden Input Array

本文关键字：数组 输入 隐藏 Javascript      更新时间：2023-09-26

是否可以将隐藏输入字段的值作为数组，然后将其传递给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]);
    ...
}

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

最好的选择是将数组字符串化，然后分配它。

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

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

我应该注意的是，虽然JSON今天在浏览器中有相当好的支持，但较旧的浏览器可能不支持它。在这些情况下，您可以相当轻松地对功能进行填充：

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

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

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

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

无论你在Javascript中设置它，你都必须在服务器上解析它。这可能意味着将值按"，"拆分为 C# 数组，然后根据需要访问它。表单提交中发送的所有值都完全按原样作为字符串发送。

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

我通过以下链接找到了答案。

当您想要分配任何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 将其设置为表单元素！

相关文章：