programing

간단한 jQuery, PHP 및 JSONP 예제?

goodcopy 2021. 1. 17. 11:55
반응형

간단한 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

반응형