Простой пример jQuery, PHP и JSONP? - PullRequest
53 голосов
/ 24 июля 2011

Я сталкиваюсь с проблемой политики того же происхождения, и, исследуя эту тему, я обнаружил, что лучший способ для моего конкретного проекта - использовать 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 в результате, который должен быть возвращен, это тоже сработало бы?

Ответы [ 7 ]

89 голосов
/ 24 июля 2011

Когда вы используете $ .getJSON на внешнем домене, он автоматически выполняет запрос JSONP, например, мой ползунок твита здесь

Если вы посмотрите на исходный код, то увидите, что я звоню в Twitter API с помощью .getJSON.

Итак, ваш пример: ЭТО ИСПЫТАНО И РАБОТАЕТ (Вы можете перейти на 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'}" . ')';

      }
?>

Обратите внимание на? Callback =? и + res.fullname

19 голосов
/ 24 июля 2011

Прежде всего, вы не можете сделать запрос POST, используя JSONP.

В основном происходит то, что динамически вставляется тег сценария для загрузки ваших данных.Поэтому возможны только запросы GET.

Кроме того, ваши данные должны быть обернуты в функцию обратного вызова, которая вызывается после завершения запроса для загрузки данных в переменную.

Весь этот процессавтоматизирован JQuery для вас.Просто использование $ .getJSON во внешнем домене не всегда работает.Я могу судить по личному опыту.

Лучшее, что можно сделать, это добавить & callback =?url.

На стороне сервера вы должны убедиться, что ваши данные обернуты в эту функцию обратного вызова.

т.е..

echo $_GET['callback'] . '(' . $data . ')';

РЕДАКТИРОВАТЬ:

У вас еще недостаточно представителей, чтобы комментировать ответ Лиама, поэтому решение здесь.

Замените строку Лиама

 echo "{'fullname' : 'Jeff Hansen'}";

на

 echo $_GET['callback'] . '(' . "{'fullname' : 'Jeff Hansen'}" . ')';
15 голосов
/ 12 марта 2014

Больше предложений

JavaScript:

$.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 CallBack:

<?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).")";

}
?>
7 голосов
/ 24 июля 2011

Чтобы сервер отвечал допустимым массивом 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).")";
2 голосов
/ 28 мая 2018

Простой пример 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>
0 голосов
/ 09 декабря 2016

Используйте это ..

    $str = rawurldecode($_SERVER['REQUEST_URI']);
    $arr = explode("{",$str);
    $arr1 = explode("}", $arr[1]);
    $jsS = '{'.$arr1[0].'}';
    $data = json_decode($jsS,true);

Сейчас ..

используйте $data['elemname'] для доступа к значениям.

отправить запрос jsonp с помощью объекта JSON.

Формат запроса:

$.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);
    }
}) 
0 голосов
/ 02 сентября 2014
$.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) . ');';  
}
...