Управление внешним видом веб-страницы и ее логикой с помощью JSON

Много раз мне приходилось создавать пользовательский интерфейс с логическим потоком, например, show section-1, если выбрана опция-1 , show section-2, если выбрана опция-2 . Эта логика может быть сложной на основе динамического контента, включая AJAX . Для таких сценариев JSON может оказаться очень полезным инструментом.

Статические данные — если данные, используемые для создания этих циклов принятия решения, доступны во время создания страницы, эту логику можно связать с помощью простого JavaScript

var whatif = document.getElementById("Option").value;
if (whatif == 'option-1') {
  document.getElementById("Section-1").style.display='table';
} else {
  document.getElementById("Section-1").style.display='none';
}

Динамические данные ( JSP ) — А как насчет динамических данных? Страницы JSP генерируются на лету с данными, обновленными из базы данных … JavaScript может работать, если он работает с данными, извлеченными во время создания страницы. Другой класс приложений, использующих динамические данные, — это вызовы на основе AJAX … 

Динамические данные ( с использованием DoJo) . Наиболее популярный подход к DoJo, о котором я здесь говорю, использует DoJo для замены innerHTML HTML-элемента.

dojo.byId(idname).innerHTML='Loading....';
 var ajaxArgs = {
  url: urlstrdojo+"&getBy="+getBy,
  error: function(type, data, evt){ .. },
  load: function(type, data, evt){
   dojo.byId(idname).innerHTML=data;
  },
  mimetype: "text/plain", preventCache: true
 }; 
dojo.io.bind(ajaxArgs);

Сценарий. В типичном приложении MVC может вызываться DoJo для визуализации части веб-страницы. Результирующий JSP, возвращаемый классом действия, будет иметь HTML, который заменит элемент экрана / тег, например, Div. Как насчет случая, когда вы хотите использовать данные, которые были помещены в этот элемент?

1.  Page.onLoad не работает, так как мы используем DoJo
2.  Мы могли бы заставить скрипт работать, но это опять неуклюже

Пример. Пользователь выбирает гиперссылку на экране. Гиперссылка имеет вызов DoJo для получения некоторых данных. Затем
на основе полученных данных пользователь должен быть
предупрежден или
предупрежден, а некоторые поля предварительно заполнены. Если вы возвращаете
JSP с HTML в DoJo, вы можете обновить таблицу,
но не получить более детальную,
чем это — элегантно!

Использование JSON — я думаю, что именно здесь JSON поможет. Вызов DoJo может вернуть объект JSON, который может быть очень элегантно проанализирован.

В вашем JSP 

<%
   response.setContentType("application/json");
   response.setHeader("Content-Disposition", "inline");
%>

{"option1":"<%=Var1%>", "option2":"<%=Var2%>", "aError":"<%=errorStr%>", 
 "aWarn":"<%=warnStr%>"}

load: function(type, data, evt){
 var jsonData = JSON.parse(data);
 var aError = jsonData.aError;
 var aWarn = jsonData.aWarn;
   
 // Return on Error etc
 if (aError != '' ) { alert (ERROR); return; }
   
 // Else other processing
}