만약 외부에서 AJAX 로 하여서 JSON 으로 값을 받아간다고 하였을때에.. 로컬에서는 되지만 외부에서는 않되는 경우가 있는데.. 이는 바로 크로스 도메인 문제 때문입니다. 즉 연결하려면 파일의 이름이 다른 도메인 영역대에 있기 때문입니다. 이는 데이터를 SEND 하는 곳이 아닌 데이터 값을 RESPONSE(응답)해주는 곳에서 처리를 해야합니다. 즉 외부의 사이트에서 도메인이 다른 특정 파일에 값을 요청한다고 했을때에는.. 해당 요청되어지는 파일에 아래와 같은 해더의 선언이 필요합니다.
header('Access-Control-Allow-Origin: *'); |
아래의 예제 코드와 같이 php 파일 상단에 써주면 됩니다. 그리고 php 함수에서 매개변수를 하나만 주었는데.. 외부에 선언된 변수값에 접근하고 싶다고 한다면 어떻게 해야할까요? 물론 그냥 매개변수를 하나 더 추가하여 할 수도 있습니다. 그러나 이러한 방법은 프로그램 코딩 작업시에 매개변수를 자주 변경해야하는 경우가 생길 수가 있습니다. 그래서 함수 내에서도 외부 변수의 값을 참고하는 방법에 대해 알아보고자 합니다.
<?php
header('Access-Control-Allow-Origin: *');
$productList=array();
function check($product){
$today = date("Y-m-d", time());
if(isset($product['dueDate']) && $product['dueDate']){
if($today <= $product['dueDate']){
array_push($GLOBALS['productList'], $product);
}
}else{
array_push($GLOBALS['productList'], $product);
}
}
$product=array("name"=>"상품이름", "image"=>"이미지", "link"=>"링크주소", "price"=>"가격", "dueDate"=>"2018-10-16");
check($product);
$result=array();
$result["succeeded"]="true";
$result["data"]=$productList;
echo json_encode($result);
?>
위의 예제코드를 보면 productList 라는 이름의 배열을 선언하였습니다. 그리고 check 라는 함수를 만들었습니다. 그리고 매개변수로 product 라는 배열값을 받는데.. 이 배열에는 제품 하나의 이름, 이미지, 링크, 가격, 날짜제한(dueDate) 정보가 담겨져 있습니다. 물론 여기서는 dueDate 는 옵션으로 하였습니다. 모든 제품에 기한이 있는것은 아니기 때문입니다.
제품 정보 하나를 선언하고 그 정보를 check 함수에 매개변수로 넣었다면.. 해당 check 함수에서는 오늘날짜의 정보를 우선 가져온다. 그리고 product 에 dueDate 가 선언이 되었는지 그리고 그 값이 있는지 체크하게 된다. 그리고 나서 값이 있다면 오늘날짜와 비교를 하여 날짜가 지나지 않았다면 productList 를 전역변수로 접근하여 해당 배열에 추가해 준다. 여기서 전역변수로 접근하려면 $GLOBALS 을 선언하고 그 안에 해당 변수의 이름을 지정하면 됩니다. 이렇게 check 라는 함수로 구연한 이유는 due date 를 확인해서 날짜가 않되었다면 자동으로 리스트에 추가하도록 하기 위함입니다.
최종적으로 결과값으로 저장할 배열의 이름을 result 를 선언하고 json_encode 함수로 변환하여 echo 를 해주면 됩니다.
이렇게 되면 외부에서 접속할때는 JSON 형태로 값이 보이게 됩니다.
아래의 코드는 외부에서 제품의 정보를 받아와서 처리하는 부분입니다. 코드의 내용을 보면 hotdeal.php 파일에 접속을 해서 데이터를 가져오는데요. 여기의 url 은 도메인이 다른 원격에서 사용하신다면 http 로 시작하여 풀 URL 주소를 넣어서 수정을 해주셔야 합니다. 데이터는 mode 값이 list 로 post 형태로 전송이 되지만 사용은 않하니까 패스 하시구요(물론 사용하셔도 됩니다). dataType 이 json 으로 선언되이 있는것을 보실 수가 있습니다. 그리고 받아진 데이터는 response.data 으로 받아서 처리하였습니다.
<script>
$(document).ready(function(){
$.ajax({
url: "./hotdeal.php",
type: "post",
data: { "mode":"list",
},
dataType: "json",
success: function(response) {
if (response.succeeded == "false") {
alert(response.message);
}else{
var htmlStr="";
var data = response.data;
for(var i=0; i<data.length; i++){
//alert(data[i].name);
htmlStr+="<div class=\"col-12 col-sm-6 col-md-4 col-lg-3 center\">";
htmlStr+="<div class=\"product\">";
htmlStr+="<a href=\""+data[i].link+"\" target=\"_blank\"><img src=\""+data[i].image+"\">";
htmlStr+="<div class=\"title\">"+data[i].name+"</div>";
htmlStr+="<div class=\"price\">"+data[i].price+"</div></a>";
htmlStr+="</div>";
htmlStr+="</div>";
}
$('#productList').html(htmlStr);
}
},
error: function(jqXHR, textStatus, errorThrown) {
/*
alert("오류가 발생했습니다.\n" +
"상태: " + textStatus + "\n" +
"설명: " + errorThrown);
*/
}
});
});
</script>
위의 내용이 좀 텍스트로 보기에는 좀 어려우실 수도 있는데요. 그래서 소스코드를 파일로 첨부하였습니다.
hotdeal.html
hotdeal.php