주소 API ( juso.go.kr ) 검색창 사용...

 
/* 주소 검색 API  */
function getAddr(){
     // AJAX 주소 검색 요청
 $.ajax({
            url:"/sample/getAddrApi.do" // apiSampleJSONCotroller호출
            ,type:"post"
            ,data:$("#addrform").serialize() // 요청변수설정
            ,dataType:"json" // 데이터결과JSON
            ,success:function(jsonStr){
                 // jsonStr: 주소검색결과JSON 데이터
                 $("#list").html("");
                 var errCode= jsonStr.results.common.errorCode;
                 var errDesc= jsonStr.results.common.errorMessage;
                 if(errCode != "0" ){
                      alert(errCode+"="+errDesc);
                 }else{
                      if(jsonStr!= null){
                      makeListJson(jsonStr); // JSON데이터HTML형태로변환
                      pageMake(jsonStr);
                      }
                 }
            }
            ,error: function(xhr,status, error){
                alert("에러발생"); // AJAX 호출에러
            }
      });
}
 

    @RequestMapping(value="/sample/getAddrApi.do")
    public void getAddrApi(HttpServletRequest req, HttpServletResponse response) throws Exception{
        // 요청변수설정
        String currentPage= req.getParameter("currentPage");
        String countPerPage= req.getParameter("countPerPage");
        String resultType= req.getParameter("resultType");
        String confmKey= req.getParameter("confmKey");
        String keyword = req.getParameter("keyword2");
        // API 호출URL 정보설정
        String apiUrl= "http://www.juso.go.kr/addrlink/addrLinkApi.do?currentPage="+currentPage+
                "&countPerPage="+countPerPage+
                "&keyword="+URLEncoder.encode(keyword,"UTF-8")+
                "&confmKey="+confmKey+"&resultType="+resultType;
       
        URL url = new URL(apiUrl);
        BufferedReader br = new BufferedReader(new InputStreamReader( url.openStream(),"UTF-8"));
        StringBuffer sb = new StringBuffer();
        String tempStr = null;
           
        while(true){
            tempStr = br.readLine();
            if(tempStr == null) break;
            sb.append(tempStr); // 응답결과XML 저장
        }
        br.close();
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/xml");
        response.getWriter().write(sb.toString()); // 응답결과반환
    }
   
 

/* 주소 검색 결과 리스트 생성 */
function makeListJson(jsonStr){
     var htmlStr = "";   
     // jquery를 이용한 JSON 결과 데이터 파싱
     htmlStr += "<table >";
     htmlStr += "<tbody>";
     $(jsonStr.results.juso).each(function(){
           var temp = "'"+this.roadAddrPart1+"' , '"+this.zipNo+"'";
           htmlStr += "<tr>";
           htmlStr += "<td onclick=\"insertAddr("+temp+"); return false;\">"
                     +this.roadAddrPart1+"</td>";
           htmlStr += "</tr>";
     });
     htmlStr += "</tbody>";
     htmlStr += "</table>";
     htmlStr += "<div class='paginate' id='pageApi'></div>";
     // 결과 HTML을 FORM의 결과 출력 DIV에 삽입
     $("#list").html(htmlStr);
}    
//주소 검색 결과 리스트 페이지 이동
function goPage(pageNum){
     document.addrform.currentPage.value=pageNum;
     getAddr();
}
/* json타입으로 페이지 처리시 수정 */
function pageMake(jsonStr){
     var total = jsonStr.results.common.totalCount; // 총건수
     var pageNum = document.addrform.currentPage.value;// 현재페이지
     var paggingStr = "";
     if(total < 1){
     }else{
           var PAGEBLOCK=document.addrform.countPerPage.value;;
           var pageSize=document.addrform.countPerPage.value;;
           var totalPages = Math.floor((total-1)/pageSize) + 1;
           var firstPage = Math.floor((pageNum-1)/PAGEBLOCK) * PAGEBLOCK + 1;       
           if( firstPage <= 0 ) firstPage = 1;        
           var lastPage = firstPage-1 + PAGEBLOCK;
           if( lastPage > totalPages ) lastPage = totalPages;           
           var nextPage = lastPage+1 ;
           var prePage = firstPage-5 ;          
           for( i=firstPage; i<=lastPage; i++ ){
                if( pageNum == i )
                     paggingStr += "<a style='font-weight:bold;color:green;font-size:100%;' href='javascript:goPage("+i+");'>" + i + "</a>  ";
                else
                     paggingStr += "<a href='javascript:goPage("+i+");'>" + i + "</a>  ";
           }          
           $("#pageApi").html(paggingStr);
     }    
}
 
/* 검색된 주소값 input 태그에 넣어주기 */
function insertAddr(roadAddrPart1, zipNo) {
     console.log("roadAddrPart1>>"+roadAddrPart1);
     console.log("zipNo        >>"+zipNo);
      $('#coAddr1').val(roadAddrPart1);
      $('#coZipcode').val(zipNo);
}
/* 주소검색창 form 값 넘겨주기 */
function paramSet(){
     $("input[name='keyword2']").val($("input[name='keyword']").val());
}
 
 

작성중인 페이지에는 form 태그가 이미 있어서 아래 paramSet이라는 function을 통해서

검색값을 넘겨 주었다.

<tr>
                                <th scope="row">사업자우편번호</th>
                                <td colspan="2">
                                     <input type="text" class="inp_txt w60p"  name="keyword" value="" onchange="paramSet();" onkeydown="enterSearch();"/>
                                     <div class="btn-pack gray" onClick="getAddr();  return false;" >검색</div>
 
                                     <input type="text" class="inp_txt w60p" name="coZipcode" id="coZipcode" />
                                     <!-- <div class="btn-pack gray" onClick="goPopup(); return false;" >검색</div> -->
                                </td>
                           </tr>
                           <tr>
                                <th scope="row">리스트</th>
                                <td colspan="2" id="list" ></td>
                           </tr>
                           <tr>
                                <th scope="row">사업자주소</th>
                                <td colspan="2"><input type="text" class="inp_txt w100p"
                                     name="coAddr1" id="coAddr1"></td>
                           </tr>
 

위와 같은 창에서 검색을 하고.....

검색값을 다시 다른 form 태그로 넘겨준다.....

<form name="addrform" id="addrform" method="post">
       <input type="hidden" name="currentPage" value="1"/>      <!-- 요청 변수 설정 (현재 페이지) -->
       <input type="hidden" name="countPerPage" value="10"/>   <!-- 요청 변수 설정 (페이지당 출력 개수) -->
       <input type="hidden" name="resultType" value="json"/>   <!-- 요청 변수 설정 (검색결과형식 설정, json) -->
       <input type="hidden" name="confmKey" value="키키키ㅣ키키키"/>     <!-- 요청 변수 설정 (승인키) -->
       <input type="hidden" name="keyword2" value=""/>    <!-- 요청 변수 설정 (키워드) -->
                
</form>
 
그리고 아래 있는 폼태그에 API 키를 적어 넣는다.... 저건 내거..

사실 중간에 페이지네이션이 딱히 필요가 없어서....

양 옆의 꺽쇠를 제거 했지만....

있는 소스를 그대로 엎어쳐도.... 그부분이 오류가 났다.