別のドロップダウン選択に基づいてドロップダウンに値を設定します。Spring MVC AJAX

Question

カテゴリには1つ、サブカテゴリには2つのドロップダウンがあります。最初のドロップダウンでどのカテゴリを選択したかに基づいて、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：

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

：私は、次のコントローラを持っているサブカテゴリ

<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> 

最初のドロップダウンを移入する

コントローラ：これは私がこれまで持っているものです

JSP：

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

2回目のドロップダウンを入力するために私は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"); 
      } 

     }); 
    }); 

もちろん、動作しません。私がカテゴリーを選択すると、2番目のドロップダウンに何も表示されません。私はもう何をすべきかわからず、私はすべてを試しました。誰かが私が間違っていることを教えてもらえますか？

Answer 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は、クエリパラメータを取得するために使用されます。だから、それは代わりに、以下のように@RequestParam使用@PathVariableの..../post_project?categoryId=1

のように次のようになります。だから、サブカテゴリを取得するために

、あなたは@RequestMapping

.../categories/1よう

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

Answer 2

を持っているあなたへのcontentType &データ型を追加してみてくださいAjaxコール：

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

あなたのコントローラをJson Requestを投稿するように変更してください：

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