需要从java返回json列表，以使用json填充html中的下拉列表

这篇文章与

我已经解决了这个问题，并将答案发布到了。我现在有另一个问题。这是我第一个使用json、java和html的项目，这是一个学习曲线

我使用相同的代码提取一些列表（一个地区列表，一个地区列表）；但是，将为地区列表返回不同的结果/格式。区域列表正确并返回：

我现在成功地使用它来填充下拉列表。然后，我选择其中一个值，并使用非常类似的代码重新调整所选区域内的地区列表。这将返回：

请注意方括号和引号

我使用的代码是：

HTML:

            <div class="col-md-2">
                <div class="form-select-group">
                    <label for="selectRegion">Select Region:</label>
                    <select class="form-control" id="selectRegion" name="selectRegion">
                    <option value="" disabled selected>Select your State first</option>
                    </select>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-select-group">
                    <label for="selectDistrict">Select District:</label>
                    <select class="form-control" id="selectDistrict" name="selectDistrict">
                    <option value="" disabled selected>Select your State first</option>
                    </select>
                </div>
            </div>

$(document).ready(function(){
$('#selectState').on('change', function() {
    $.ajax({
        type: "POST",
        url: "RegionView",
        cache: false,
        data: $(selectState).serialize(),
        success: function(data){
            $('#ajaxGetUserServletResponse').text(data);
        }
    }).done(function(responseJson) {
        dataType: "json",
        // Clear options
        $("#selectRegion").find("option").remove();
        $('#selectRegion').append($('<option value="" disabled selected>Select your Region</option>'));
        $("#selectDistrict").find("option").remove();
        $('#selectDistrict').append($('<option value="" disabled selected>Select your Region first</option>'));
        $("#selectGroup").find("option").remove();
        $("#selectSection").find("option").remove();
        $("#selectSubSection").find("option").remove();
        // Loop through JSON response to populate the Region drop down
        $.each(responseJson, function(key, value) {
            $('<option>').text(value).appendTo($("#selectRegion"));
        });
    });
});
    $('#selectRegion').on('change', function() {
        $.ajax({
            type: "POST",
            url: "DistrictView",
            cache: false,
            data: $(selectRegion).serialize(),
            success: function(data){
                $('#ajaxGetUserServletResponse').text(data);
            }
        }).done(function(responseJson2) {
            dataType: "json",
            // Clear options
            $("#selectDistrict").find("option").remove();
            $('#selectDistrict').append($('<option value="" disabled selected>Select your District</option>'));
            $("#selectGroup").find("option").remove();
            $('#selectGroup').append($('<option value="" disabled selected>Select your District first</option>'));
            $("#selectSection").find("option").remove();
            $("#selectSubSection").find("option").remove();
            // Loop through JSON response to populate the District drop down
            alert("Here1");
            $.each(responseJson2, function(key, value) {
                alert("Here2");
                $('<option>').text(value).appendTo($("#selectDistrict"));
            });
        });
    });

    $('#selectDistrict').on('change', function() {
        $.ajax({
            type: "POST",
            url: "GroupView",
            cache: false,
            data: $(selectDistrict).serialize(),
            success: function(data){
                $('#ajaxGetUserServletResponse').text(data);
            }
        }).done(function(responseJson) {
            dataType: "json",
            // Clear options
            $("#selectGroup").find("option").remove();
            $('#selectGroup').append($('<option value="" disabled selected>Select your Group</option>'));
            $("#selectSection").find("option").remove();
            $('#selectSection').append($('<option value="" disabled selected>Select your Group first</option>'));
            $("#selectSubSection").find("option").remove();
            // Loop through JSON response to populate the Group drop down
            $.each(responseJson, function(key, value) {
                $('<option>').text(value).appendTo($("#selectGroup"));
            });
        });
    });
  });

选择区域：
首先选择您所在的州
选择地区：
首先选择您所在的州

JSON:

            <div class="col-md-2">
                <div class="form-select-group">
                    <label for="selectRegion">Select Region:</label>
                    <select class="form-control" id="selectRegion" name="selectRegion">
                    <option value="" disabled selected>Select your State first</option>
                    </select>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-select-group">
                    <label for="selectDistrict">Select District:</label>
                    <select class="form-control" id="selectDistrict" name="selectDistrict">
                    <option value="" disabled selected>Select your State first</option>
                    </select>
                </div>
            </div>

$(document).ready(function(){
$('#selectState').on('change', function() {
    $.ajax({
        type: "POST",
        url: "RegionView",
        cache: false,
        data: $(selectState).serialize(),
        success: function(data){
            $('#ajaxGetUserServletResponse').text(data);
        }
    }).done(function(responseJson) {
        dataType: "json",
        // Clear options
        $("#selectRegion").find("option").remove();
        $('#selectRegion').append($('<option value="" disabled selected>Select your Region</option>'));
        $("#selectDistrict").find("option").remove();
        $('#selectDistrict').append($('<option value="" disabled selected>Select your Region first</option>'));
        $("#selectGroup").find("option").remove();
        $("#selectSection").find("option").remove();
        $("#selectSubSection").find("option").remove();
        // Loop through JSON response to populate the Region drop down
        $.each(responseJson, function(key, value) {
            $('<option>').text(value).appendTo($("#selectRegion"));
        });
    });
});
    $('#selectRegion').on('change', function() {
        $.ajax({
            type: "POST",
            url: "DistrictView",
            cache: false,
            data: $(selectRegion).serialize(),
            success: function(data){
                $('#ajaxGetUserServletResponse').text(data);
            }
        }).done(function(responseJson2) {
            dataType: "json",
            // Clear options
            $("#selectDistrict").find("option").remove();
            $('#selectDistrict').append($('<option value="" disabled selected>Select your District</option>'));
            $("#selectGroup").find("option").remove();
            $('#selectGroup').append($('<option value="" disabled selected>Select your District first</option>'));
            $("#selectSection").find("option").remove();
            $("#selectSubSection").find("option").remove();
            // Loop through JSON response to populate the District drop down
            alert("Here1");
            $.each(responseJson2, function(key, value) {
                alert("Here2");
                $('<option>').text(value).appendTo($("#selectDistrict"));
            });
        });
    });

    $('#selectDistrict').on('change', function() {
        $.ajax({
            type: "POST",
            url: "GroupView",
            cache: false,
            data: $(selectDistrict).serialize(),
            success: function(data){
                $('#ajaxGetUserServletResponse').text(data);
            }
        }).done(function(responseJson) {
            dataType: "json",
            // Clear options
            $("#selectGroup").find("option").remove();
            $('#selectGroup').append($('<option value="" disabled selected>Select your Group</option>'));
            $("#selectSection").find("option").remove();
            $('#selectSection').append($('<option value="" disabled selected>Select your Group first</option>'));
            $("#selectSubSection").find("option").remove();
            // Loop through JSON response to populate the Group drop down
            $.each(responseJson, function(key, value) {
                $('<option>').text(value).appendTo($("#selectGroup"));
            });
        });
    });
  });

$（文档）.ready（函数（）{
$（'#selectState'）。在（'change'，function（）上{
$.ajax({
类型：“POST”，
url:“区域视图”，
cache:false，
数据：$（selectState）.serialize（），
成功：功能（数据）{
$（'#ajaxGetUserServletResponse'）。文本（数据）；
}
}).done（函数（responseJson）{
数据类型：“json”，
//明确的选择
$（“#selectRegion”）.find（“option”）.remove（）；
$（'selectRegion'）。追加（$（'selectyourregion'）；
$（“#selectDistrict”）.find（“option”）.remove（）；
$（'#selectDistrict'）。追加（$（'首先选择您的地区'）；
$（“#selectGroup”）.find（“option”）.remove（）；
$（“#selectSection”）.find（“option”）.remove（）；
$（“#selectSubSection”）.find（“option”）.remove（）；
//循环JSON响应以填充区域下拉列表
$.each（responseJson，函数（键，值）{
$（''）.text（value）.appendTo（$（“#selectRegion”）；
});
});
});
$（'#selectRegion'）。在（'change'，function（）上{
$.ajax({
类型：“POST”，
url:“DistrictView”，
cache:false，
数据：$（selectRegion）.serialize（），
成功：功能（数据）{
$（'#ajaxGetUserServletResponse'）。文本（数据）；
}
}).done（功能（响应JSON2）{
数据类型：“json”，
//明确的选择
$（“#selectDistrict”）.find（“option”）.remove（）；
$（'selectDistrict'）。追加（$（'selectyour District'）；
$（“#selectGroup”）.find（“option”）.remove（）；
$（'#selectGroup'）。追加（$（'selectyour District first'）；
$（“#selectSection”）.find（“option”）.remove（）；
$（“#selectSubSection”）.find（“option”）.remove（）；
//循环JSON响应以填充地区下拉列表
警惕（“此处1”）；
$.each（responseJson2，函数（键，值）{
警惕（“此处2”）；
$（“”）.text（value）.appendTo（$（“#selectDistrict”）；
});
});
});
$（'#selectDistrict'）。在（'change'，function（）上{
$.ajax({
类型：“POST”，
url:“组视图”，
cache:false，
数据：$（selectDistrict）.serialize（），
成功：功能（数据）{
$（'#ajaxGetUserServletResponse'）。文本（数据）；
}
}).done（函数（responseJson）{
数据类型：“json”，
//明确的选择
$（“#selectGroup”）.find（“option”）.remove（）；
$（'selectGroup'）。追加（$（'selectyourgroup'）；
$（“#selectSection”）.find（“option”）.remove（）；
$（'#selectSection'）。追加（$（'selectyourgroup first'）；
$（“#selectSubSection”）.find（“option”）.remove（）；
//循环JSON响应以填充组下拉列表
$.each（responseJson，函数（键，值）{
$（“”）.text（value）.appendTo（$（“#选择组”）；
});
});
});
});

Java for Region（读取选定状态并返回填充到下拉列表中的区域列表）：

@WebServlet（“/RegionView”）
公共类RegionView扩展了HttpServlet{
私有静态最终长serialVersionUID=1L；
@凌驾
public void doPost（HttpServletRequest请求，HttpServletResponse响应）抛出ServletException，IOException{
String state=request.getParameter（“selectState”）；//来自引导
MySQLConnection.getConnection（）；
List listRegions=MySQLConnection.listGroupRegions（状态）；
if（listRegions==null | | listRegions.isEmpty（））{
response.getWriter（）.write（“此状态中没有区域”）；
}否则{
字符串json=new Gson（）.toJson（listRegions）；
setContentType（“应用程序/json”）；
响应。setCharacterEncoding（“UTF-8”）；
response.getWriter（）.write（json）；
}
}
}

然后我选择一个地区并将其传递给这个java，它返回一个地区列表。已找到地区，但返回的格式不正确，因此下一个下拉列表中未填充此列表：

    @WebServlet("/DistrictView")
    public class DistrictView extends HttpServlet {

    private static final long serialVersionUID = 1L;

    @Override
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        String[] region = request.getParameterValues("selectRegion"); // From bootstrap
        String region0 = region[0];

        MySQLConnection.getConnection();

        List<String> listDistricts = MySQLConnection.listGroupDistricts(region0);

        if (listDistricts == null || listDistricts.isEmpty()) {
            response.getWriter().write("No Districts in this Region.");
        }else{
            String json = new Gson().toJson(listDistricts);
            response.setCharacterEncoding("UTF-8");
            response.getWriter().write(json);
        }
    }
 }

@WebServlet（“/DistrictView”）
公共类DistrictView扩展了HttpServlet{
私有静态最终长serialVersionUID=1L；
@凌驾
public void doPost（HttpServletRequest请求，HttpServletResponse响应）抛出ServletException，IOException{
String[]region=request.getParameterValues（“selectRegion”）；//来自引导
字符串region0=区域[0]；
MySQLConnection.getConnection（）；
List listDistricts=MySQLConnection.listGroupDistricts（region0）；
if（listDistricts==null | | listDistricts.isEmpty（））