jquery - 根据不同下拉列表的选择填充下拉列表

Question

我的 spring boot java thymeleaf 项目有一个表单，其中包含从 SQL 表填充的下拉列表。表单有第二个下拉列表，我想根据在第一个下拉列表中选择的项目来填充它。为此，我需要传递第一个下拉列表的值的 ID。我知道我必须使用 JQuery 来完成此操作，但我需要进行两次 ajax 调用吗？一个传递选定的ID，一个检索第二个下拉列表的新列表？get ajax 应该在 post ajax 之后还是在里面？有人可以帮助我更好地理解实现我想要做的事情的最佳方式吗？

这是我到目前为止所拥有的：

<td> <select  class="form-control" id="parentCo" th:field="*{ams360Policies[__${stat.index}__].parentCompany}" required="true" >
      <option th:value="select">-Select-</option>
      <th:block th:each="carrier : ${carriers}">
               <option th:value="${carrier.parentCompanyCarrier}" th:text="${carrier.parentCompanyCarrier}" th:data="${carrier.id}"></option>
       </th:block>
        </select>
</td>
<td><select class="form-control" id="writeCos" th:field="*{ams360Policies[__${stat.index}__].writingCompany}" required="true" >

     </select>
</td>

//grab value of selected carrier
$('#parentCo').on('change', function(event){
    $('#parentCo').find('option:selected');
    var id = $(this).attr('data');
    $.ajax({
        type: "POST",
        url: "/carrierAjax",
        data: id,
        processData: false,
        contentType: false,
        cache: false,
        success: function(data, jqXHR){
            console.log('sent ID successfully')
        }
    });
    
     $.ajax({
        type: "GET",
        url: "/carrierAjax",
        data: carrierUmbrellas,
        processData: false,
        contentType: false,
        cache: false,
        success: function(data, jqXHR){
            //do afor each here to append each writeCo
            data.each(function(writeCo) {
            $('#writeCos').append('<option th:value="${writingCo.id}" th:text="${writingCo.companyName}"></option>')
        }
});

或者，如果我只需要进行一次 AJAX 调用，会是这样吗？

$('#parentCo').on('change', function(event) {
  $('#parentCo').find('option:selected');
  var id = $('#parentCo').find('option:selected').attr('data');
  console.log(jQuery.type(id));
  var token = $("meta[name='_csrf']").attr("content");
  var header = $("meta[name='_csrf_header']").attr("content");
  $.ajax({
    type: "POST",
    url: "/carrierAjax",
    data: {
      data: $('#parentCo').find('option:selected').attr('data')
    },
    cache: false,
    timeout: 600000,
    beforeSend: function(xhr) {
      xhr.setRequestHeader(header, token);
      console.log(header + ", " + token);
    },
    success: function(data) {
      //need to pass the value back from the spring controller here and append it below in an option tag...
      $('#writeCos').append('<option value=""></option>');
      console.log('successful');

    }
  });
});

在我的控制器中：

@RequestMapping(value="/carrierAjax", method=RequestMethod.POST)
    public @ResponseBody List <CarrierUmbrella>  getcarrierswriteco (@RequestParam("data") String data, DirectBind directBind, Model model) throws Exception{
        List <CarrierUmbrella> carrierUmbrellas = carrierUmbrellaRepository.findByCarrier(caRepository.findById(Long.parseLong(data)));
        model.addAttribute("carrierUmbrellas", carrierUmbrellas);
        return carrierUmbrellas;
    }

标签： jqueryajaxspring-boot