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

我有2个下拉菜单：一个用于类别，一个用于子类别。根据我在第一个下拉列表中选择的类别，我希望第二个下拉列表可以用所选类别的子类别动态填充。这是我到目前为止有：基于另一个下拉选择填充下拉列表Spring MVC AJAX

控制器来填充第一个下拉：

@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"); 
      } 

     }); 
    });

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

来源

2017-07-02 Maria C.

您是否在后端获取请求？ –

让你请求作为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

代替@RequestParam使用@PathVariable：

因此，要获得的子类别，你有@RequestMapping喜欢.../categories/1

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

来源

2017-07-02 14:37:44

但是/ post_project的第一个GET请求用于在第一个下拉菜单中显示页面和类别。我不能有2个GET请求/ post_project。那我该怎么办？对不起，我是新手。 –

这很好，有另一个GET。对于第一个请求，要显示页面，可以使用/ post_project，并在加载页面和select on change事件后，调用另一个URL，如/ categories/{categorId}。 –

查看我上面的更新回答。 –

尝试将contentType &的dataType添加到您的阿贾克斯电话：

` .... 
    $.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)

来源

2017-07-02 15:25:05

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

回答

相关问题