도로명주소 API는 기본적으로 JSP, ASP, PHP 언어를 제공한다.
나는 현재 프로젝트에서 Thymeleaf를 사용하고 있는데 도로명주소 API에서 제공하고있는 가이드의
주소를 검색하고 입력할때 넘겨지는 이 값을 처리하는 부분
jsp로 했을 경우엔 request 값으로 받을 수 있지만 thymeleaf는 html 기반이기 때문에 받을수가 없다 ㅠㅠ
그래서 생각한 방법은 jsp로 callback이 아닌 java를 호출해서 데이터를 전달하는 방법!!
1. 우선 도로명 주소 popup을 호출
function openPopup() {
window.open("/tp/popup/jusoPopup.html", "pop", "width=570,height=420, scrollbars=yes, resizable=yes");
}2. juso popup html 파일은 이렇게 작성
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<script src="/static/common/js/GlobalUrl.js"></script>
<script>
function init(){
var url = domain + "/common/jusoPopup"; // 로컬용 이 url이 도로명주소 입력 후 호출될 주소
var confmKey = [API 키]; // 연계신청시 부여받은 승인키 입력(테스트용 승인키 : TESTJUSOGOKR)
var resultType = "4"; // 도로명주소 검색결과 화면 출력유형,
// 1 : 도로명, 2 : 도로명+지번+상세보기(관련지번, 관할주민센터), 3 : 도로명+상세보기(상세건물명), 4 : 도로명+지번+상세보기(관련지번, 관할주민센터, 상세건물명)
// inputYn 값으로 입력 화면 호출인지 입력 후 callback 실행인지 구분하는 값
var inputYn= $("input[name=inputYn]").val();
if(inputYn != "Y"){
document.form.confmKey.value = confmKey;
document.form.returnUrl.value = url;
document.form.resultType.value = resultType;
document.form.action="https://www.juso.go.kr/addrlink/addrLinkUrl.do"; //인터넷망(행정망의 경우 별도 문의)
//** 2017년 5월 모바일용 팝업 API 기능 추가제공 **/
//document.form.action="https://www.juso.go.kr/addrlink/addrMobileLinkUrl.do"; //모바일 웹인 경우, 인터넷망
document.form.submit();
}else{
opener.jusoCallBack($("input[name=zipNo]").val(),$("input[name=roadAddrPart1]").val(),$("input[name=roadAddrPart2]").val(),$("input[name=jibunAddr]").val(),$("input[name=addrDetail]").val());
window.close();
}
}
</script>
<title>택배 조회</title>
<body onload="init();">
<form id="form" name="form" method="post">
<input type="hidden" id="confmKey" name="confmKey" value=""/>
<input type="hidden" id="returnUrl" name="returnUrl" value=""/>
<input type="hidden" id="resultType" name="resultType" value=""/>
<!--/*@thymesVar id="inputYn" type=""*/-->
<input type="hidden" id="inputYn" name="inputYn" th:value="${inputYn}" />
<!--/*@thymesVar id="zipNo" type=""*/-->
<input type="hidden" id="zipNo" name="zipNo" th:value="${zipNo}" />
<!--/*@thymesVar id="roadAddrPart1" type=""*/-->
<input type="hidden" id="roadAddrPart1" name="roadAddrPart1" th:value="${roadAddrPart1}" />
<!--/*@thymesVar id="roadAddrPart2" type=""*/-->
<input type="hidden" id="roadAddrPart2" name="roadAddrPart2" th:value="${roadAddrPart2}" />
<!--/*@thymesVar id="jibunAddr" type=""*/-->
<input type="hidden" id="jibunAddr" name="jibunAddr" th:value="${jibunAddr}" />
<!--/*@thymesVar id="addrDetail" type=""*/-->
<input type="hidden" id="addrDetail" name="addrDetail" th:value="${addrDetail}" />
<!-- <!– <input type="hidden" id="encodingType" name="encodingType" value="EUC-KR"/> –>-->
</form>
</body>
</html>처음엔 body load 되고 init 부분의 api 키와 callback url등 파라미터값을 전달하여 주소를 검색하고, 입력 후 callback 함수를 실행하게 된다.
3. juso 값을 전달받아 thymeleaf VIew에 전달할 controller 작업
@RequestMapping(value = "/jusoPopup", method = RequestMethod.POST)
public ModelAndView jusoPopup(HttpServletRequest request, @RequestParam HashMap<String, String> p, Locale locale) {
// callback 함수가 실행되어야하니 호출한 html 파일로 return
ModelAndView mav = new ModelAndView("popup/jusoPopup.html");
String inputYn = request.getParameter("inputYn");
String zipNo = request.getParameter("zipNo");
String roadAddrPart1 = request.getParameter("roadAddrPart1");
String roadAddrPart2 = request.getParameter("roadAddrPart2");
String addrDetail = request.getParameter("addrDetail");
String jibunAddr = request.getParameter("jibunAddr");
mav.addObject("inputYn", inputYn);
mav.addObject("zipNo", zipNo);
mav.addObject("roadAddrPart1", roadAddrPart1);
mav.addObject("roadAddrPart2", roadAddrPart2);
mav.addObject("jibunAddr", jibunAddr);
mav.addObject("addrDetail", addrDetail);
return mav;
}파라미터를 전달한다. 이 부분이 jsp에서 실행하지만 thymeleaf를 사용하기 때문에 이렇게 구성
값을 넘겨주면 2번의 html input 값에 값이 들어가고 그 값을 jusoCallback 함수를 통해 전달한다.
4. 마지막으로 callback 함수로 받은 값을 보여줄 화면에 넣어주면 끝
function jusoCallBack(zipNo, roadAddrPart1, roadAddrPart2, jibunAddr, addrDetail){
$("#tp_address_add_zip_code").val(zipNo);
$("#tp_address_add_road_address").val(roadAddrPart1);
$("#tp_address_add_number_address").val(jibunAddr);
$("#tp_address_add_desc_address").val(roadAddrPart2 + " " + addrDetail);
}
도로명주소를 thymeleaf를 사용해서 구성 완료!
'API, etc' 카테고리의 다른 글
| 금융결제원 오픈API 실계좌 인증 (0) | 2021.07.28 |
|---|---|
| 금융결제원 오픈API token 발급 (0) | 2021.07.28 |
| 금융결제원 오픈API 사용자 인증 (0) | 2021.07.28 |
