Jquery 用ajax解析页面列表

我有国家、州和城市的下拉列表。我写了控制器，得到了国家Id的列表，我添加了这样的内容

<option value="1"> Afghanistan </option>
<option value="2"> Aland Islands </option>
...

我的控制器：

@GetMapping("/country")
public @ResponseBody List<States>  getStates(@RequestParam("countryId") Long countryId){
    List<States> stateList = countryRepo.findAllById(countryId);
    return stateList;
}

@GetMapping（“/country”）
public@ResponseBody List getStates（@RequestParam（“countryId”）Long countryId）{
List stateList=countryRepo.findAllById（countryId）；
返回状态列表；
}

问题是如何解析要选择的信息？我尝试了各种各样的代码，但都不管用

    $("#countryId").change(function () {
        var countryId = $("#countryId").val();
        $.ajax({
            type: 'GET',
            url: '/country?countryId='+countryId,
            dataType: 'html',
            success: function (states) {
                var html = '';
                var len = states.length;
                for (var i = 0; i < len; i++) {
                    html += '<option value="' + states[i].id + '">'
                        + states[i].name
                        + '</option>';
                }
                $('#stateop').html(html);

            }
        });
    });

$（“#countryId”）.change（函数（）{
var countryId=$（“#countryId”）.val（）；
$.ajax({
键入：“GET”，
url:'/country？countryId='+countryId，
数据类型：“html”，
成功：功能（状态）{
var html=''；
var len=states.length；
对于（变量i=0；i

状态显示一个这样的长字符串：“UnfinedUndefinedUndefinedUndefinedUndefinedUndefinedUndefinedUndefined”。

---

如何正确解析响应？

这个问题似乎与Thymeleaf无关。您是否可以编辑问题的标题，并删除

thymeleaf

标记？或者澄清为什么/如何与thymeleaf相关？为什么要使用

数据类型：“html”

？这不应该是json吗？您还需要将列表转换为json，然后将其发送回ajax。另外，为了正确渲染，应该有$（“#stateop”）.empty（）；在“成功：功能（状态）{”之后行。此问题似乎与Thymeleaf无关。您是否可以编辑问题的标题，并删除

Thymeleaf

标记？或者澄清为什么/如何与Thymeleaf相关？为什么您的

数据类型：“html”

？这不应该是

json

？您还需要将列表转换为json，然后将其发送回ajax。t问题出在数据类型上：“html”应该是像@Swati提到的“json”。另外，为了正确呈现，在“success:function（states）{”行之后应该有$（“#stateop”）.empty（）。

    $("#countryId").change(function () {
        var countryId = $("#countryId").val();
        $.ajax({
            type: 'GET',
            url: '/country?countryId='+countryId,
            dataType: 'html',
            success: function (states) {
                var html = '';
                var len = states.length;
                for (var i = 0; i < len; i++) {
                    html += '<option value="' + states[i].id + '">'
                        + states[i].name
                        + '</option>';
                }
                $('#stateop').html(html);

            }
        });
    });