Простой пример 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 в возвращаемом результате, это тоже сработает?

Ответ 1

Когда вы используете $.getJSON во внешнем домене, он автоматически выполняет запрос JSONP, например, <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

Ответ 2

Прежде всего вы не можете сделать запрос POST с помощью JSONP.

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

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

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

Лучше всего добавить & callback =? к вам url.

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

т.

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

EDIT:

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

Заменить линию Лиама

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

 echo $_GET['callback'] . '(' . "{'fullname' : 'Jeff Hansen'}" . ')';

Ответ 3

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

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

}
?>

Ответ 4

Чтобы сервер отвечал действительным массивом 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).")";

Ответ 5

$.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) . ');';  
}

Ответ 6

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

    $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);
    }
})

Ответ 7

Простой пример 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>