基於另一個下拉選擇填充下拉列表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

回答

相關問題