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

[SammoLove]

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

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

Вот основа

<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. А может проще вернуть сразу кусок кода подобного верхнему и вставить его?

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

Нашёл что-то похожее на нужное мне -

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

, но не знаю, как передать внутрь функции значение выбранного элемента списка.

 

[mvamva]

Задачку ты выбрал нетривиальную. Ее можно многими способами решить. Но если ты хочешь 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 объектов, описывающий твои города

 

[...:::Alex:::...]

но не знаю, как передать внутрь функции значение выбранного элемента списка

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

Но если ты хочешь SPA на ajax, то в можно заиспользовать jQuery:

для такого простого действия будем лепить jquery?

 

[mvamva]

для такого простого действия будем лепить jquery?

все равно от jquery никуда в веб разработке не деться, пусть изучает

но лучше сразу промисы учить

 

[SammoLove]

...:::Alex:::... спасибо, это как раз помогло. Я обратился с сервлету, он мне вернул готовый кусок списка с городами в HTML.
mvamva, согласен, но сейчас не до этого. И, наверное, нужно сначала JS освоить, а потом уже jQuery. А здесь вроде пишут, что есть инструменты и получше -

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

 

[...:::Alex:::...]

Можно учить и ангуляры и т.д. но после jquery

 

[mvamva]

...:::Alex:::... спасибо, это как раз помогло. Я обратился с сервлету, он мне вернул готовый кусок списка с городами в HTML.
mvamva, согласен, но сейчас не до этого. И, наверное, нужно сначала JS освоить, а потом уже jQuery. А здесь вроде пишут, что есть инструменты и получше -

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

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

 

[SammoLove]

Вернулся к этому блоку. Не получается.
При выборе страны браузер выводит диалог, запрашивает "подтвердите действие на 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>

 

[mvamva]

Урл замаплен неправильно скорее всего. Надо в браузере посмотреть какой запрос идет и какой респонс приходит. До js надо убедиться, что твой сервис доступен по указанному урлу и дает 200.

 

[...:::Alex:::...]

При выборе страны браузер выводит диалог, запрашивает "подтвердите действие на localhost". Это не очень удобно.

Я так понимаю ты открываешь страничку не через сервер, а file:// ?

Просто так ajax запросы на другие сервера блокируются.

 

[SammoLove]

Всё, заработало. Нет, mvamva. Я просто функцию в начале криво написал. Я потом увидел, что alert и выводит то окошко, и что там и должна быть обработка события. Когда я весь код туда перенёс, запрос стал поступать. Просто и работает! Просто для меня пока этот скрипт - это заграница )

 

[mvamva]

форматтер себе настрой сразу, чтобы и не привыкал к такому бардаку в коде

 

[Level_UP]

если собираешься дальше развиваться как java dev то советую посмотреть на такой фреймворк как Vaadin, с помощью него твоя проблема решается в 3 строчки кода

 

[SammoLove]

Ух ты! Интересная штука. Я о таком и не мечтал. Практически android-приложение в браузере. Прямо сегодня попробую сделать с ним страничку, там хороший учебник.
Хотя я фреймворки кроме spring и hibernate ещё не проходил. Но скоро по плану было пощупать bootstrap

 

[Das Zugunfall]

Ух ты! Интересная штука. Я о таком и не мечтал. Практически android-приложение в браузере.

Еще можешь Sencha Ext JS и Touch посмотреть. Там вообще полная эмуляция ООП, нет необходимости ковырять ХТМЛ (он там спрятан глубоко внутри, в разработке вообще не используется), а если вместо убогого JS прикрутить хотя бы CoffeeScript, то можно даже с удовольствием юзать.
Правда оно не полностью опенсорс, особенно инструменты, но сама SDK выходит под GPL.

 

[Level_UP]

Практически android-приложение в браузере.

ну я бы назвал это скорее swing для веба

 

[Stqs]

не используйте alert. ну пожалуйста. используйте console.log

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

не используйте jQuery. ну пожалуйста. используйте reactjs

 

[SammoLove]

А не нужно ли пройти весь путь от чисто JS через jquery до разных там фреймвороков? И ещё,

React часто упоминают в одном ряду с другими javascript фреймворками, но споры «React vs Angular» не имеют смысла, потому что это не сопоставимые вещи. Angular — это полноценный фреймворк (включающий и уровень представления). React — нет. Вот почему React вызывает столько непонимания в развивающемся мире полноценных фреймворков — это только представление.

 

[Stqs]

А jquery это фреймворк? Причем тут angular вообще

 

[mvamva]

не используйте jQuery. ну пожалуйста. используйте reactjs

Прямо вижу письмо украинского недоджуниора американскому архитекту: Let's throw away your f*cking jquery and start using reactjs instead