jQuery ajax 레벨 2 메뉴

필요:
제품 마 케 팅 형 사이트
제품 을 업로드 할 때 제품 종류 선택 항목 이 있 고 제품 종 류 는 1 급 분류 와 2 급 분류 가 있 습 니 다.
1 급 분 류 를 클릭 하면 2 급 분 류 된 항목 을 표시 합 니 다.
기능 구현:
기본적으로 1 급 분류의 첫 번 째 데 이 터 를 찾 습 니 다. 1 급 분류의 첫 번 째 항목 과 대응 하 는 2 급 분류 항목 을 찾 습 니 다. 1 급 분류의 다른 항목 을 선택 할 때 ajax 를 통 해 데이터베이스 에 대응 하 는 2 급 분류 항목 을 조회 하고 json 형식의 데 이 터 를 되 돌려 주 며 2 급 분류의 드 롭 다운 목록 에 표 시 됩 니 다.
프로 그래 밍 구현:
전단 페이지 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 부분: 

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