[본문스크랩] [Ajax] ASP와 연동하여 우편번호 검색하기

 

우편번호 테이블 설계화면입니다.

   

                                       

zip_search.asp 파일 실행시 초기화면입니다. 기본적으로 [시도선택]콤보박스는 최초 페이지가 읽혀질 때 우편번호 테이블에서 읽어옵니다. [구군선택]콤보박스는 초기에는 아무 내용도 없지만, [시도선택]콤보박스에서 원하는 시도를 선택하면  Ajax를 이용하여 해당 구군을 표시하게 됩니다.

   

 

초기에는 구군콤보박스에 아무 내용도 들어있지 않습니다.

   

 

시도를 선택하고 난 이후의 구군콤보박스의 모습입니다. Ajax를 이용하여 비동기식으로 원하는 자료를 테이블에서 쿼리한 결과입니다.

   

원하는 동을 입력한 후 검색을 하면 역시 Ajax를 이용하여 검색된 결과를 표시하도록 하였습니다. 아래 소스를 통해서 자세히 알아보도록 하겠습니다.

 

 

<!--  Zip_Search.asp -->
<!--#include file="dbcon.inc"-->
<%
     response.charset = "euc-kr"

     set rs = server.CreateObject("adodb.recordset")
     sql = "select distinct sido from tb_zip order by sido "
     rs.open sql, db, 1
%>

<script>
 var ajax_gugun;

 function get_gugun_list(sido)
 {  
      ajax_gugun = new ActiveXObject("Microsoft.XMLHTTP");
      ajax_gugun.onreadystatechange = get_gugun_list_callback;
      ajax_gugun.open("GET", "Zip_GugunList.asp?sido=" + sido, true);

      ajax_gugun.send();
 }

 

 function get_gugun_list_callback()
 {
      if(ajax_gugun.readyState == 4){   
           if(ajax_gugun.status == 200){
                if(typeof(document.all.div_gugun) == "object"){
                    document.all.div_gugun.innerHTML = ajax_gugun.responseText;
                }
           }
      }
 }

 

 var ajax_addr;
 function get_addr_list(){
      var sido, gugun, dong;

      sido = document.frmZip.sido.value;
      gugun = document.frmZip.gugun.value;
      dong = document.frmZip.dong.value;

      if (dong.length < 2)            return false;
    

      ajax_addr = new ActiveXObject("Microsoft.XMLHTTP");

      ajax_addr.onreadystatechange = get_addr_list_callback;
      ajax_addr.open("GET", "Zip_AddrList.asp?sido=" + sido + "&gugun=" + gugun + "&dong=" + dong, true);     

      ajax_addr.send();
 }

 

 function get_addr_list_callback()
 {
      if(ajax_addr.readyState == 4){
          if(ajax_addr.status == 200){
              if(typeof(document.all.div_zip_list) == "object"){
                    if(ajax_addr.responseText.length > 0){
                         document.all.div_zip_list.style.display = "";
                         document.all.div_zip_list.innerHTML = ajax_addr.responseText;
                    }
                   else
                         document.all.div_zip_list.style.display = "none";     
               }
          }
     }
 }

</script>

 

<style>
      input, select, td {  font-family:tahoma;font-size:9pt; }
</style>

 

<table border="0" cellpadding="4" cellspacing="0" width="400">
<form name="frmZip">
 <tr>
  <td>
   <select name="sido" onChange="get_gugun_list(this.value);">
       <option value="">시도선택</option>
    <% Do Until rs.eof %>
          <option value="<%=rs("sido")%>" ><%=rs("sido")%></option>
    <%
               rs.movenext
          Loop

          rs.close
          Set rs = Nothing
    %>
   </select>
  </td>
  <td>
   <div id="div_gugun">

       <select name="gugun" >   
             <option value="">구/군선택</option>    
       </select>

   </div>
  </td>
  <td>
     동이름 : <input type="text" name="dong" style="width:50">
     <input type="button" value="검색" onClick="get_addr_list();" style="width:40;border-style:solid;border-width:1">
  </td>
 </tr>
 <tr>
  <td colspan="3" align="center">
       동이름을 입력하시오(2글자 이상)<br>
       (예 : 논현, 구의1동, .. )
  </td>
 </tr>
</form>
</table>

 

<div id="div_zip_list" style="display:none;overflow-y:scroll; height:300;width:400"></div>
 

 

<!--  Zip_GugunList.asp -->
<!-- #include file="dbcon.inc"-->

<%
     response.charset = "euc-kr"

     sido = request("sido")
 
     sql = "select distinct gugun from tb_zip where sido = '" & sido & "'   order by gugun"
     Set rs = server.CreateObject("adodb.recordset")
     rs.open sql, db, 1
%>

 <select name="gugun" >   
      <option value="">구/군선택</option>  

<% Do Until rs.eof  %>
      <option value="<%=rs("gugun")%>" ><%=rs("gugun")%></option>
<%
          rs.movenext
      Loop

      rs.close
      Set rs = Nothing
%>

 </select>

 

 

<!--  Zip_AddrList.asp -->
<!--#include file="dbcon.inc"-->
<%
     response.charset = "euc-kr"

     sido = request("sido")
     gugun = request("gugun")
     dong = request("dong")

     If sido = "" And gugun = "" Then
          sql = "select zipcode, sido, gugun, dong, ri, build, addr from tb_zip where dong like '%" & dong & "%'"
     ElseIf sido <> "" And gugun = "" Then
          sql = "select zipcode, sido, gugun, dong, ri, build,  addr from tb_zip where sido = '" & sido & "' and dong like '%" & dong & "%'" 
     ElseIf sido <> "" And gugun <> "" Then
          sql = "select zipcode, sido, gugun, dong, ri, build,  addr from tb_zip where sido = '" & sido & "' and gugun = '" & gugun & "' and dong like '%" & dong & "%'" 
     End If

 

     Set rs = server.CreateObject("adodb.recordset")
     rs.open sql, db, 1
%>

 

<table cellpadding="3" cellspacing="3" border="1" width="400">
<%
     Do Until rs.eof
         zip = "[" & Left(rs("zipcode"), 3) & "-" & Right(rs("zipcode"), 3) & "]"
%>
   <tr>
     <td>
         <a href="#"><%=zip%> </a>
    </td>
    <td>
         <%=rs("addr")%>
    </td>
   </tr>
<%  
       rs.movenext
    Loop
%>
</table>