在Spring MVC 3中使用Ajax对类别和子类别进行动态下拉

时间:2018-06-29 20:02:52

标签: jquery ajax spring-mvc jsp

谁能告诉我使用ajax在spring mvc中创建一个动态下拉列表。我正在创建一个,但无法通过url获得正确的响应,并且控制器未与ajax连接。我正在使用mysql数据库创建类别和子类别列表下拉列表。请指导我,我是spring mvc和jquery的新手。

JSP

           <div class="form-group">
            <label>Category</label>
            <select name="catId" class="form-control" id="catId"  >
            <option value = "Select" > --- Select Cat ---</option>
            <c:forEach items="${categories}" var="cobj">
            <option value="${cobj.id}">${cobj.categoryName}</option>
            </c:forEach>
            </select>
            </div>

控制器

    @RequestMapping(value="/itemGroup1",
        method=RequestMethod.GET)
   public ModelAndView getGroupPage()throws Exception
    {
       Category cat= new Category();
       ModelAndView mav = new ModelAndView();
       ArrayList<Category> catList = dao5.getAllCategories();
       mav.addObject("categories", catList);

            mav.setViewName("itemGroup");
        System.out.println("getgrouppage"+cat.getId());

        return mav;
         }

SubCats

            <div class="form-group">
            <label>Select Sub Category</label>
            <select name="subCatId" class="form-control" id="subCatId">
            <option value = "Select" > --- Select Sub Cat ---</option> 
            <c:forEach items="${subCats}" var="scobj">
            <option value="${scobj.id}">${scobj.name}</option>
            </c:forEach>
            </select>
            <span><a href = "newSubCategory.mvc">Click here to add new Sub 
            Category.</a></span>
            </div>

控制器

   @RequestMapping(value="/itemGroup1/{catId}",
        method=RequestMethod.GET)
   public ModelAndView getSubCats(@PathVariable("catId") int catId) throws 
      Exception
    {
    ModelAndView mav = new ModelAndView();
    ArrayList<SubCategory> subCatList = dao6.getAllSubCategories(catId);
    mav.addObject("subCats", subCatList);
    mav.setViewName("itemGroup");
    System.out.println("main"+catId);
    return mav;
   }          

ajax

            <script type=text/javascript>
            $(document).ready(function(){
                $("#catId").change(function(){

                debugger;
                alert($("#catId").val());
                var Cat_Id=$("#catId").val();


                $.ajax({
                    url: "/ajaxproject/public/itemGroup.jsp",
                    type:'GET',
                    data:{'id':Cat_Id},
                    success:function(response)
                    {

                        alert(response);

                        $('#subCatId').empty();
                        for(i in response){
                        $("#subCatId").append('<option 
            value="'+response[i].id+'">'+response[i].name+'  </option>');
                        //alert(subCats);
                        //alert(data[i].id);
                        //alert($("#subcatId").val());
                        //alert(data);
                        }
                    },

                    error:function(jqXHR, textStatus, errorThrown){
                        alert(errorThrown);
                    }

                });
            });
            });

          </script>

我不知道如何使用ajax url向控制器发送数据,请指导我。我对所有这些代码感到困惑。请告诉我路径变量的正确信息。如果我们在请求映射中的链接后给出路径,应该在web.xml文件中进行哪些更改。

web.xml 我在调度程序serclet类的映射中给出的url模式是* .mvc

请告诉我由于路径变量该更改或添加的内容。

0 个答案:

没有答案