Question

我面临同源策略问题，通过研究这个主题，我发现我的特定项目的最佳方式是使用JSONP来做跨源请求。

我一直在阅读this article from IBM about JSONP，但我并不是100％清楚发生了什么。

我在这里要求的只是一个简单的jQuery＆gt; 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存储在要返回的结果中，那还可以吗？

Answer 1

当您在外部域上使用$ .getJSON时，它会自动执行JSONP请求，例如我的tweet slider here

如果查看源代码，您可以看到我使用.getJSON调用Twitter API。

所以你的例子是：这是测试和工作（您可以转到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

Answer 2

首先，您无法使用JSONP发出POST请求。

基本上发生的是动态插入脚本标记来加载数据。因此，只有GET请求是可能的。

此外，您的数据必须包含在回调函数中，该函数在请求完成后调用，以便将数据加载到变量中。

整个过程由jQuery为您自动完成。仅在外部域上使用$ .getJSON并不总是有效。我可以说出个人经历。

最好的办法是添加＆amp; callback =？你的网址。

在服务器端，您必须确保您的数据包含在此回调函数中。

即

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

编辑：

还没有足够的代表对Liam的答案发表评论，因此解决方案就在这里。

取代Liam的行

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

与

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

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

}
?>

Answer 4

要使服务器使用有效的JSON数组进行响应，请将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).")";

Answer 5

简单的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>

Answer 6

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

Answer 7

使用此..

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

现在......

使用$data['elemname']访问值。

使用JSON Object发送jsonp请求。

请求格式：

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

简单的jQuery，PHP和JSONP示例？

7 个答案: