programing

입력 숨김 필드에 반환 json 값 저장

nicegoodjob 2023. 3. 6. 22:20
반응형

입력 숨김 필드에 반환 json 값 저장

return json을 숨겨진 입력란에 저장할 수 있는지 궁금합니다.예를 들어, 제 json이 반환하는 내용은 다음과 같습니다.

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

ID는 나중에 참조할 수 있도록 숨겨진 필드에 저장하고 싶습니다.

예:이런 게 있어요.

<input id="HiddenForId" type="hidden" value="" />

jquery가 나중에 다음과 같이 값을 반환해 주었으면 합니다.

var scheduletimeid = $('#HiddenForId').val();

권장되는 방법이나 동작하는 방법을 보았습니다만, JSON.stringify만을 사용하여 숨김 필드의 값을 설정하면 HTML이 깨진다고 생각합니다.

여기서 제 뜻을 설명하겠습니다.

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

오픈 체인 브래킷 뒤의 첫 번째 이중 따옴표는 일부 브라우저에서 다음과 같이 해석될 수 있습니다.

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

이에 대한 더 나은 접근을 위해 부호화를 사용할 것을 제안합니다.URIC 컴포넌트 기능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-attribute를 다음과 같이 사용합니다.

<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"}

사용할 수 있습니다.input.value = JSON.stringify(obj)개체를 문자열로 변환합니다.
필요할 때 사용할 수 있습니다.obj = JSON.parse(input.value)

JSON 오브젝트는 최신 브라우저에서 사용할 수 있습니다.또한 json.org의 json2.199 라이브러리를 사용할 수 있습니다.

숨겨진 필드에 저장하거나 javascript를 통해 접근할 수 있으므로 javascript 오브젝트(제 취향)에 저장할 수 있습니다.

메모: 어레이가 있기 때문에 이 어레이는 다음과 같이 액세스 됩니다.myvariable[0]첫 번째 요소(있는 대로)에 사용할 수 있습니다.

EDIT show 예:

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에 넣습니다.

이 어레이에서는 이러한 문자열을 간단하게 처리할 수 있는 방법이 없기 때문에, 이것이 「복잡」하다고 생각되는 이유를 알 수 없습니다.

JSON Serializer를 사용하는 경우 개체를 문자열 형식으로 저장하기만 하면 됩니다.

myHiddenText.value = JSON.stringify( myObject );

그러면 다음 방법으로 가치를 되찾을 수 있습니다.

myObject = JSON.parse( myHiddenText.value );

그러나 이 값을 여러 페이지에 걸쳐 제출하지 않을 경우 글로벌 javascript 변수로 포함시키는 것만으로 훨씬 쉬워질 수 있습니다.

반환값이 배열에 있는 것 같습니까?좀 이상한데...또, 특정의 브라우저에서는, 크로스 도메인 요구로부터 그것을 해석할 수 있는 것에 주의해 주세요(최상위 레벨의 JSON 오브젝트가 있는 경우, 이것은 사실이 아닙니다).

어쨌든 어레이 래퍼라면 다음과 같은 것이 필요합니다.

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

나중에 같은 필드에서 간단한 .val() 호출을 통해 가져올 수 있습니다.솔직히 이건 좀 이상해 보이는데.숨겨진 필드는 페이지 요청 전체에 걸쳐 지속되지 않으므로 자신의 값 버킷(의사 이름 사용)에 보관하는 것이 어떻습니까?예.,

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

이것에 의해, 어디서든 조작 가능한 입력 필드 관리 없이 사용할 수 있게 됩니다.또한 단순한 가치 스토리지를 위해 DOM을 수정하는 것보다 훨씬 효율적입니다.

javascript를 사용하여 숨김 필드를 설정합니다.

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

아니면 내가 뭘 놓쳤나?

Base64 솔루션

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

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

왜 Base64죠?

입력 필드는 JavaScript와는 다른 프로그래밍 언어로 실행되는 백엔드로 처리될 수 있습니다.를 들어에서는 "PHP"라고 합니다.rawurlencode구현은 JavaScript와 약간 다릅니다.encodeURIComponentbase64 、 른 .른로로로로 。

언급URL : https://stackoverflow.com/questions/3448831/store-return-json-value-in-input-hidden-field

반응형