[html] HTML 속성에 JSON을 저장하는 가장 좋은 방법은 무엇입니까?
HTML 요소의 속성에 JSON 개체를 넣어야합니다.
-
HTML은 유효성을 검사 할 필요가 없습니다.Quentin의 답변 : 유효한 HTML5 인 속성에 JSON을 저장합니다
data-*
. -
JSON 객체는 모든 크기가 될 수 있습니다.
답변 : Maiku Mori : HTML 속성의 제한은 잠재적으로 65536 자 입니다.
-
JSON에 특수 문자가 포함되어 있으면 어떻게됩니까? 예 :
{foo: '<"bar/>'}
Quentin에 의해 답변 됨 : 일반적인 규칙에 따라 JSON 문자열을 속성에 넣기 전에 인코딩하십시오. PHP를 들어, 사용 기능 .
htmlentities()
편집-PHP 및 jQuery를 사용하는 예제 솔루션
HTML 속성에 JSON 쓰기 :
<?php
$data = array(
'1' => 'test',
'foo' => '<"bar/>'
);
$json = json_encode($data);
?>
<a href="#" data-json="<?php echo htmlentities($json, ENT_QUOTES, 'UTF-8'); ?>">CLICK ME</a>
jQuery를 사용하여 JSON 검색 :
$('a').click(function() {
// Read the contents of the attribute (returns a string)
var data = $(this).data('json');
// Parse the string back into a proper JSON object
var json = $.parseJSON($(this).data('json'));
// Object now available
console.log(json.foo);
});
답변
HTML은 유효성을 검사 할 필요가 없습니다.
왜 안돼? 검증은 많은 실수를 포착하는 정말 쉬운 QA입니다. HTML 5 data-*
속성을 사용하십시오 .
JSON 객체는 모든 크기 (즉, 거대)가 될 수 있습니다.
속성 크기에 대한 브라우저 제한에 대한 문서를 보지 못했습니다.
그들과 마주 치면 데이터를 <script>
. 객체를 정의하고 요소 id
를 해당 객체의 속성 이름에 매핑 합니다.
JSON에 특수 문자가 포함되어 있으면 어떻게됩니까? (예 : {테스트 : ‘< “myString />’})
신뢰할 수없는 데이터를 속성 값에 포함하는 일반적인 규칙을 따르십시오. 사용 &
및 "
(큰 따옴표의 속성 값을 포장하는 경우) 또는 '
(만약 당신이있는 거 포장 따옴표 속성 값).
그러나 이는 JSON이 아닙니다 (속성 이름은 문자열이고 문자열은 큰 따옴표로만 구분되어야 함).
답변
어디에 두느냐에 따라
- A의
<div>
당신이 묻는대로, 당신은 JSON은 태그, HTML 주석, 포함 된 문서 타입을 시작할 수 HTML 스페셜을 포함하지 않는 것을 확인해야합니다, 등 당신은 적어도 탈출해야<
하고,&
원래의 캐릭터가하지 않는 방식으로 이스케이프 된 시퀀스에 나타납니다. - 에서
<script>
요소 당신은 JSON이 종료 태그가 포함되어 있지 않은지 확인해야합니다</script>
: 또는 탈출 텍스트 경계<!--
또는-->
. - 이벤트 처리기에서 JSON이 HTML 엔터티처럼 보이고 속성 경계 (
"
또는'
)를 깨지 않는 항목이 있어도 의미를 유지하는지 확인해야합니다 .
처음 두 경우 (및 이전 JSON 파서의 경우)의 경우 U + 2028 및 U + 2029는 JSON에서 인코딩되지 않은 문자열에서 허용 되더라도 JavaScript에서 개행 문자이므로 인코딩해야합니다.
정확성을 위해 이스케이프 \
및 JSON 인용 문자 가 필요 하며 항상 NUL을 인코딩하는 것은 나쁜 생각이 아닙니다.
HTML이 콘텐츠 인코딩없이 제공 될 수있는 경우 UTF-7 공격+
을 방지하기 위해 인코딩해야합니다 .
어쨌든 다음 이스케이프 테이블이 작동합니다.
- NUL->
\u0000
- CR->
\n
또는\u000a
- LF->
\r
또는\u000d
"
->\u0022
&
->\u0026
'
->\u0027
+
->\u002b
/
->\/
또는\u002f
<
->\u003c
>
->\u003e
\
->\\
또는\u005c
- U + 2028- >
\u2028
- U + 2029->
\u2029
따라서 Hello, <World>!
끝에 개행 문자 가있는 텍스트의 JSON 문자열 값은 "Hello, \u003cWorld\u003e!\r\n"
.
답변
당신이 그것을 할 수있는 또 다른 방법은 – 내부 JSON 데이터를 넣어 <script>
태그,은 불가능 type="text/javascript"
하지만, 함께 type="text/bootstrap"
또는 type="text/json"
유형, 자바 스크립트 실행을 방지하기 위해.
그런 다음 프로그램의 어떤 위치에서 다음과 같은 방법으로 요청할 수 있습니다.
function getData(key) {
try {
return JSON.parse($('script[type="text/json"]#' + key).text());
} catch (err) { // if we have not valid json or dont have it
return null;
}
}
서버 측에서는 다음과 같이 할 수 있습니다 (이 예제는 php 및 twig ).
<script id="my_model" type="text/json">
{{ my_model|json_encode()|raw }}
</script>
답변
또 다른 옵션은 JSON 문자열을 base64로 인코딩하고 자바 스크립트에서 사용해야하는 경우 atob()
함수로 디코딩하는 것입니다 .
var data = JSON.parse(atob(base64EncodedJSON));
답변
knockoutjs를 사용할 수 있습니다.
<p>First name: <strong data-bind="text: firstName" >todo</strong></p>
<p>Last name: <strong data-bind="text: lastName">todo</strong></p>
knockout.js
// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
this.firstName = "Jayson";
this.lastName = "Monterroso";
}
// Activates knockout.js
ko.applyBindings(new AppViewModel());
산출
이름 : Jayson 성 : Monterroso
이것을 확인하십시오 :
http://learn.knockoutjs.com/
답변
여기에 멋진 것은 없습니다. PHP에서 htmlspecialchars
특수 문자가 HTML로 해석 될 수 없도록 JSON 문자열을 실행 합니다. 자바 스크립트에서는 이스케이프가 필요하지 않습니다. 속성을 설정하기 만하면됩니다.
답변
간단한 JSON 객체의 경우 아래 코드가 작동합니다.
인코딩 :
var jsonObject = { numCells: 5, cellWidth: 1242 };
var attributeString = escape(JSON.stringify(jsonObject));
풀다:
var jsonString = unescape(attributeString);
var jsonObject = JSON.parse(jsonString);