jQuery ajax级联二级菜单

需求：

产品营销型网站

上传产品时，有产品种类的选择项，产品种类有一级分类和二级分类，

点击一级分类时，相应显示二级分类的条目。

功能实现：

默认查出一级分类的第一条数据，和一级分类第一条对应的二级分类条目，当选择一级分类的其他条目时，通过ajax查询出数据库中对应的二级分类条目，返回json格式的数据，并显示在二级分类的下拉列表中。

编程实现：

前端页面jsp：

<form method="post" modelAttribute="_pro" name="form1" id="form1" action="${ctx}/product-manage/add-product">
      <table width="100%" border="1" align="center" cellpadding="6" cellspacing="0" bordercolor="#FFFFFF" bgcolor="#F7F7F7">
        <tr>
          <td width="15%" bgcolor="#F7F7F7"><div align="center">产品分类</div></td>
          <td bgcolor="#F7F7F7">
          <select name="pid" id="pid" onchange="getData()">
          <c:forEach var="data" items="${clist}">
          <option value="${data.id}">${data.name}</option>
          </c:forEach>
          </select>
          &nbsp;&nbsp;
          <select name="categoryId" id="categoryId">
          <c:forEach var="data" items="${slist}">
          <option value="${data.id}">${data.name}</option>
          </c:forEach>
          </select>
          </td>
        </tr>
</form>

 jsp中的ajax的js部分： 

<script src="${ctx}/js/jquery-1.7.1.min.js"></script>
    function getData()
    {
		var pid = $("#pid").val();
	 	$.ajax({        
	         url:"${ctx}/product-manage/sub-category?"+Math.random(),
	         data:{pid : pid},
	         type : "post",  
		 	 cache : false,  
		 	 dataType : "json", 
	         error:function(){
	         	alert("error occured!!!");
	         },
	         success:function(data){
	         if(data!="0"){
				var categoryId = document.getElementById('categoryId');
				//清空数组
				categoryId.length = 0;
				for(var i=0;i<data.length;i++){
					 var xValue=data[i].id;  
                     var xText=data[i].name;  
                     var option=new Option(xText,xValue);  
                     categoryId.add(option);  
				}
	          }else{
	          	 var categoryId = document.getElementById('categoryId');
	          	 categoryId.length = 0;
		      }
	       }
	   });
	}

 后端的json处理代码：

	/**
	 * 得到产品种类对应的子种类  : json数据
	 * @throws IOException
	 */
	@SuppressWarnings("unchecked")
	@RequestMapping(value="sub-category")
	public String getSubCategory(HttpServletRequest request, HttpServletResponse response) throws IOException{
		response.setContentType("text/xml;charset=UTF-8");  
        
	    PrintWriter out = null;  
	    try {
	        out = response.getWriter();  
	    } catch (IOException e) {  
	        e.printStackTrace();  
	    }
	    String pid = request.getParameter("pid");
	    
	    String sql = "select id,name from product_category where pid=?";
		List<ProductCategory> clist = (List<ProductCategory>) DBHandler.queryBeanList(sql, ProductCategory.class, pid);
		
		JSONArray array = new JSONArray();  
        JSONObject member = null;  
        try {
	        for (ProductCategory p:clist) {  
	            member = new JSONObject();  
				member.put("name", p.getName());
	            member.put("id", p.getId());  
	            array.put(member);
	        }
        } catch (JSONException e) {
			e.printStackTrace();
		}
        
        out.print(array.toString());
		
	    return null;
	}