Должен ли я включить разметку HTML в свой ответ JSON?


13

На сайте электронной коммерции при добавлении товара в корзину я бы хотел показать всплывающее окно с опциями, которые вы можете выбрать. Представьте, что вы заказываете iPod Shuffle, и теперь вам нужно выбрать цвет и текст для гравировки.

Мне бы хотелось, чтобы окно было модальным, поэтому я использую лайтбокс, заполненный Ajax-вызовом. Теперь у меня есть два варианта:

Вариант 1. Отправка только данных и создание разметки HTML с использованием JavaScript.

Что хорошо в этом, так это то, что он сокращает Ajax-запрос до минимума и не смешивает данные с разметкой.

Что не так хорошо в этом, так это то, что теперь мне нужно использовать JavaScript для рендеринга, вместо того, чтобы делать это на стороне сервера. Я мог бы немного очистить подход, используя шаблонное решение на стороне клиента .

Вариант 2. Отправьте разметку HTML

Что хорошо в этом, так это то, что у меня может быть тот же серверный шаблонизатор, который я использую для остальных моих задач рендеринга (Django), для рендеринга лайтбокса. JavaScript используется только для вставки фрагмента HTML на страницу. Так что он явно оставляет рендеринг движку рендеринга. Имеет смысл для меня.

Но по какой-то причине мне не удобно смешивать данные и разметку в вызове Ajax. Я не уверен, что заставляет меня чувствовать себя неловко по этому поводу. Я имею в виду, что все веб-страницы обслуживаются одинаково - данные плюс разметка - верно?


Отличный вопрос Но, похоже, принадлежит stackoverflow.
Саид Нимати

1
@SaeedNeamati Вопросы разработки программного обеспечения, в особенности вопросы, связанные с доской, такие как этот, обсуждаются здесь и не связаны с переполнением стека .

Ответы:


10

JSON должен просто содержать данные и без разметки. В долгосрочной перспективе этот подход является более расширяемым, поскольку существует потенциал для использования данных JSON в других частях вашего сайта. Если вы включите разметку, то использование тех же данных для заполнения другого шаблона станет намного сложнее.


2
Отличный момент о повторном использовании. Похоже, все голосуют за то, чтобы запрос Ajax содержал только данные без разметки по разным причинам. Но этот большой . Благодарю.
Майк М. Лин

2
Не говоря уже о том, что JSON без разметки меньше и использует меньше пропускной способности.

@JackManey: Тоже хороший момент. Но истинная стоимость дополнительной полосы пропускания не так уж велика после того, как вы уже съели стоимость HTTP-запроса. И я могу представить некоторые настройки, когда вы знаете, что клиентские машины настолько дрянны, что генерация DOM в реальном времени с использованием JavaScript будет стоить вам дороже. Подумайте: внутренние приложения с пользователями на древних машинах / браузерах.
Майк М. Лин

3

Я бы отправил данные в запросе и создал бы разметку в js. Еще одним преимуществом будет то, что будет меньше использования полосы пропускания. Это своего рода личное предпочтение, но лучше оставить клиентскую разметку на стороне сервера. У меня также есть веб-сайт Django, и я использую систему шаблонов только для размещения на странице некоторых переменных json (на один меньше ajax req.) И использования файлов src при разработке на моей машине. Все на стороне клиента сделано с ExtJS.


Мне нравится ваша идея записать данные JSON на страницу - не здесь, поскольку я не получаю дополнительные данные, пока не узнаю, какой элемент вы добавляете в корзину. Делая запрос на макет страницы, тогда секунда для данных, кажется, распространена в эти дни. Наличие данных в переменной JavaScript устраняет необходимость во втором HTTP-запросе, не имея двух разных битов кода рендеринга (т. Е. Клиента и сервера).
Майк М. Лин

О, я вижу, ваш сервер недостаточно продвинут, чтобы знать, что пользователь собирается положить в корзину заранее;).
pllee

1

Я думаю, что вы говорите о плюсах и минусах обоих. Почему бы не посмотреть на третий вариант создания javascript для вашего лайтбокса из представления django. Тогда ваш JSON просто содержит данные для его обновления для каждого представления?

Что вы должны сделать, это обернуть весь шаблонный код в переменные javascript, а затем вывести их с помощью javascript после получения запроса JSON на стороне клиента.


Спасибо за ответ. Это на самом деле то, что я имел в виду в варианте 1. Лайтбокс как контейнер будет записан на странице, но скрыт. Данные JSON из запроса Ajax будут использоваться для генерации содержимого в контейнере. Часть этого контента будет размечена с использованием HTML. Как вы интерпретировали вариант 1? Может быть, это может быть моим третьим вариантом.
Майк М. Лин

Я думал о чем-то вроде этого stackoverflow.com/questions/6008908/… затем использовал JSON для замены данных после начальной загрузки
Райан Гиббонс

0

Вы должны использовать шаблонизатор для разметки и хранить скрытое поле где-то для хранения значений, которые затем можно найти в документе с помощью селектора.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.