Подскажите по 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 КБ · Перегляди: 103
  • 2.png
    2.png
    63.8 КБ · Перегляди: 98
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 вообще:)
 
Ви повинні увійти або зареєструватися, щоб відповісти.
Назад
Зверху Знизу
We are an independent Ukrainian forum based in the city of Kharkiv. We have been supported by advertising, but since the war began, advertising revenue has ceased. If you have the opportunity, please help us with a donation. Support the forum