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 부분은 따로 구현하시면 됩니다.
'SW이야기' 카테고리의 다른 글
| 아크로에디터 더블클릭 단어선택 설정 (0) | 2019.09.06 |
|---|---|
| 주소DB Select Option 가져오는 jQuery 예제 (0) | 2019.06.27 |
| [윈도우10] 모니터 확장 무선 모바일 모니터 (1) | 2019.06.19 |
| [윈도우] USB 메모리 SLC MLC TLC 종류 확인 유틸 (0) | 2019.05.30 |
| 하드디스크 검사 유틸 GM HDD SCAN (0) | 2018.11.01 |
| 네트워크 드라이브 유틸 RaiDrive (0) | 2018.09.07 |
iVPS 영은파더♥
가상서버호스팅 VPS 리눅스 서버관리 윈도우 IT
댓글을 달아 주세요