간단한 jQuery, PHP 및 JSONP 예제?
나는 동일 출처 정책 문제에 직면하고 있으며 주제를 조사한 결과 내 특정 프로젝트에 대한 가장 좋은 방법은 JSONP를 사용하여 출처 간 요청을 수행하는 것임을 알았습니다.
저는 IBM에서 JSONP 에 관한이 기사를 읽었 지만 무슨 일이 일어나고 있는지 100 % 명확하지 않습니다.
내가 여기서 요청하는 것은 단순한 jQuery> PHP JSONP 요청 (또는 용어가 무엇이든;))-이와 같은 것 (분명히 부정확하며, 내가 달성하려는 것에 대한 아이디어를 얻을 수 있도록 :)) :
jQuery :
$.post('http://MySite.com/MyHandler.php',{firstname:'Jeff'},function(res){
alert('Your name is '+res);
});
PHP :
<?php
$fname = $_POST['firstname'];
if($fname=='Jeff')
{
echo 'Jeff Hansen';
}
?>
이것을 적절한 JSONP 요청으로 변환하는 방법은 무엇입니까? 반환되는 결과에 HTML을 저장하면 그 역시 작동할까요?
외부 도메인에서 $ .getJSON을 사용하면 자동으로 JSONP 요청을 처리합니다 (예 : 여기 내 트윗 슬라이더).
소스 코드를 보면 .getJSON을 사용하여 Twitter API를 호출하고 있음을 알 수 있습니다.
따라서 귀하의 예는 다음과 같습니다. THIS IS TESTED AND WORKS ( http://smallcoders.com/javascriptdevenvironment.html 로 이동하여 실제로 확인하십시오)
//JAVASCRIPT
$.getJSON('http://www.write-about-property.com/jsonp.php?callback=?','firstname=Jeff',function(res){
alert('Your name is '+res.fullname);
});
//SERVER SIDE
<?php
$fname = $_GET['firstname'];
if($fname=='Jeff')
{
//header("Content-Type: application/json");
echo $_GET['callback'] . '(' . "{'fullname' : 'Jeff Hansen'}" . ')';
}
?>
? 콜백 =? 및 + res.fullname
우선 JSONP를 사용하여 POST 요청을 할 수 없습니다.
기본적으로 발생하는 것은 데이터를로드하기 위해 동적으로 스크립트 태그가 삽입된다는 것입니다. 따라서 GET 요청 만 가능합니다.
또한 데이터를 변수에로드하기 위해 요청이 완료된 후 호출되는 콜백 함수로 데이터를 래핑해야합니다.
이 전체 프로세스는 jQuery에 의해 자동화됩니다. 하지만 외부 도메인에서 $ .getJSON을 사용하는 것이 항상 작동하는 것은 아닙니다. 나는 개인적인 경험으로 말할 수 있습니다.
가장 좋은 방법은 & callback =?을 추가하는 것입니다. 당신에게 URL.
서버 측에서는 데이터가이 콜백 함수에 래핑되어 있는지 확인해야합니다.
즉.
echo $_GET['callback'] . '(' . $data . ')';
편집하다:
Liam의 답변에 대해 아직 충분한 담당자가 없으므로 여기에 해결책이 있습니다.
Liam의 라인 교체
echo "{'fullname' : 'Jeff Hansen'}";
와
echo $_GET['callback'] . '(' . "{'fullname' : 'Jeff Hansen'}" . ')';
더 많은 제안
자바 스크립트 :
$.ajax({
url: "http://FullUrl",
dataType: 'jsonp',
success: function (data) {
//Data from the server in the in the variable "data"
//In the form of an array
}
});
PHP 콜백 :
<?php
$array = array(
'0' => array('fullName' => 'Meni Samet', 'fullAdress' => 'New York, NY'),
'1' => array('fullName' => 'Test 2', 'fullAdress' => 'Paris'),
);
if(isset ($_GET['callback']))
{
header("Content-Type: application/json");
echo $_GET['callback']."(".json_encode($array).")";
}
?>
서버가 유효한 JSONP 배열로 응답하도록하려면 JSON을 대괄호 ()
로 묶고 다음을 앞에 추가합니다 callback
.
echo $_GET['callback']."([{'fullname' : 'Jeff Hansen'}])";
json_encode () 를 사용하면 네이티브 PHP 배열이 JSON으로 변환됩니다.
$array = array(
'fullname' => 'Jeff Hansen',
'address' => 'somewhere no.3'
);
echo $_GET['callback']."(".json_encode($array).")";
간단한 jQuery, PHP 및 JSONP 예제는 다음과 같습니다.
window.onload = function(){
$.ajax({
cache: false,
url: "https://jsonplaceholder.typicode.com/users/2",
dataType: 'jsonp',
type: 'GET',
success: function(data){
console.log('data', data)
},
error: function(data){
console.log(data);
}
});
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$.ajax({
type: "GET",
url: '<?php echo Base_url("user/your function");?>',
data: {name: mail},
dataType: "jsonp",
jsonp: 'callback',
jsonpCallback: 'chekEmailTaken',
success: function(msg){
}
});
return true;
컨트롤러에서 :
public function ajax_checkjp(){
$checkType = $_GET['name'];
echo $_GET['callback']. '(' . json_encode($result) . ');';
}
이 .. 사용
$str = rawurldecode($_SERVER['REQUEST_URI']);
$arr = explode("{",$str);
$arr1 = explode("}", $arr[1]);
$jsS = '{'.$arr1[0].'}';
$data = json_decode($jsS,true);
지금 ..
사용 $data['elemname']
값에 액세스 할 수 있습니다.
send jsonp request with JSON Object.
Request format :
$.ajax({
method : 'POST',
url : 'xxx.com',
data : JSONDataObj, //Use JSON.stringfy before sending data
dataType: 'jsonp',
contentType: 'application/json; charset=utf-8',
success : function(response){
console.log(response);
}
})
ReferenceURL : https://stackoverflow.com/questions/6809053/simple-jquery-php-and-jsonp-example
'programing' 카테고리의 다른 글
Android-표시된 모든 토스트 메시지 숨기기 (0) | 2021.01.17 |
---|---|
Android에서 Serializable을 사용하고 있습니까? (0) | 2021.01.17 |
http://download.eclipse.org/releases/indigo에서 저장소를 읽을 수 없습니다. (0) | 2021.01.17 |
새 라인 / 캐리지 리턴을 element.textContent에 삽입하려면 어떻게해야합니까? (0) | 2021.01.17 |
문자열의 문자가 숫자인지 문자인지 확인하는 방법 (0) | 2021.01.17 |