Ajax-based three linkage

The first renderings

Click on the faculties of the program when a query to get the professional name by ajax asynchronous obtain class information in the query professional name when

ajax code is as follows

   // The s_id all professional information query 
      function the findClass () 
    {               
        var Id = $ ( "# sProfessional" ) .val (); // Get value Id sProfessional 
        $ .ajax ({ 
            URL: "<% = the basePath%> Student / findClass.action " , // passed back 
            type: " POST " , 
            timeout: " 1000 " , 
            Data: { " Id " : Id}, the value of the acquired transmitted back 
            Success: function (Data) 
            {                 
                $ ( "#sClass the Option" ) .remove (); 
                $ ("#sClass").append("<option value='0'>--请选择--</option>");
                if (data != null)
                {
                    for ( var i = 0; i < data.length; i++)
                    {
                        var s_id = data[i].s_id;
                        var title = data[i].title;
                        $("#sClass").append("<option value="+s_id+">"
                                + title + "</option>");
                        }
                    }
                },
                error : function(XMLResponse) { 
                    Alert (XMLResponse.responseText); 
                    }         
                }); 
        } 
   
//      Query student information

Front-end code as follows

        <div class="form-group">
                            <label for="sDepartment">院系</label> <select class="form-control"
                onchange="findsProfessional()"     id="sDepartment" name="sDepartment">
                                <option value="">--请选择--</option>
                                <c:forEach items="${Department}" var="row"Option<> // value here by the backend storage model HOU
                                    value="${row.s_id}">${row.title}</option>  
                                </c:forEach>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="sProfessional">学生专业</label> <select   onchange="findClass()"
                                class="form-control" id="sProfessional" name="sProfessional">
                                <option value="">--请选择--</option>

                            </select>
                        </div>
                        <div class="form-group">
                            <label for="sClass">学生班级</label> <select class="form-control"
                                id="sClass" name="sClass">
                                <option value="">--请选择--</option>
                            </select>
                        </div>

Back-end code as follows

    / ** 
     * Query all information in accordance with professional faculty s_id 
     * 
     * / 
    @ RequestMapping ( "/student/findsProfessional.action" ) 
    @ResponseBody 
    public List <BaseDict> list2 (@RequestParam ( "Id" ) String Id1) { 

        int   the above mentioned id = the Integer.parseInt (of Id1); 
        List <baseDict> getsProfessionalById = studentService.getsProfessionalById (ID);    
         for (baseDict baseDict: getsProfessionalById) 
        { 
            
            System.out.println (baseDict.getTitle ()); 
        } 
        return studentService.getsProfessionalById (ID) ;      
    }     
    / ** 
     * query information about all classes based on professional s_id
     *
     */
    @RequestMapping("/student/findClass.action")
    @ResponseBody
    public List<BaseDict> list3(@RequestParam("Id")String id1) {    
        int  id=Integer.parseInt(id1);
         List<BaseDict> getsClasslById = studentService.getsClasslById(id);
        for(BaseDict baseDict:getsClasslById)
        {
            
            System.out.println(baseDict.getTitle());
        }
        return studentService.getsClasslById(id); 
    }    

Congratulations also learned a skill