Подскажите по ajax + java

SammoLove

SammoLove
Статус: Offline
Реєстрація: 29.02.2008
Повідом.: 1230
Подскажите по ajax + java

Привет. Я только учусь. У меня есть регистрационная форма. Мне хочется сделать при выборе страны, динамическу подгрузку соответствующих стране городов. Без перезагрузки страницы. Я пока не учил JS, но в этом месте без него просто никак.

Вот основа
HTML: 
<label for="bcountry">Birth Country</label>
	<select name="bcountry" id="bcountry">
	<option value="1">Страна1</option>
	<option value="2">Страна2</option>
	<option value="3">Страна3</option>
</select>
По событию выбор из списка должен быть произведён запрос к сервлету, который любезно вернёт список городов. Здесь тоже вопрос, это может быть XML, одна строка с запятыми, объект, массив строк. Смотря, как удобнее им распорядиться в JS. А может проще вернуть сразу кусок кода подобного верхнему и вставить его?

В общем, подскажите, плиз.

Нашёл что-то похожее на нужное мне -
Тільки зареєстровані користувачі бачать весь контент у цьому розділі
, но не знаю, как передать внутрь функции значение выбранного элемента списка.
 
Останнє редагування:
Задачку ты выбрал нетривиальную. Ее можно многими способами решить. Но если ты хочешь SPA на ajax, то в можно заиспользовать jQuery:
Код: 
      $.post('../yourUrl?Id=' + selectedId).done(function (data, textStatus, jqXHR) {
        // success
      }).fail(function (jqXHR, textStatus, errorThrown) {
        alert(textStatus);
      });

но лучше уже сразу читать про ES6 promises

а в джавке типа такого с джерси:

Код: 
  @POST
  @Consumes(MediaType.APPLICATION_JSON)
  @Produces(MediaType.APPLICATION_JSON)
  @Path("{Id}/url")
  public List<Data> someLogic(@PathParam("Id") Long Id)
  {
    return someMethod();
  }

в js ты получишь array объектов, описывающий твои города
 
SammoLove сказав(ла):
но не знаю, как передать внутрь функции значение выбранного элемента списка
Натисніть, щоб розгорнути...

var object = document.getElementById("bcountry");
object.addEventListener("change", function() {
alert(this.value);
});

mvamva сказав(ла):
Но если ты хочешь SPA на ajax, то в можно заиспользовать jQuery:
Натисніть, щоб розгорнути...
для такого простого действия будем лепить jquery?
 
...:::Alex:::... спасибо, это как раз помогло. Я обратился с сервлету, он мне вернул готовый кусок списка с городами в HTML.
mvamva, согласен, но сейчас не до этого. И, наверное, нужно сначала JS освоить, а потом уже jQuery. А здесь вроде пишут, что есть инструменты и получше -
Тільки зареєстровані користувачі бачать весь контент у цьому розділі
 
Можно учить и ангуляры и т.д. но после jquery ;)
 
SammoLove сказав(ла):
...:::Alex:::... спасибо, это как раз помогло. Я обратился с сервлету, он мне вернул готовый кусок списка с городами в HTML.
mvamva, согласен, но сейчас не до этого. И, наверное, нужно сначала JS освоить, а потом уже jQuery. А здесь вроде пишут, что есть инструменты и получше -
Тільки зареєстровані користувачі бачать весь контент у цьому розділі
Натисніть, щоб розгорнути...

AngularJS против Backbone.js против Ember.js - ну это смотря какой проект тебе попадется. Такие фреймворки обычно в проектах посвежее (и не факт, что без jQuery обойдется), а если индусский легаси, то и на jQuery молишься... не говоря уже про requireJS или хотя бы underscore.
 
Вернулся к этому блоку. Не получается.
При выборе страны браузер выводит диалог, запрашивает "подтвердите действие на localhost". Это не очень удобно.
Запрос GET к CitiesServlet не поступает.

Вот моя функция:
Код: 
<script>
	function loadCities()
	{
		var object1 = document.getElementById("bcountry");
		object1.addEventListener("change", function() {
			alert(this.value);
		});
		var xmlhttp;
		if (window.XMLHttpRequest)
		{
			xmlhttp=new XMLHttpRequest();
		}
		xmlhttp.onreadystatechange=function()
		{
			if (xmlhttp.readyState==4 && xmlhttp.status==200)
			{
				document.getElementById("bcity").innerHTML=xmlhttp.responseText;
			}
		};
		xmlhttp.open("GET","CitiesServlet?countryId="+object1.value(),true); //CitiesServlet
		xmlhttp.send();
	}
</script>
 
Урл замаплен неправильно скорее всего. Надо в браузере посмотреть какой запрос идет и какой респонс приходит. До js надо убедиться, что твой сервис доступен по указанному урлу и дает 200.
 

Вкладення

  • 1.png
    1.png
    55.2 КБ · Перегляди: 101
  • 2.png
    2.png
    63.8 КБ · Перегляди: 95
SammoLove сказав(ла):
При выборе страны браузер выводит диалог, запрашивает "подтвердите действие на localhost". Это не очень удобно.
Натисніть, щоб розгорнути...
Я так понимаю ты открываешь страничку не через сервер, а file:// ?

Просто так ajax запросы на другие сервера блокируются.
 
Всё, заработало. Нет, mvamva. Я просто функцию в начале криво написал. Я потом увидел, что alert и выводит то окошко, и что там и должна быть обработка события. Когда я весь код туда перенёс, запрос стал поступать. Просто и работает! Просто для меня пока этот скрипт - это заграница )
 
форматтер себе настрой сразу, чтобы и не привыкал к такому бардаку в коде
 
если собираешься дальше развиваться как java dev то советую посмотреть на такой фреймворк как Vaadin, с помощью него твоя проблема решается в 3 строчки кода;)
 
Ух ты! Интересная штука. Я о таком и не мечтал. Практически android-приложение в браузере. Прямо сегодня попробую сделать с ним страничку, там хороший учебник.
Хотя я фреймворки кроме spring и hibernate ещё не проходил. Но скоро по плану было пощупать bootstrap
 
SammoLove сказав(ла):
Ух ты! Интересная штука. Я о таком и не мечтал. Практически android-приложение в браузере.
Натисніть, щоб розгорнути...
Еще можешь Sencha Ext JS и Touch посмотреть. Там вообще полная эмуляция ООП, нет необходимости ковырять ХТМЛ (он там спрятан глубоко внутри, в разработке вообще не используется), а если вместо убогого JS прикрутить хотя бы CoffeeScript, то можно даже с удовольствием юзать.
Правда оно не полностью опенсорс, особенно инструменты, но сама SDK выходит под GPL.
 
не используйте alert. ну пожалуйста. используйте console.log

mvamva сказав(ла):
AngularJS против Backbone.js против Ember.js - ну это смотря какой проект тебе попадется. Такие фреймворки обычно в проектах посвежее (и не факт, что без jQuery обойдется), а если индусский легаси, то и на jQuery молишься... не говоря уже про requireJS или хотя бы underscore.
Натисніть, щоб розгорнути...

не используйте jQuery. ну пожалуйста. используйте reactjs
 
А не нужно ли пройти весь путь от чисто JS через jquery до разных там фреймвороков? И ещё,
React часто упоминают в одном ряду с другими javascript фреймворками, но споры «React vs Angular» не имеют смысла, потому что это не сопоставимые вещи. Angular — это полноценный фреймворк (включающий и уровень представления). React — нет. Вот почему React вызывает столько непонимания в развивающемся мире полноценных фреймворков — это только представление.
Натисніть, щоб розгорнути...
 
А jquery это фреймворк? Причем тут angular вообще:)
 
Ви повинні увійти або зареєструватися, щоб відповісти.
Назад
Зверху Знизу