Ajax Call on Same JSP с Javascript

Question

У меня есть JSP, включающий три раскрывающихся списка под названием «страны», «регионы» и «города». Моя цель - заполнить регионы из стран и городов из регионов. Я сделал это с параметрами, использующими Java и Javascript на одной странице, но в любом клике по раскрывающимся спискам страница обновляется. Я не хочу, чтобы он обновлялся при каждом щелчке по раскрывающимся спискам.

Данные «стран», «регионов» и «городов» поступают из данных JSON на Java-части «<% ...%>» на той же странице.

Я попытался сделать это с помощью AJAX, но не смог найти рабочий пример для передачи параметров. Если это необходимо для разделения всей страницы на небольшие JSP, такие как «countries.jsp», «regions.jsp», «cities.jsp», я могу это сделать, но мне нужно решить параметр, проходящий между ними. Я хотел бы получить параметры как вызов Ajax на той же странице БЕЗ ИСПОЛЬЗОВАНИЯ JQUERY. Мне нужно сделать это с чистой JS.

Я ищу ваши предложения и рабочие примеры JSP Ajax, включая параметры.

Answer 1

Во-первых, я думаю, вы хотите разбить вещи на region.jsp и cities.jsp (страны всегда будут оставаться неизменными, верно?). Затем вам нужно прикрепить функцию, которая захватывает значения из стран, когда она изменяется, используя событие OnChange и передает ее вашим регионам. Jsp. Как это:

<select name-"countries" id-"countries" OnChange="getRegions();"><option> ...</option></selct> 

Тогда вы не реализуете JavaScript, чтобы сделать вызов Ajax, как это (не обязательно) JQuery

  var requestObj = false; 

      if (window.XMLHttpRequest) { 
       requestObj = new XMLHttpRequest(); 
      } else if (window.ActiveXObject) { 
       requestObj = new ActiveXObject("Microsoft.XMLHTTP"); 
      } 

      function getRegions() 
      { 
       var select = document.getElementById('countries'); 
       var currentCountry = select.options[select.selectedIndex]; 
       if (requestObj) { 
        requestObj.open("GET", "/ajax/regions.jsp?country=" + currentCountry); 
        requestObj.onreadystatechange = function() 
        { 
         if (requestObj.readyState == 4 && requestObj.status == 200) { 
           var options = parseJSON(requestObj.responseText); 
          for(var i=0; i<options.length; i++) { 
            document.getElementById("regions").appendChild("<option value='" + options['id'] + "'>" + options['text'] + "</option>"); 
          } 
         } 
        } 
        requestObj.send(null); 
       } 
      } 

Уф, какой взрыв из прошлого, не JQuery. Это имеет смысл?