ajax 크로스 도메인
방법 :
json.php 파일과 json_process.php 파일을 각각 다른 서버(서로 다른 도메인)에 업로드 시킨다.
그 후, json.php 를 실행시키고 데이터를 submit 시킨다. (그전에 빨간색 mydomain.co.kr 을 json_process.php가 올라가 있는 도메인으로 수정)
ajax 크로스 도메인 예제
json.php 파일 ===
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title>rapid-DEV.net Jquery Ajax JSON Cross Domain Example</title>
</head>
<script>
jQuery(document).ready(function(){
jQuery("#btn").click(function(){
var dataString = "Name=" + jQuery("#txtName").val() + "&Message=" + jQuery("#txtMessage").val();
var url = "http://mydomain.co.kr/json_process.php?" + dataString;
$.getJSON(url + "&jsoncallback=?", function(data){
Name = data.Name;
Message = data.Message;
if(Name != "" && Message != "")
{
jQuery("#td_msg").html("Hello " + Name + ", you typed: " + Message);
}
else
{
jQuery("#td_msg").html("Please enter Name and Message to get the result!!!");
}
})
return false;
});
});
</script>
<body>
<table cellspacing="0" cellpadding="2" border="0" width="30%" align="center">
<tbody>
<tr><td colspan="2" style="color:red" id="td_msg"></td></tr>
<tr><td colspan="2"><h3>Jquery Ajax JSON Cross Domain Example</h3></td></tr>
<tr>
<td align="left">Your name: </td>
<td align="left"><input type="text" name="txtName" id="txtName"/></td>
</tr>
<tr>
<td align="left">Type something: </td>
<td align="left"><input type="text" name="txtMessage" id="txtMessage" /></td>
</tr>
<tr>
<td></td>
<td align="left"><input type="button" id="btn" name="btn" value="Submit" /></td>
</tr>
</tbody>
</table>
</body>
</html>
json_process.php 파일 ===
<?php
header('Content-type: application/json');
$Name = $_GET["Name"];
$Message = $_GET["Message"];
$response = array(
array(
'id1' => 'id1',
'id2' => 'id2'
),
array(
'id3' => 'id3',
'id4' => 'id4'
),
array(
'id5' => 'id5',
'id6' => 'id6'
)
);
echo json_encode( $response );
?>
'jQuery' 카테고리의 다른 글
| ajax json 방식으로 호출 시 response 간단히 작성하기 (0) | 2017.08.17 |
|---|---|
| 객체 떨림 효과 (0) | 2013.11.29 |
| 제이쿼리 드롭다운 메뉴 예제 (0) | 2013.07.11 |
| jquery ui touch (0) | 2013.05.29 |
| ajax 사용하기 (xml) (0) | 2013.04.30 |