Question

使用网址： http://www.remote_host.com/feed.php?callback=jsonpCallback

我回来了：

jsonpCallback({
    "rss": {
        "channels": [
            {
                "title": "title goes here",
                "link": "http://www.remote_server.com/feed.php",
                "description": "description goes here",
                "items": [
                    {
                        "title": "item title goes here",
                        "link": "item link goes here",
                        "pubDate": "item date goes here",
                        "description": "item description goes here"
                    },
                    {
                        "title": "item title goes here",
                        "link": "item link goes here",
                        "pubDate": "item date goes here",
                        "description": "item description goes here"
                    },
                    {
                        "title": "item title goes here",
                        "link": "item link goes here",
                        "pubDate": "item date goes here",
                        "description": "item description goes here"
                    }
                ]
            }
        ]
    } })

在客户端，我有以下脚本：

$(document).ready(function() {
    get_jsonp_feed();

    function get_jsonp_feed() {
        $.ajax({
            url: 'http://www.remote_host.co.uk/feed.php',
            type: 'GET',
            dataType: 'jsonp',
            jsonp: 'callback',
            jsonpCallback: 'jsonpCallback',
            error: function(xhr, status, error) {
                alert("error");
            },
            success: function(jsonp) { 
                alert("success");
            }
        });
    }
});

如何将一些jsonp内容写入屏幕，即

channel title: title goes here<br /><br />

item title: title goes here<br />
item link: link goes here<br />
item date: date goes here<br />
item description: description goes here<br /><br />

item title: title goes here<br />
item link: link goes here<br />
item date: date goes here<br />
item description: description goes here<br /><br />

item title: title goes here<br />
item link: link goes here<br />
item date: date goes here<br />
item description: description goes here<br /><br />

而不是警告“成功”？

Answer 1

您可以在jsonp中找到这样的值：

html = "channel title: "+jsonp.rss.channels[0].title+"<br /><br />";
for (x in jsonp.rss.channels[0].items)
{
    html += "item title: "+jsonp.rss.channels[0].items[x].title+"<br />";
    html += "item link: "+jsonp.rss.channels[0].items[x].link+"<br />";
    html += "item date: "+jsonp.rss.channels[0].items[x].pubDate+"<br />";
    html += "item description: "+jsonp.rss.channels[0].items[x].description+"<br /><br />";
}

然后，您可以将html插入您网站所需的位置。

Answer 2

你可以使用jQuery tmpl插件，这是一个例子：

var markup = "<li><b>${Name}</b> (${ReleaseYear})</li>";

// Compile the markup as a named template
$.template( "movieTemplate", markup );

$.ajax({
  dataType: "jsonp",
  url: moviesServiceUrl,
  jsonp: "$callback",
  success: showMovies
});

// Within the callback, use .tmpl() to render the data.
function showMovies( data ) {
  // Render the template with the "movies" data and insert
  // the rendered HTML under the 'movieList' element
  $.tmpl( "movieTemplate", data )
    .appendTo( "#movieList" );
}

请参阅：http://api.jquery.com/jquery.tmpl/

Answer 3

试试这个：

for (var i = 0; i < jsonpCallback.rss.channels.length; i++) {
    document.write("<hr/><b>" + i + "</b><br/>");
    document.write("Channel Title=>" + jsonpCallback.rss.channels[i].title );
}

var itemList = jsonpCallback.rss.channels[0].items;

for (var k = 0; k < itemList.length; k++) {
    document.write("<hr/>Item Number:<b>" + k + "</b><br/>");
    document.write("<br/>Item Title=>" + itemList[k].title );
    document.write("<br/>Item Link=>" +  itemList[k].link );
    document.write("<br/>Item Publication Title=>" + itemList[k].pubDate );
    document.write("<br/>Item Description=>" +  itemList[k].description );
}

Working DEMO

Answer 4

你可以使用这样的回调函数：

function jsonpCallback(data){
    $.each(data.rss.channels,function(d,c){
        var html = "channel title: "+c.title+"<br /><br />";

        $('#content').html($('#content').html()+html);
        $.each(c.items,function(i,e){

        var html = "item title: "+e.title+"<br />item link: "+e.link+"<br />item date: "+e.pubDate+"<br />item description: "+e.description+"<br /><br />";
        $('#content').html($('#content').html()+html);

    });

    });

}

示例：http://jsfiddle.net/niklasvh/tYgzw/

从JSONP中获取数据

4 个答案:

Working DEMO