Расширение файла .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, который выполняется во время замены раскрывающегося списка стран, вы просто позволяете ему запускать асинхронный (аяксический) запрос к этому сервлету с выбранной страной в качестве параметра (или pathinfo). Я приведу пример на основе jQuery , поскольку он безумно облегчает запуск запросов ajax и обход / манипулирование 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> в области применения)
Надеюсь, это очистит и то, и другое:)
Смотри также: