jQuery AJAX 로 시도, 시군구, 읍면동 동적으로 데이터를 가져오는 샘플입니다.
타 도메인의 데이터를 가져오는 예제입니다.
<!doctype html>
<html lang="ko">
<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="Cache-Control" content="no-cache"/> <meta http-equiv="Expires" content="0"/> <meta http-equiv="Pragma" content="no-cache"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> var curLevel = 0; $(document).ready(function(){ getLocation(0); }); function myPOST(v) { var arr = v; if(curLevel == 0) { for(var i=0; i<arr.length; i++) { $('#sido').append('<option value="' + arr[i].sido + '">' + arr[i].sido + '</option>'); } } else if(curLevel == 1) { for(var i=0; i<arr.length; i++) { $('#sigungu').append('<option value="' + arr[i].sigungu + '">' + arr[i].sigungu + '</option>'); } } else if(curLevel == 2) { for(var i=0; i<arr.length; i++) { $('#dong').append('<option value="' + arr[i].dong + '">' + arr[i].dong + '</option>'); } } else { } } function getLocation(v) { curLevel = v; if(v == 0) { $('#sido').empty().append('<option value="">시도 선택</option>'); } else if(v == 1) { $('#sigungu').empty().append('<option value="">구군 선택</option>'); $('#dong').empty().append('<option value="">읍면동 선택</option>'); } else if(v == 2) { $('#dong').empty().append('<option value="">읍면동 선택</option>'); } else { } var sido = $('#sido').val(); var sigungu = $('#sigungu').val(); var request = $.ajax({ type: 'POST', data: {mdiv:'json',sido:sido,sigungu:sigungu}, url: 'https://www.ivps.kr/zipcode/zipcode.php', dataType: "jsonp", jsonpCallback: "myPOST", success:function(result){ //console.log('ret : ' + result); }, error:function(xhr, status, error){ console.log('status : ' + xhr.status); } }); } </script>
</head>
<body> <form name="postForm" method="get" action="" onsubmit="return false;"> <div style="float:left;width:200px;height:45px;"> <select name="sido" id="sido" style="width:150px;" onchange="getLocation(1);"> <option value="">시도 선택</option> </select> </div> <div style="float:left;width:200px;height:45px;"> <select name="sigungu" id="sigungu" style="width:150px;" onchange="getLocation(2);"> <option value="">구군 선택</option> </select> </div> <div style="float:left;width:200px;height:45px;"> <select name="dong" id="dong" style="width:150px;" onchange="getLocation(3);"> <option value="">읍면동 선택</option> </select> </div> </form>
</body>
</html>
PHP 부분은 아래와 같습니다.
<?php include "./mysql.php"; header('Content-Type: text/html; charset=UTF-8'); $callback = $_REQUEST['callback']; $mdiv = $_REQUEST['mdiv']; $sido = $_REQUEST['sido']; $sigungu = $_REQUEST['sigungu']; $dong = $_REQUEST['dong']; if($mdiv == 'json') { if($sido && $sigungu) { $sql = "select if(dong='',eupmyun,dong) dong from zip_tmp where sido like '$sido' and sigungu like '$sigungu' group by dong, eupmyun order by dong asc"; $datas = DBQueryArray($sql); } else if($sido) { $sql = "select sigungu from zip_tmp where sido like '$sido' group by sigungu order by sigungu asc"; $datas = DBQueryArray($sql); } else { $sql = "select sido from zip_tmp group by sido order by sido asc"; $datas = DBQueryArray($sql); } $json_str = json_encode($datas); echo $callback."(".$json_str.")"; } else { }
?>
DBQueryArray 부분은 따로 구현하시면 됩니다.
이 글은 ivps.tistory.com 에서 RSS로 가져온 글입니다. 원본보기