JQuery, JSON, Spring MVC - динамическая загрузка выбранных опций

Question

У меня есть такая форма jsp ... Значения во втором окне выбора, состояние должно быть загружено на основе значения в первом поле выбора (страна) ,.Я использую AJAX, JSON, Spring MVC для получения результатов.

index.jsp .....

<form:form name="myform" modelAttribute="search" action="POST">
    <form:input path="firstName" class="text" />
    <form:input path="lastName" class="text" />
    <form:select path="country" id="country">
         <form:option value="" label="--Choose A Value--"></form:option>
         <form:options items="${countryList}" itemValue="id"   itemLabel="name"></form:options>
     </form:select>
        <form:select path="state" onchange="javascript:itemFocus('submit');" id="state">
          <form:option value="" label="--Choose A Value--"></form:option>
          <form:options items="${stateList}" itemValue="id" itemLabel="description"></form:options>
     </form:select>
     <form:checkboxes items="${skillsList}" path="skills" itemLabel="description" itemValue="id" delimiter="<br>" />
      <form:checkboxes items="${languagesList}" path="languages" itemLabel="description" itemValue="id" delimiter="<br>" />

    </form:form>

controller ....

   @RequestMapping(value="stateslist.html")
   public @ResponseBody List<State> sectionList(@ModelAttribute("search") SearchForm search, @RequestParam(value="countryId", required=true) String countryId, ModelMap modelMap){
    return stateService.getStates(countryId);
   }

Часть JQuery ....

   <script type="text/javascript" charset="utf-8">
     function getStates(){
        $.getJSON(
             "stateslist.html", 
             {countryId: $('#country').val()},
             function(data) {
                  var html = '';
                  var len = data.length;
                  for(var i=0; i<len; i++){
                       html += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
                   }
                  $('#state').append(html);
             }
          );
 }

      $(document).ready(function() {
         $('#country').change(function()
          {   getStates();
          });
      });
</script>

Из отладчика я вижу, что запрос ajax отправляется в контроллер Spring, и он возвращает список объектов State, который содержит поля, такие как id, nameи т.д. ... Проблема в том, что параметры выбора состояния не меняются .. похоже, что function(data){....} часть не работает .. может кто-нибудь помочь мне, где я делаю не так здесь ...

--- Обновление ---

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

function(data){alert("something");}

, даже это не сработало ... чтозлой звонок никогда не достиг этой части ...

Answer 1

У меня тот же код, в котором значения city (cityId) меняются в зависимости от выбора страны (countryId). Работает отлично:

$("select#countryId").change(function(){
         $.getJSON("getCityList.do",{countryCode: $(this).val()}, function(j){
              var options = '';
              for (var i = 0; i < j.length; i++) {
                options += '<option value="' + j[i].id + '">' + j[i].name + '</option>';
              }
              $("select#cityId").html(options);
            });
        });

Так что я думаю, вам просто нужно добавить префикс "select".

Answer 2

Добавьте приведенную ниже зависимость к вашему pom.xml:

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.5.0</version>
</dependency>

Наконец добавьте @ResponseBody аннотацию в вашем классе контроллера.

Answer 3

Я обновляю ваш метод контроллера, чтобы избежать 406 Not Acceptable Ошибка:

@RequestMapping(value="stateslist.json")
    @ResponseStatus(HttpStatus.OK)
   public @ResponseBody List<State> sectionList(@ModelAttribute("search") SearchForm search, @RequestParam(value="countryId", required=true) String countryId, ModelMap modelMap){
    return stateService.getStates(countryId);
   }

и ваша часть JQuery:

<script type="text/javascript" charset="utf-8">
     function getStates(){
        $.getJSON(
             "stateslist.json", 
             {countryId: $('select#country').val()},
             function(data) {
                  var html = '';
                  var len = data.length;
                  for(var i=0; i<len; i++){
                       html += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
                   }
                  $('select#state').append(html);
             }
          );
 }

      $(document).ready(function() {
         $('#country').change(function()
          {   getStates();
          });
      });
</script>