Есть ли стандарт для встраивания JSON в HTML?

Я хотел бы встроить JSON в HTML. Самое элегантное решение, которое я нашел, использует script -tag и тип mime media application/json.

<script id="data" type="application/json">
    {
        "foo" : "bar"
    }
</script>

Является ли это стандартным способом встраивания JSON? Если нет, есть ли риск с вышеупомянутым решением?

Причины использования встроенного JSON (вместо службы JSON-P):

Небольшое количество JSON-данных
Меньше HTTP-запросов
Предпочтение для inline-JSON для данных в HTML-атрибутах

[UPDATE] Причина встраивания json.

У меня есть виджет галереи для сайта с очень высоким трафиком. Галерея может состоять из 100 изображений или более. Я показываю только одно изображение за раз, а остальные изображения будут загружены лениво. Однако информация (изображение src) для всех изображений будет отображаться в html при загрузке страницы. Существуют различные способы визуализации информации об изображении в html. Вместо использования JSON я мог бы также использовать атрибуты данных html, как показано ниже:

<li class="image" data-src="image-path.jpg">
    <!-- image tag will be created here using javascript -->
</li>

приведет к:

<li class="image image-loaded" data-src="image-path.jpg">
    <img src="image-path.jpg" />
</li>

Недостатком вышеупомянутого решения является дополнительная разметка. Я предпочел бы использовать JSON и Javascript-Templating, например doT.js.

Ответ 1

Причины использования встроенного JSON (вместо службы JSON-P)

Вы также можете встроить JSON-P. Хорошо, вы просто вызываете этот метод "inline script", но он имеет преимущества обоих: -)

Ответ 2

Я отвечаю на свой вопрос, так как мне пришлось найти решение. Мое решение основано на том, что предлагает Bergi использование встроенного JSONP. Это лучшее решение, чем поиск ответа на мой реальный вопрос, поскольку не требуется ручной разбор JSON.

Данные JSON (и HTML) создаются с помощью Java Server Pages (JSP).

Шаг 1

Пользовательское имя переменной создается с помощью JSP. Он будет использоваться как глобальная переменная javascript, которой будут назначены json-данные. Имя генерируется случайным образом, чтобы предотвратить конфликты имен на одной странице.

<c:set var="jsonpVarName">jsnpData<%= java.lang.Math.round(java.lang.Math.random() * 1000000) %></c:set>

Шаг 2 Тег script имеет имя cssClassname, чтобы идентифицировать его и атрибут data-var, чтобы можно было определить имя настраиваемой переменной. ${ctrl.json} является JSP и выводит JSON. В отличие от JSONP, который использует функцию обратного вызова, используется глобальная переменная. До сих пор у меня не было никаких недостатков.

<script class="data" data-var="${jsonpVarName}" type="text/javascript">
    window.${jsonpVarName} = ${ctrl.json};
</script>

Шаг 3 Доступ к данным (с использованием jQuery) выполняется так же просто, как:

var data = window[$('script.data').data('var')];

Пример с контекстом

HTML

<div class="myWidget">
    <button class="fetchData">Fetch Data</button>


    <c:set var="jsonpVarName">jsnpData<%= java.lang.Math.round(java.lang.Math.random() * 1000000) %></c:set>

    <script class="data" data-var="${jsonpVarName}" type="text/javascript">
        window.${jsonpVarName} = ${ctrl.json};
    </script>

</div>

Javascript

$('button.fetchData', '.myWidget').click(function (e) {

    var data = window[$('script.data', '.myWidget').data('var')];    

});

Я использую встроенный JSONP для загрузки данных JSON, которые требуются при загрузке страницы. Это не так много данных, и один HTTP-запрос меньше.

Ответ 3

То, что вы предлагаете, абсолютно правильно. Атрибуты type тега script должны быть допустимым дескриптором MIME. Согласно официальный JSON RFC раздел 6 "Соображения IANA":

Тип мультимедиа MIME для текста JSON - application/json.
Имя типа: приложение
Имя подтипа: json

Итак, ваш HTML-код действителен:

<script id="data" type="application/json">
    {
        "foo" : "bar"
    }
</script>

И нет, нет никаких дополнительных рисков, связанных с этим.

Ответ 4

попробуйте http://json2html.com/, что является хорошим способом преобразования JSON в HTML.