Jak mogę odczytać JSON w tagu skryptu z JavaScript?

Question 1

Mam dynamicznie generowaną stronę, na której chcę użyć statycznego kodu JavaScript i przekazać mu ciąg JSON jako parametr. Widziałem to podejście stosowane przez Google (patrz Przycisk +1 Google: Jak oni to robią? ).

Ale jak mam odczytać ciąg JSON z JavaScript?

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

W tym JavaScript chciałbym użyć argumentu JSON {"org": 10, "items":["one","two"]}z dokumentu HTML. Nie wiem, czy najlepiej to zrobić z jQuery, czy bez.

$(function() {
    // read JSON

    alert("the json is:")
})

Question 2

Zmieniłbym deklarację skryptu na następującą:

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

Typ notatki i pola identyfikatora. Po tym

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

będzie działać dobrze we wszystkich przeglądarkach.

type="application/json"Jest potrzebne, aby zapobiec przeglądarki z parsowania go podczas załadunku.

Question 3

Skończyło się na tym, że ten kod JavaScript był niezależny od jQuery.

var jsonElement = document.getElementById('json-script-tag');
var myObject = JSON.parse(jsonElement.textContent);

Question 4

Aby odczytać <script id="myJSON">używany format JSON

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

Możesz także użyć metod, aby wskazać skrypt, na przykład 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>

Rozwiń fragment

Question 5

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

lub wymyśl inną metodę identyfikacji skryptu.

Może zamiast .html()ciebie możesz potrzebować .text(). Niepewny. Wypróbuj oba.

Answer 1

Mam dynamicznie generowaną stronę, na której chcę użyć statycznego kodu JavaScript i przekazać mu ciąg JSON jako parametr. Widziałem to podejście stosowane przez Google (patrz Przycisk +1 Google: Jak oni to robią? ).

Ale jak mam odczytać ciąg JSON z JavaScript?

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

W tym JavaScript chciałbym użyć argumentu JSON {"org": 10, "items":["one","two"]}z dokumentu HTML. Nie wiem, czy najlepiej to zrobić z jQuery, czy bez.

$(function() {
    // read JSON

    alert("the json is:")
})

Answer 2

164

Zmieniłbym deklarację skryptu na następującą:

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

Typ notatki i pola identyfikatora. Po tym

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

będzie działać dobrze we wszystkich przeglądarkach.

type="application/json"Jest potrzebne, aby zapobiec przeglądarki z parsowania go podczas załadunku.

c-uśmiech
źródło

Cóż, chcę, aby tag skryptu wskazywał na JavaScript, więc nie dotyczy to tylko formatu JSON. JSON jest tylko argumentem skryptu.

Jonas

4

Według specyfikacji HTML5: dev.w3.org/html5/markup/script.html ten <script>element, który został zdefiniowany SRC nie zawierają niczego innego niż nowych linii i / lub komentarze. Zobacz „Element skryptu z atrybutem src musi zawierać tylko:” w powyższym linku. W przeciwnym razie walidator HTML będzie narzekał.

c-smile

12

@WoIIe Ponieważ jQuery jest już używane przez TS, sprawdź <script src="jquery-1.6.2.min.js"></script>tam.

c-smile

Podoba mi się użycie jquery. Chodzi mi o to, ile jeszcze ułamków milisekundy ogolisz, używając waniliowego javascript (w tym przypadku)?

Captain Hypertext

1

Zwróć uwagę, że to nie jest bezpieczne, pozwala XSS, codepen.io/anon/pen/xevgEM

felixmosh

Answer 3

Cóż, chcę, aby tag skryptu wskazywał na JavaScript, więc nie dotyczy to tylko formatu JSON. JSON jest tylko argumentem skryptu.

Jonas

Answer 4

4

Według specyfikacji HTML5: dev.w3.org/html5/markup/script.html ten <script>element, który został zdefiniowany SRC nie zawierają niczego innego niż nowych linii i / lub komentarze. Zobacz „Element skryptu z atrybutem src musi zawierać tylko:” w powyższym linku. W przeciwnym razie walidator HTML będzie narzekał.

c-smile

Answer 5

12

@WoIIe Ponieważ jQuery jest już używane przez TS, sprawdź <script src="jquery-1.6.2.min.js"></script>tam.

c-smile

Answer 6

Podoba mi się użycie jquery. Chodzi mi o to, ile jeszcze ułamków milisekundy ogolisz, używając waniliowego javascript (w tym przypadku)?

Captain Hypertext

Answer 7

1

Zwróć uwagę, że to nie jest bezpieczne, pozwala XSS, codepen.io/anon/pen/xevgEM

felixmosh

Answer 8

12

Skończyło się na tym, że ten kod JavaScript był niezależny od jQuery.

var jsonElement = document.getElementById('json-script-tag');
var myObject = JSON.parse(jsonElement.textContent);

Jonas
źródło

45

Dlaczego po prostu nie dać skryptowi identyfikatora i nie wziąć go ze sobą document.getElementById? W ten sposób nie musisz pamiętać, aby zachować to ostatnie. Nikt inny też nie zmieni strony w przyszłości.

George,

Oryginalna wersja tej odpowiedzi została zainspirowana linkiem w pytaniu, stackoverflow.com/questions/6713197/ ...

Jonas

Answer 9

45

Dlaczego po prostu nie dać skryptowi identyfikatora i nie wziąć go ze sobą document.getElementById? W ten sposób nie musisz pamiętać, aby zachować to ostatnie. Nikt inny też nie zmieni strony w przyszłości.

George,

Answer 10

Oryginalna wersja tej odpowiedzi została zainspirowana linkiem w pytaniu, stackoverflow.com/questions/6713197/ ...

Jonas

Answer 11

Aby odczytać <script id="myJSON">używany format JSON

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

Możesz także użyć metod, aby wskazać skrypt, na przykład 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>

Rozwiń fragment

Answer 12

<script id="myJSON">Tag potrzebuje również type="application/json"atrybut.

Mikael Dúi Bolinder

Answer 13

1

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

lub wymyśl inną metodę identyfikacji skryptu.

Może zamiast .html()ciebie możesz potrzebować .text(). Niepewny. Wypróbuj oba.

Emil Ivanov
źródło

Dzięki, zadziałało, kiedy zmieniłem json na{"org": 10, "items":["one","two"]}

Jonas

1

Ta metoda jest zła. Jeśli <script>tag ma znak src, NIE MOŻE zawierać żadnej treści.

Iharob Al Asimi

Answer 14

Dzięki, zadziałało, kiedy zmieniłem json na{"org": 10, "items":["one","two"]}

Jonas

Answer 15

1

Ta metoda jest zła. Jeśli <script>tag ma znak src, NIE MOŻE zawierać żadnej treści.

Iharob Al Asimi

Jak mogę odczytać JSON w tagu skryptu z JavaScript?

Odpowiedzi: