基于另一个下拉选择 Spring MVC AJAX 填充下拉列表答案

【问题标题】：Populate dropdown based on another dropdown selection Spring MVC AJAX基于另一个下拉选择 Spring MVC AJAX 填充下拉列表
【发布时间】：2017-07-02 14:03:25
【问题描述】：

我有 2 个下拉菜单：一个用于类别，一个用于子类别。根据我在第一个下拉列表中选择的类别，我希望第二个下拉列表动态填充所选类别的子类别。这是我目前所拥有的：

控制器填充第一个下拉列表：

@RequestMapping(value = "/post_project", method = RequestMethod.GET)
    public String postProjectPage(Model model) {
        Project project = new Project();
        List<Category> categoriesList = categoryService.getAllCategories();
        model.addAttribute("projectForm", project);
        model.addAttribute("categoriesList", categoriesList);
        return "post_project";
    }

JSP：

<form:form id="post_project" action="/post_project" method="post" modelAttribute="projectForm"> 
    <form:select class="form-control" id="selectCategory" path="category">
         <option value="">-Select-</option>
         <form:options items="${categoriesList}" itemValue="id" itemLabel="category_name"/>
    </form:select>

对于子类别，我有以下控制器：

@RequestMapping(value = "/post_project", method = RequestMethod.POST)
    public @ResponseBody  List<Subcategory> getAllSubcategories(@RequestParam(value="categoryId") int categoryId) {
        return categoryService.getAllSubcategories(categoryId);
    }

JSP：

  <form:select class="form-control" id="selectSubcat" path="subcategory">
       <option value="-1" label="-Select-"/>
    </form:select>

为了填充第二个下拉列表，我使用了 AJAX，但我对此很陌生，我不知道它是否正确。

("#selectCategory").change(function(){
        var categoryId = $(this).val();
        $.ajax({
            type: 'POST',
            url: "/post_project",
            data: {"categoryId" : categoryId},
            success: function(data){
                var slctSubcat=$('#selectSubcat'), option="";
                slctSubcat.empty();

                for(var i=0; i<data.length; i++){
                    option = option + "<option value='"+data[i].id + "'>"+data[i].subcateogory_name + "</option>";
                }
                slctSubcat.append(option);
            },
            error:function(){
                alert("error");
            }

        });
    });

当然不行。当我选择一个类别时，第二个下拉列表中没有显示任何内容。我不知道该怎么办了，我已经尝试了一切。有人可以告诉我我做错了什么吗？

【问题讨论】：

后端收到请求了吗？

标签： javascript java ajax jsp spring-mvc

【解决方案1】：

让你作为 GET 请求：

("#selectCategory").change(function(){
    var categoryId = $(this).val();
    $.ajax({
        type: 'GET',
        url: "/categories/" + categoryId,
        success: function(data){
            var slctSubcat=$('#selectSubcat'), option="";
            slctSubcat.empty();

            for(var i=0; i<data.length; i++){
                option = option + "<option value='"+data[i].id + "'>"+data[i].subcateogory_name + "</option>";
            }
            slctSubcat.append(option);
        },
        error:function(){
            alert("error");
        }

    });
});

服务器端控制器方法：

@RequestParam用于获取查询参数。所以，就像..../post_project?categoryId=1

使用@PathVariable 代替@RequestParam，如下所示：

所以要获得子类别，你有 @RequestMapping 像 .../categories/1

@RequestMapping(value = "/categories/{categoryId}", method = RequestMethod.GET)
public @ResponseBody  List<Subcategory> getAllSubcategories(@PathVariable("categoryId") int categoryId) {
    return categoryService.getAllSubcategories(categoryId);
}

【讨论】：

但是 /post_project 的第一个 GET 请求是为了在第一个下拉列表中显示页面和类别。我不能对 /post_project 有 2 个 GET 请求。那我该怎么办？抱歉，我是新手。
拥有另一个 GET 很好。对于第一个请求，要显示页面，您可以使用 /post_project 并在加载页面后并在 select on change 事件中调用另一个 URL，例如 /categories/{categorId}。
I have a form for posting a project and when a category is selected I want the second dropdown to be populated with the subcategories on the same page.如果我使用像 /categories/{categoryId} 这样的另一个 URL，这并不意味着我必须在另一个页面上显示它们？
另一个将通过 AJAX 调用，您的控制器方法不应返回视图，而是返回 JsON 响应。
第一次调用将从 /post_project:GET 加载您的 JSP。这将有您的第一个选择元素，一旦选择，它将向 URL /categories/{categoryId} 发出 AJAX 请求，该请求将为具有该 ID 的子类别返回 JSON 对象。请求成功后，您可以使用数据/响应更新 DOM/秒选择元素。

【解决方案2】：

尝试将 contentType 和 dataType 添加到您的 Ajax 调用中：

` ....
  $.ajax({
        type: 'POST',
        url: "/post_project",
        data: {"categoryId" : categoryId},
        contentType:"application/json; charset=utf-8"
        dataType:"json",
........`

并将您的控制器更改为发布 Json 请求：

@RequestMapping(value = "/post_project", method = RequestMethod.POST, consumes=MediaType.APPLICATION_JSON_VALUE)

【讨论】：