"在輸入隱藏字段中存儲返回 json 值"

Question

我想知道是否可以將返回的 json 存儲在隱藏的輸入字段中。 例如，這是我的 json 返回的內容：

[{"id":"15aea3fa","firstname":"John","lastname":"Doe"}]

Answer 1

雖然我已經看到了使用和工作的建議方法，但我認為僅使用JSON.stringify設置隱藏字段的值會破壞HTML ...

在這里，我將解釋我的意思：

<input type="hidden" value="{"name":"John"}">

正如您所看到的，開放鏈括號之后的第一個雙引號可能會被某些瀏覽器解釋為：

<input type="hidden" value="{" rubbish >

因此，為了更好地解決這個問題，我建議使用encodeURIComponent函數。 與JSON.stringify一起，我們分享如下內容：

> encodeURIComponent(JSON.stringify({"name":"John"}))
> "%7B%22name%22%3A%22John%22%7D"

現在該值可以安全地存儲在輸入隱藏類型中，如下所示：

<input type="hidden" value="%7B%22name%22%3A%22John%22%7D">

或者（甚至更好）使用將消耗數據的腳本操縱的HTML元素的data-屬性，如下所示：

<div id="something" data-json="%7B%22name%22%3A%22John%22%7D"></div>

現在要讀取數據，我們可以做類似的事情：

> var data = JSON.parse(decodeURIComponent(div.getAttribute("data-json")))
> console.log(data)
> Object {name: "John"}

Answer 2

您可以使用input.value = JSON.stringify(obj)將對象轉換為字符串。
當你需要它時，你可以使用obj = JSON.parse(input.value)

JSON對象是可在現代的瀏覽器，也可以從使用json2.js庫json.org

Answer 3

您可以將其存儲在隱藏字段中，或將其存儲在javascript對象（我的偏好）中，因為可能的訪問將通過javascript。

注意：因為你有一個數組，然后可以將其作為第一個元素的myvariable[0]進行訪問（就像你擁有它一樣）。

編輯顯示示例：

clip...
            success: function(msg)
            {
                LoadProviders(msg);
            },
...

var myvariable ="";

function LoadProviders(jdata)
{
  myvariable = jdata;
};
alert(myvariable[0].id);// shows "15aea3fa" in the alert

編輯：創建此頁面： http ： //jsfiddle.net/GNyQn/以演示上述內容。 這個例子假設您已經在數組中正確返回了您的命名字符串值，並且只需要根據OP問題存儲它。 在示例中，我還將返回的第一個數組的值（根據OP示例）作為文本放入div中。

我不確定為什么這被視為“復雜”，因為我看不到在這個數組中處理這些字符串的簡單方法。

Answer 4

如果使用JSON Serializer ，則只需將對象以字符串格式存儲即可

myHiddenText.value = JSON.stringify( myObject );

然后，您可以返回值

myObject = JSON.parse( myHiddenText.value );

但是，如果您不打算在頁面提交中傳遞此值，那么對您來說可能更容易，並且如果您將其作為全局javascript變量丟棄，則可以節省大量序列化。

Answer 5

看起來返回值在數組中？ 這有點奇怪......並且還要注意某些瀏覽器將允許從跨域請求中解析（當您擁有頂級JSON對象時，這不是真的）。

無論如何，如果這是一個數組包裝器，你會想要這樣的東西：

$('#my-hidden-field').val(theObject[0].id);

您可以稍后通過同一字段上的簡單.val（）調用來檢索它。 老實說這看起來很奇怪。 隱藏字段不會在頁面請求中持續存在，那么為什么不將它保存在您自己的（偽命名空間）值桶中？ 例如，

$MyNamespace = $MyNamespace || {};
$MyNamespace.myKey = theObject;

這將使您可以從任何地方使用它，而無需任何hacky輸入字段管理。 它比為簡單的價值存儲進行DOM修改要高效得多。

Answer 6

base64解決方案

// encode
theInput.value = btoa(JSON.stringify({ test: true }));

// decode
let decoded = JSON.parse(atob(theInput.value));

為什么選擇base64？

輸入字段可以由以不同於 JavaScript 的編程語言運行的后端處理。 例如，在 PHP 中， rawurlencode實現與 JavaScript encodeURIComponent略有不同。 通過使用 base64 對其進行編碼，您可以確定在后端運行的任何其他編程語言都會按預期進行處理。

Answer 7

只需使用javascript設置隱藏字段：

document.getElementById('elementId').value = 'whatever';

還是我錯過了什么？