Включение информации в HTML для использования Javascript?

Question

Я создаю веб-приложение с движком приложений (java) и GWT, хотя я думаю, что моя проблема - это более общий вопрос по javascript.

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

В настоящее время я отправляю пустой контейнер меню, а затем выполняю ajax-вызов, чтобы получить информацию, необходимую для заполнения меню. Я бы предпочел просто отправить информацию меню в исходном запросе, поэтому мне не нужно тратить время на повторный запрос. Я использовал этот первоначальный подход, потому что он казался более простым: я просто написал службу gwt rpc, которая собирала нужные мне данные.

У меня вопрос: могу ли я дать указание библиотеке javascript, например gwt, искать информацию на текущей веб-странице? Должен ли я скрыть эту информацию в своем исходном HTML-ответе, может быть, в скрытом div или чем-то еще?

Answer 1

Если данные, которые вы хотите встроить, ограничены элементами меню, почему бы не создать легкий HTML-код из простых элементов <ol> и <li>? Вы по-прежнему можете не использовать HTML в своем коде Java, используя шаблонизатор. Разметку меню можно просто стилизовать с помощью CSS или, если вам нужно что-то более необычное, чем простые элементы <ol> и <li>, вы можете помассировать DOM с помощью JavaScript после загрузки страницы (читай: прогрессивное улучшение ).

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

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

Answer 2

Есть вообще 2 варианта:

• Храните данные в некоторых тегах XML где-то в HTML-коде, а затем получите информацию оттуда, пройдя через DOM. (вы можете скрыть их с помощью CSS)

• Сохранить данные как JSON данные в теге сценария. (Существуют en- и декодеры для почти каждого языка)

  var data = {"foo": "bar", "my_array": []};

Answer 3

GWT имеет нечто, называемое JSNI (собственный интерфейс Javascript), которое может взаимодействовать с другим не-GWT Javascript. Таким образом, вы можете в своем контейнере HTML-страницы содержать сгенерированные пункты меню в виде объекта Javascript. Затем в вашем коде GWT у вас есть вызов JSNI для извлечения этих данных и помещения их в нужное место вашего UI / DOM с помощью методов GWT.

Answer 4

Несколько недель назад я задал похожий вопрос о том, как безопасно хранить данные внутри тегов HTML. Он также содержит несколько ссылок на другие вопросы. Здесь

Answer 5

Вы можете включить блок сценария в исходный ответ, определяющий данные, а затем использовать событие onload (или подобное) для создания меню на основе этих данных; это очень похоже на то, что вы делаете сейчас, но без дополнительной поездки на сервер. Я предполагаю, что данные для построения меню каким-то образом преобразуются с помощью JavaScript на клиенте; в противном случае просто включите разметку меню напрямую.