简单的 jQuery、PHP 和 JSONP 示例？

Posted 2023-02-24

【中文标题】简单的 jQuery、PHP 和 JSONP 示例？

【英文标题】：Simple jQuery, PHP and JSONP example?

【发布时间】：2011-10-12 03:36:18

【问题描述】：

我正面临同源策略问题，通过研究该主题，我发现我的特定项目的最佳方法是使用 JSONP 进行跨域请求。

我一直在阅读 this article from IBM about 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 请求，例如我的 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

【讨论】：

那么故事的服务器端部分呢？ :)

所以不需要做 res.fullname 吗？ :)

在您修改了第一条评论后，我发现了这一点

Firebug 报告“无效标签：'firstname':'Jeff'”，然后 uuhm.. 它不工作，什么都没有发生

未经清理，切勿回显用户提供的参数！

【参考方案2】：

首先，您不能使用 JSONP 发出 POST 请求。

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

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

整个过程由 jQuery 为您自动完成。只是在外部域上使用 $.getJSON 并不总是有效。我可以根据个人经验判断。

最好的办法是添加 &callback=?给你的网址。

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

即。

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

编辑：

还没有足够的代表来评论 Liam 的回答，所以这里的解决方案。

替换利亚姆的线路

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

与

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

【讨论】：

我在最后一部分窒息 - 你为什么要做'('.$data...？

正如我所说，您的数据必须包装到 Javascript 函数中。利亚姆的例子行不通。实际的响应应该是这样的：callbackFunction("fullname": "Jeff Hansen")

对不起，你错了，是的，你需要 ?callback= 在 url 上，但如果你只是做 ?callback=?您可以在第二个参数中以 JSON 格式发送数据。我知道，因为我已经做到了。

可以发送，但是不加包装回调函数是收不到的。编辑：您说的是 jQuery 中的客户端，但我说的是 PHP 中需要调整的服务器端。

你说得对，我很抱歉。我已将代码更改为花括号，但没有将文件添加到服务器。括号有效，花括号无效。答案已更新。

【参考方案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 回调：

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

【讨论】：

问题是关于JSONP，它要求服务器的响应用客户端回调和括号括起来，例如callback123([a:1])

【参考方案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>

【参考方案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) . ');';  

【参考方案7】：

使用这个..

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

现在..

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

使用 JSON 对象发送 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);
    
)