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 영은파더♥

가상서버호스팅 VPS 리눅스 서버관리 윈도우 IT

댓글을 달아 주세요