SSH Ajax+Json实现三级select选框

**背景：**最近在做毕设的时候，需要在添加题目的时候用到（题库）->（章节）->（知识点）的三级select选框
**数据库说明：**一个题库包含多个章节（1对多），一个章节包含多个知识点（同样是1对多）

一、先看效果：
1.选择题库：若题库中没章节，给出提示；若有则可以在章节选框中生成相对应的章节

2.选择章节：若章节中没知识点，给出提示；若有则可以在知识点选框中生成对应的知识点

3.选择知识点：

4.展示：

5.若在4.的情况之下，选择题库，则章节和知识点的内容会被清空

1. pojo层
   题库course（省略了set方法）

@Entity
@Table(name="course")
public class Course {

	private int id;
	private String name;
	Set<Chapter> chapters;
	Set<Exam> exams;
	
	@OneToMany(fetch=FetchType.EAGER)
    @JoinColumn(name="cid")
	public Set<Exam> getExams() {
		return exams;
	}
	@Id
	@GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "id")
	public int getId() {
		return id;
	}
	@OneToMany(fetch=FetchType.EAGER)
    @JoinColumn(name="courseid")    
	public Set<Chapter> getChapters() {
		return chapters;
	}
	}

}

章节chapter（省略了set方法），为了防止json数组序列化出现无限递归的情况，在1对多的多端的get和set方法上需要加上@JsonBackReference

@Entity
@Table(name="chapter")
public class Chapter {

	private int id;
	private String name;
	private Course course;
	Set<Knowledge> knowledges;
	
	@ManyToOne
    @JoinColumn(name="courseid")   
	@JsonBackReference
	public Course getCourse() {
		return course;
	}
	@JsonBackReference
	public void setCourse(Course course) {
		this.course = course;
	}
	
	@Id
	@GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "id")
	public int getId() {
		return id;
	}

	@OneToMany(fetch=FetchType.EAGER)
    @JoinColumn(name="chaid")    
	public Set<Knowledge> getKnowledges() {
		return knowledges;
	}

}

知识点knowledge（省略了set方法）

@Entity
@Table(name="knowledge")
public class Knowledge {

	private int id;
	private String name;
	private Chapter chapter;

	@ManyToOne
    @JoinColumn(name="chaid") 
	@JsonBackReference
	public Chapter getChapter() {
		return chapter;
	}
	@JsonBackReference
	public void setChapter(Chapter chapter) {
		this.chapter = chapter;
	}

	@Id
	@GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "id")
	public int getId() {
		return id;
	}

2. action层
   在knowledgeaction中，加入了GetChapter和GetKnowledge这两个Action

	@Action("GetChapter")
	public void getchapter() throws IOException{

		HttpServletRequest request= ServletActionContext.getRequest();
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setContentType("text/html;charset=utf-8");
		String cid = request.getParameter("id");
		int id = Integer.parseInt(cid);
		//根据题库id获得章节的list
		List<Chapter> chapters = chapterservice.findchapterbycourseid(id);
		//准备json
		ObjectMapper mapper = new ObjectMapper();
		
		String result = mapper.writeValueAsString(chapters);
		response.setContentType("text/javascript");
		response.getWriter().print(result);
	}
	
	@Action("GetKnowledge")
	public void getknowledge() throws IOException{
		HttpServletRequest request= ServletActionContext.getRequest();
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setContentType("text/html;charset=utf-8");
		String cid = request.getParameter("id");
		int id = Integer.parseInt(cid);
	
		List<Knowledge> knowledges = knowledgeService.findknowledgebychapterid(id);
		ObjectMapper mapper = new ObjectMapper();
		
		String result = mapper.writeValueAsString(knowledges);
		response.setContentType("text/javascript");
		response.getWriter().print(result);
	}

3. jsp
   准备一个table，首先列出所有的course

<table>
<tr>
<td>
	<label>题库</label>
</td>
	<td>
		<%-- id = "courses" --%>
		<select id="courses" required name="coursesid"  class="form-control">                                         
		<option value="">--请选择--</option>  
		<c:forEach items="${courses}" var="course" varStatus="status">  
		<option value='${course.id}'>${course.name}</option>  
	    </c:forEach>  
		</select>  
	</td>
	<td>
		<label>章节</label>
	</td>
	<td><%-- id = "chapters" --%>
		<select  class="form-control" required name="chapter" id="chapters">
		<option value="">--请选择--</option>  
		</select>
	</td>
	<td>
		<label>知识点</label>
	</td>
	<td>
		<select  class="form-control" required name="konwledge.id" id="knowledges">
		<option value="">--请选择--</option>  
		</select>
	</td>
</tr>
</table>

4. js

<script type="text/javascript">
		$(function(){
			//1.获取courses，添加change响应函数
			//2.使#chapters只保留第一个子节点
			//3.获取#courses 选择的值，若值为""，即选择的是"请选择"，此时不需要发送AJAX请求
			//4.若值不为"",说明的确是 courses 发生了改变，准备Ajax请求
			//4.1准备url,args,
			//5.返回Json数组
			//5.1若返回的数组中的元素为0，提示“当前题库没有章节”
			//5.2若返回的数组中的元素不为0，遍历，创建option节点，并把新创建的option节点加为#chapters的子节点
			
			$("#courses").change(function(){
				$("#chapters option:not(:first)").remove();
				$("#knowledges option:not(:first)").remove();
				
				var course= $(this).val();
				
				if(course != ""){
					var url ="${pageContext.request.contextPath }/GetChapter";
					
					var args = {"id":course,"time":new Date()}
					
					$.getJSON(url, args, function(data){
						if(data.length == 0){
							alert("当前题库没有章节");
						}else{
							for(var i = 0; i< data.length;i++){
								var chapterId = data[i].id;
								var chapterName = data[i].name;
								
								$("#chapters").append("<option value='"+chapterId +"'>"+chapterName +"</option>");
								
							}
						}
					});
					
				}
			});
		})
		
		
		$(function(){
			$("#chapters").change(function(){
				$("#knowledges option:not(:first)").remove();
				var chapter = $(this).val();
				
				if(chapter != ""){
					var url ="${pageContext.request.contextPath }/GetKnowledge";
					
					var args = {"id":chapter ,"time":new Date()}
					
					$.getJSON(url, args, function(data){
						if(data.length == 0){
							alert("当前章节没有知识点");
						}else{
							for(var i = 0; i< data.length;i++){
								var knowledgeId = data[i].id;
								var knowledgeName = data[i].name;
								
								$("#knowledges").append("<option value='"+knowledgeId +"'>"+knowledgeName +"</option>");
								
							}
						}
					});
					
				}
			});
		})
	</script>