jasonp cross domain request “wrapping json into a callback method”

问题

I added ?callback=? to the url in the get request with an anonymous function, what do I have to add to my server side code to make it work cross domain.

Is it right to use getJSON here?

here is an example of the player without JSONP http://www.freeenergymedia.com/shared/PLAYER/player/player.php

PHP script which returns JSON data

  <?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
?>

get request, loads JSON into player

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

markup

<!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>

回答1:

Your PHP script is returning JSONP and not JSONP. To make it working cross-domain you must actually modify your PHP to return a call to a callback function.

So you must make sure that the PHP code is returning data in a form callback(data);.

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

Change your JavaScript .getJSON() call to:

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

jQuery will insert into the URL generated callback name.

See documentation.

来源：https://stackoverflow.com/questions/8468704/jasonp-cross-domain-request-wrapping-json-into-a-callback-method

标签

jquery

ajax

json

jsonp