Question

我有一个输入字段，如下面的

 <input type="hidden" value="" id="inputField">

现在我有产品清单，每个产品都有一个复选框。当用户点击复选框时，我会获得产品ID和名称。现在我想再次将它保存在隐藏字段中，如下所示

<input type="hidden" 
       value="[{"product_id":123,"name":"stack"},{"product_id":456,"name":"overflow"}]"
       id="inputField"
>

我的第一个问题是如何做到这一点以及如何创建JSON？

其次，如果用户再次取消选中产品复选框，则需要获取当前隐藏值并将其转换为某种数据结构，从数据结构中删除未选中的框ID，然后将其再次保存在隐藏字段中。

是否有任何图书馆在JavaScript中完成这项工作？

Answer 1

使用jQuery：

HTML：

<input type="hidden" value='[{"product_id":123,"name":"stack"},{"product_id":456,"name":"overflow"}]'
 id="inputField">

JS：

var data = {}
data.products = jQuery.parseJSON($('#inputField').val())
alert(data.products[0].product_id)

Answer 2

您要查找的构建基块为JSON.stringify和JSON.parse;

var stringData = '[{"product_id":123,"name":"stack"}, {"product_id":456,"name":"overflow"}]';
// Convert a string to an JavaScript object
var arrayData = JSON.parse(stringData);
// Convert a JavaScript object to a string
stringData = JSON.stringify(arrayData);

现在，每当您的一个复选框更改状态时，您将从隐藏字段中获取对象并进行修改。修改对象后，您将字符串保存回隐藏字段。

从/向隐藏字段读取和存储值：

var field = document.getElementById('inputField');
// Reading the value
stringData = field.getAttribute('value');
// Storing the value
field.setAttribute('value', stringData);

您仍然缺少对阵列的修改，您可以这样做：

// Adding a newly checked product
arrayData.push({
    product_id: …,
    name: …
});

// Removing a product from the list is more complicated
arrayData = arrayData.filter(function(product){
    var productIdToRemove = …;
    return product.product_id!==productIdToRemove;
});

关于库：可能大多数都包含用于促进数组操作和表单数据设置的代码。有关示例，请参阅jQuery或原型的文档或其他答案。

只是一个想法：放弃使用隐藏字段并将复选框转移到服务器的整个想法不是更简单。如果选中该复选框，请使用它，否则忽略相关的产品数据。

Answer 3

在JavaScript中，只需指定值：

var json = JSON.stringify([{"product_id":123,"name":"stack"}]);
document.getElementById('inputField').setAttribute('value', json);

在服务器端语言中，用HTML编码JSON，例如使用php的htmlspecialchars或python的html.escape。结果将如下所示：

<input type="hidden" id="inputField"
       value="[{&quot;product_id&quot;:123,&quot;name&quot;:&quot;stack&quot;}]">

Answer 4

正如下面的其他答案中所述，要将JSON转换为字符串，请使用JSON.stringify（）函数，如下所示：

var json = JSON.stringify([{"product_id":123,"name":"stack"}]);
document.getElementById('inputField').setAttribute('value', json);

您在var json中获得了JSON对象的字符串表示形式。要以其他方式执行此操作以便您可以更新该字符串中包含的实际JSON对象，您可以使用eval：

var json_object = eval("("+json+")");

现在，重新创建原始JSON对象，您可以更新它，并将其重新格式化回隐藏字段或其他一些变量...

Answer 5

我仍然对你的问题感到困惑，但是如果你只是在输入复选框中存储名称和id，那么你可以使用jQuery完成这个。

var jsonArray = [];
$("input:checkbox:checked").each(function(){
    var jsonObj = {};
    jsonObj.product_id = $(this).attr("id");
    jsonObj.name = $(this).attr("name");
    jsonArray.push(jsonObj);
});

变量jsonArray现在将包含一个类似于您发布的示例的json字符串。您可以使用JSON.stringify(jsonArray)查看此内容。

无需创建隐藏字段，将此字符串作为值并尝试在复选框状态更改时添加和删除该字符串。当页面准备好通过点击按钮等进行更改时，只需执行javascript

祝你好运。

Answer 6

我建议使用encodeURIComponent函数。与JSON.stringify一起，我们应该有以下内容：

var data= "{"name":"John"}";

var encodeddata encodeURIComponent(JSON.stringify(var data= "{"name":"John"}";
))

现在该值可以安全地存储在输入隐藏类型中，如下所示：

<input type="hidden" value="'+encodeddata+'">

现在要回读数据我们可以做类似的事情：

var data = JSON.parse(decodeURIComponent(value))

Answer 7

如果您有JSON对象，请使用JSON.stringify：

将其保存到隐藏字段

var myObj = [{"product_id":123,"name":"stack"},{"product_id":456,"name":"overflow"}];
document.getElementById('inputField').value = JSON.stringify(myObj);

Answer 8

添加库

“＆lt;％@ taglib uri =”http://java.sun.com/jsp/jstl/functions“prefix =”fn“％＆gt;”

使用：$ {fn：escapeXml（string1）}

input type =“hidden”value =“$ {fn：escapeXml（string1）}”id =“inputField”

如何在隐藏的输入字段中将数据设置为JSON

8 个答案: