Question

我添加了？callback =？使用匿名函数获取请求中的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>

Answer 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。

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

1 个答案: