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

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

在 JavaScript 中，只需分配值：

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

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

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