JavaScript의 스크립트 태그에서 JSON을 어떻게 읽을 수 있습니까?

82

정적 JavaScript를 사용하고 매개 변수로 JSON 문자열을 전달하려는 동적으로 생성 된 페이지가 있습니다. Google에서이 접근 방식을 사용하는 것을 보았습니다 ( Google의 +1 버튼 : 어떻게하나요? ).

하지만 JavaScript에서 JSON 문자열을 어떻게 읽어야합니까?

<html>
  <head>
    <script src="jquery-1.6.2.min.js"></script>
    <script src="myscript.js">{"org": 10, "items":["one","two"]}</script>
  </head>
  <body>
    Hello
  </body>
</html>

이 JavaScript에서는 {"org": 10, "items":["one","two"]}HTML 문서 의 JSON 인수를 사용하고 싶습니다 . jQuery를 사용하거나 사용하지 않는 것이 가장 좋은지 모르겠습니다.

$(function() {
    // read JSON

    alert("the json is:")
})

javascript json script-tag

— 조나스
소스

162

스크립트 선언을 다음과 같이 변경합니다.

<script id="data" type="application/json">{"org": 10, "items":["one","two"]}</script>

메모 유형 및 ID 필드. 그 후

var data = JSON.parse(document.getElementById('data').innerHTML);

모든 브라우저에서 잘 작동합니다.

은 type="application/json"로딩하는 동안 구문 분석에서 브라우저를 방지하기 위해 필요하다.

— C- 스마일
소스

글쎄요, 스크립트 태그 포인트가 자바 스크립트를 가리 키길 원하므로 JSON에만 해당되는 것이 아닙니다. JSON은 스크립트에 대한 인수 일뿐입니다.

— Jonas

4

HTML5 스펙에 따르면 dev.w3.org/html5/markup/script.html<script> SRC 새로운 라인 및 / 또는 의견 이외의 것을 포함하지 않는다 정의한 요소를. 위 링크에서 "src 속성이있는 스크립트 요소는 다음 만 포함해야합니다."를 참조하십시오. 그렇지 않으면 HTML 유효성 검사기가 불평 할 것입니다.

— c-smile

12

@WoIIe TS에서 이미 jQuery를 사용하고 있기 때문에 <script src="jquery-1.6.2.min.js"></script>거기를 확인하십시오 .

— c-smile

나는 jquery 사용법을 좋아합니다. 바닐라 자바 스크립트 (이 경우)를 사용하면 1 밀리 초의 몇 분의 1을 더 줄일 수 있습니까?

— Captain Hypertext

1

이것이 안전하지 않다는 점에주의하십시오. XSS, codepen.io/anon/pen/xevgEM

— felixmosh

13

이 JavaScript 코드는 jQuery와 독립적으로 끝났습니다.

var json = document.getElementsByTagName('script');
var myObject = JSON.parse(json[json.length-1].textContent);

— 조나스
소스

44

스크립트에 ID를 부여하고 가져 오는 것은 document.getElementById어떻습니까? 이렇게하면 마지막으로 유지하는 것을 기억할 필요가 없습니다. 다른 사람도 앞으로 페이지를 변경하지 않습니다.

— George

2

<script id="myJSON">사용중인 JSON을 읽으려면

var manifest= document.getElementById('myJSON').innerHTML; //sets manifest to the text in #myJSON
manifest= JSON.parse(manifest) //Converts text into JSON

메소드를 사용하여 다음과 같은 스크립트를 가리킬 수도 있습니다. document.scripts[0]

    //var manifest= JSON.parse(document.getElementById('myJSON').innerHTML); /*Shortend of 2&3*/
var manifest= document.getElementById('myJSON').innerHTML; //Gets text in #myJSON
manifest= JSON.parse(manifest) //Converts it into JSON
document.getElementById('test').innerHTML= manifest.name+ '<br/>'+ manifest.otherOptions; //Displays it
console.log('manifest')
console.log(manifest);

<head>
<script type="application/json" id="myJSON">
  {"name":"Web Starter Kit", "otherOptions":"directly here"}
</script>
</head>
<body>
<p id="test"></p>
</body>

스 니펫 확장

— Zekrom_Vale
소스

<script id="myJSON">태그도 필요 type="application/json"속성을.

— Mikael Dúi Bolinder

1

JSON.parse($('script[src="mysript.js"]').html());

또는 스크립트를 식별하는 다른 방법을 발명하십시오.

어쩌면 .html()당신 대신에 필요할 수도 있습니다 .text(). 확실하지 않다. 둘 다 시도해보십시오.

— 에밀 이바노프
소스

나는에 JSON을 변경할 때 감사합니다, 그것은 일{"org": 10, "items":["one","two"]}

— 조나스

1

이 방법은 잘못되었습니다. 경우 <script>태그가있다 src그것은 전혀 어떤 내용이 안된다.

— Iharob Al Asimi