jasonp跨域请求“将json包装成回调方法”答案

【问题标题】：jasonp cross domain request "wrapping json into a callback method"jasonp跨域请求“将json包装成回调方法”
【发布时间】：2012-01-18 02:46:38
【问题描述】：

我添加了 ?callback=?到带有匿名函数的 get 请求中的 url，我必须向我的服务器端代码添加什么才能使其跨域工作。

这里用getJSON对吗？

这里是一个没有 JSONP 的播放器示例 http://www.freeenergymedia.com/shared/PLAYER/player/player.php

返回 JSON 数据的 PHP 脚本

  <?php
header('Access-Control-Allow-Origin: *');
$url = 'http://www.startalkradio.net/?page_id=354';
$rss = simplexml_load_file($url);

$items = $rss->channel->item;


$i = 0;
$data = array();
foreach ($items as $item) {
    $data[] = array(
        'title' => (string) $item->title,
        'mp3'   => (string) $item->enclosure['url'],

    );
    if (++$i == 3) break;
}


$jsdata = json_encode($data);
$test = htmlspecialchars($jsdata, ENT_NOQUOTES, 'utf-8');

$jsdata = ($_GET['callback'].'('.json_encode($data).');'); 

echo $jsdata
?>

获取请求，将 JSON 加载到播放器中

   $(document).ready(function() {


    $.getJSON("http://www.freeenergymedia.com/getxml2.php?callback=?", function callback(json) 
    {

        new jPlayerPlaylist({
            jPlayer: "#jquery_jplayer_1",
            cssSelectorAncestor: "#jp_container_1"
        }, json, {
            swfPath: "js",
            supplied: "mp3, oga",
            wmode: "window"
        });
    })
});

标记

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />


<title>Demo : jPlayer as an audio playlist player</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />



</head>
<body>



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="http://www.freeenergymedia.com/shared/PLAYER/player/js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="http://www.freeenergymedia.com/shared/PLAYER/player/js/jplayer.playlist.min.js"></script>
<script type="text/javascript" src="http://www.freeenergymedia.com/shared/PLAYER/player/ajax.js"></script>
<link href="http://www.freeenergymedia.com/shared/PLAYER/player/skin/pink.flag/jplayer.pink.flag.css" rel="stylesheet" type="text/css" />

<div style="margin:0 auto; padding: 10% 0 0 0; width: 250px;">
        <div id="jquery_jplayer_1" class="jp-jplayer"></div>

        <div id="jp_container_1" class="jp-audio">
            <div class="jp-type-playlist">
            <div id="logo"><img src="http://freeenergymedia.com/startalk.png"/></div>
                <div class="jp-gui jp-interface">
                    <ul class="jp-controls">
                        <li><a href="javascript:;" class="jp-previous" tabindex="1">previous</a></li>
                        <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
                        <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
                        <li><a href="javascript:;" class="jp-next" tabindex="1">next</a></li>
                        <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
                        <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
                        <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
                        <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
                    </ul>
                    <div class="jp-progress">
                        <div class="jp-seek-bar">
                            <div class="jp-play-bar"></div>

                        </div>
                    </div>
                    <div class="jp-volume-bar">
                        <div class="jp-volume-bar-value"></div>
                    </div>
                    <div class="jp-current-time"></div>
                    <div class="jp-duration"></div>
                    <ul class="jp-toggles">
                        <li><a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle</a></li>
                        <li><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off</a></li>
                        <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
                        <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
                    </ul>
                </div>
                <div class="jp-playlist">
                    <ul>
                        <li></li>
                    </ul>
                </div>      
                <div class="jp-no-solution">
                    <span>Update Required</span>
                    To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
                </div>
            </div>
        </div>
</div>      
</div>
</body>

</html>

【问题讨论】：

标签： jquery ajax json jsonp

【解决方案1】：

您的 PHP 脚本返回的是 JSONP 而不是 JSONP。要使其跨域工作，您必须实际修改您的 PHP 以返回对回调函数的调用。

因此，您必须确保 PHP 代码以 callback(data); 的形式返回数据。

$jsdata = ($_GET['callback'].'('.json_encode($data).');');

将您的 JavaScript .getJSON() 调用更改为：

$.getJSON("http://www.freeenergymedia.com/getxml2.php?callback=?", function(json) {
  // ... rest of the code
});

jQuery 会在 URL 中插入生成的回调名称。

见documentation。

【讨论】：

什么是“生成的回调名称”是随机的吗？
是jQuery生成的随机回调，作为GET参数传递。您不需要处理任何细节 - 只需通过返回 callback(data) 确保它被“调用”，其中 callback = $_GET['callback'] 和 data 是您的 JSON 数据。
@userAgent 你从哪里得到的"","",JSONP？它们应该是getJSON 参数吗？只需使用getJSON(url, function(json) { });。见documentation。不知道那在做什么:)。
嗯，我以为我在指定 dataType 参数。猜不到。
@userAgent 1) 它在$.getJSON() 调用之外。 2) $.getJSON() 接受 2-3 个参数:)。它应该通过检查您的 callback=? 参数来检测您想要 JSONP 并自动切换到它。如果您想配置其他任何内容，请改用 $.ajax()，但您可能不这样做。