jquery ajax및 xml 실전 예제(카테고리 선택)

작성자:
몇 년전에 쇼핑몰을 제작하면서 카테고리 선택부분을 ajax로 불러와서 페이지에 출력하는데 꽤 고생하면서 만든 적이 있다. jquery를 해보닝 예전에 했던 부분을 상당히 편하게 만들수 있을꺼 같아 뚝딱뚝딱 몇 십분 만에 완성되었다.

헐~ 예전에 이거 작업하면서 꼬박 하루를 넘긴생각을 하면 ㅠ.ㅠ
혹시 쇼핑몰을 제작하시다면 관리자모드에 카테고리 선택부분은 거진 이런 모습일꺼다.


자! 각설하고 소스 들어간다.

xml부분(실질적인 데이타부분 이겠다.xml이어두 되구 디비에서 바로 리스팅하는 부분이어두 상관없다. xml로 만드는게 편할꺼 같다. 힌트 : 디비에서 값을 불러온다면 select문을 쓰면서 xml태그형태로 바꾸어주는 함수가 있다.)
category1.xml
<?xml version="1.0" encoding="utf-8"?>
<category>
 <item>
   <value>111</value>
   <title>패션의류/잡화 여성의류/패션</title>
 </item>
 <item>
   <value>112</value>
   <title>남성의류/정장</title>
 </item>
 <item>
   <value>113</value>
   <title>빅사이즈/미시/커리어</title>
 </item>
 <item>
   <value>114</value>
   <title>언더웨어/잠옷/보정속옷</title>
 </item>
 <item>
   <value>115</value>
   <title>여성화/남성화/패션화</title>
 </item>
 <item>
   <value>116</value>
   <title>가방/지갑/패션잡화</title>
 </item>
 <item>
   <value>117</value>
   <title>쥬얼리/시계/선글라스</title>
 </item> 
</category>

category2.xml
<?xml version="1.0" encoding="utf-8"?>
<category>
 <item>
   <value>211</value>
   <title>캐주얼의류브랜드</title>
 </item>
 <item>
   <value>212</value>
   <title>여성의류브랜드</title>
 </item>
 <item>
   <value>213</value>
   <title>남성의류브랜드</title>
 </item>
 <item>
   <value>214</value>
   <title>언더웨어브랜드</title>
 </item>
 <item>
   <value>215</value>
   <title>슈즈/운동화브랜드</title>
 </item>
 <item>
   <value>216</value>
   <title>가방/잡화브랜드</title>
 </item>
 <item>
   <value>217</value>
   <title>쥬얼리/시계브랜드</title>
 </item> 
</category>

소스부분(보시기 편하게 javascript로 나누어 놓았을뿐 같이 파일 합쳐두 상관없다. jquery의 ajax로 불러와서 셀렉트박스에 데이타를 넣어주는거다. 소스를 천천히 보시면 굳이 jquery를 모르시더라도 단편적으로 알수 있으리라. 그리고 전에 포스팅 참조 )
ajaxXml.js
// sel1의 값에 따라 서브 카테고리 불러오기
$(document).ready(function() {
  selectBoxDisplay("hide"); //sel2 셀렉트박스 감춤

 $("select#sel1").bind("change", function () {
  switch ($("select#sel1").val()) {
   case "":
    $("select#sel2 option").remove(); //데이타 제거
    $("select#sel2").hide();
    break;
   case "1": 
    $("select#sel2 option").remove();
    getXmlData("category1.xml"); // 불러올 xml  
    selectBoxDisplay("show");  // 셀렉트박스 보이기  
    break;
   case "2":
    $("select#sel2 option").remove();
    getXmlData("category2.xml");
    selectBoxDisplay("show");
    break;
  }

 });

});

// 셀렉트 박스 보이기 , 안보이기
function selectBoxDisplay(mode) {
 if(mode == "show") {
  if($("select#sel2").css("display") == "none") {
   $("select#sel2").slideToggle("slow");
  } else {
   $("select#sel2").hide();
   $("select#sel2").slideToggle("slow");
  }
 } else {
  $("select#sel2").hide(); 
 }
}

// ajax로 xml위치를 받아 셀렉트박스에 넣어줌
function getXmlData(xmlUrl) {
 $.ajax({
  type: "get",
  dataType: "xml",
     //xml경로를 도메인등에 맞게 고쳐준다. 외부도메인은 보안상 않됨
  url: "http://localhost/test/jqueryEx/" + xmlUrl, 
  success: function(xml) {
   if($(xml).find("category").find("item").length > 0) {
    //loop
    $(xml).find("category").find("item").each(function() {
     var value = $(this).find("value").text();
     var title = $(this).find("title").text();
     $("select#sel2").append("<option value='"+value+"'>"+title+"</option>");
    });
   }   
  }, 
  error: function(xhr, status, error) {
   alert(status);
   alert(error); 
  }
 });
}
jqueryAjaxXml.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="ko" xmlns="http://www.w3.org/1999/xhtml"> 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jquery Ajax Xml 실전예제 예제</title> 
 <script type="text/javascript" 
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
 <script type="text/javascript"
 src="ajaxXml.js"></script>
 </head>
 <body>
 <form id="frm1" name="frm1">
 <select id="sel1" name="sel1">
 <option value="">카테고리 선택</option>
 <option value="1">패션</option>
 <option value="2">브랜드</option>
 </select>
 <select id="sel2" name="sel2">
 </select>
 </form>
 </body>
</html>

댓글

댓글 쓰기