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

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

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

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

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

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

[обновление] причина внедрения 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-шаблонный движок, такой как точка.js.

16
dot.js html inline javascript json

4 ответов

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

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

2

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

JSON-data (и 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 Тег скрипта имеет 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-запрос меньше.

4

то, что вы предлагаете, абсолютно правильно. The 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.

0