Вопрос:
Некоторое время назад мне был дан ответ об использовании JSON для передачи данных из моего приложения в JavaScript. Что я не понимаю, так это то, как я на самом деле передаю объект в JavaScript. Я вижу, что вы должны использовать файл .json.
И что потом? Я могу конвертировать мои объекты Java в объекты JSON, но я не могу разобраться с этим. Я использую JSP и сервлеты для написания своего приложения.
Лучший ответ:
Расширение файла .json не так важно. Это всего лишь заголовок HTTP Content Type. Пока он application/json, веб-браузер отлично знает, что с ним делать. Что касается JSP/Servlet, вам в основном нужно создать класс сервлета, который прослушивает определенный url-pattern, обрабатывает параметры запроса или pathinfo соответственно и записывает строку JSON в ответ в методе doGet().
Здесь приведен фиктивный пример сервлета, который возвращает пары значений/метки города, основанные на выбранном значении выпадающего списка страны, использует Google Gson преобразовать полностью пригодные Java-объекты в JSON в oneliner:
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String country = request.getParameter(«country»); Map<String, String> cities = cityDAO.find(country); String json = new Gson().toJson(cities); response.setContentType(«application/json»); response.setCharacterEncoding(«UTF-8»); response.getWriter().write(json); }
Сопоставьте такой сервлет на url-pattern /cities в web.xml (или если вы хотите немного более дружественный к SEO подход, нарисуйте его на /cities/* и используйте request.getPathInfo() вместо этого).
Наконец, в JS-коде, который выполняется во время изменения выпадающего списка страны, вы просто позволяете ему запускать асинхронный (aaaxical) запрос на этот сервлет с выбранной страной в качестве параметра (или pathinfo). Я приведу пример jQuery, поскольку он безумно облегчает запуск аякс-запросов и перемещение/манипулирование HTML DOM ( “сырой” JS-код в противном случае было бы в 5 раз больше).
$(document).ready(function() { $(‘#country’).change(function() { var selectedCountry = $(this).val(); var servletUrl = ‘cities?country=’ + selectedCountry; $.getJSON(servletUrl, function(options) { var city = $(‘#city’); $(‘>option’, city).remove(); // Clean old options first. if (options) { $.each(options, function(value, label) { dropdown2.append($(‘<option/>’).val(value).text(label)); }); } else { dropdown2.append($(‘<option/>’).text(«Please select country»)); } }); }); });
Вот пример HTML JSP:
<select id=»country» name=»country»> <c:forEach items=»${countries}» var=»country»> <option value=»${country.key}»>${country.value}</option> </c:forEach> </select> <select id=»city» name=»city»> <option>Please select country</option> </select>
(предполагая, что ${countries} является Map<String, String> в области приложения)
Надеюсь, это очистит тот и другой:)
Содержание
См. также:
Ответ №1
JSON – это в основном формат хранения объектов Javascript. Итак, он является родным для Javascript.
Загрузка файла JSON
Вы можете загрузить JSON файл, когда ваша веб-страница будет загружена так же, как и любой .js файл:
<html> <head> <script type=»text/javascript» src=»myfile.json»></script> </head> —clipped—
Также важно иметь функцию обратного вызова или функцию, вызываемую при загрузке JSON. Например, содержимое “myfile.json” должно читать:
anz([arbitrary JSON here]);
где anz() определяется где-то как:
function anz(JSONdata) { //process data here }
JSON также может динамически загружаться или загружаться после того, как страница была отображена/загружена.
Получение данных из файла JSON
Итак, как только у вас есть файл JSON, который каким-то образом загружен, и вызывает вашу функцию обратного вызова с данными JSON, вы можете прочитать его – как и любой другой Объект Javascript.
Если это было передано вашей функции обратного вызова…
{«data»:{«user_name»:»Joe», «user_id»:»97304239042″, «user_rank»:3}}
… Чтобы получить имя пользователя:
function anz(JSONdata) { var userName = JSONdata.data.user_name; // userName returns «Joe» }