如何在隱藏的輸入字段中將數據設置為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

您要查找的構建塊是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

我建議使用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 6

我仍然對你的問題感到困惑，但是如果你只是在輸入復選框中存儲名稱和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 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

添加庫

“<％@ taglib uri =”http://java.sun.com/jsp/jstl/functions“prefix =”fn“％>”

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

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