Ajax 从JSONP中取出数据

使用url：

我回来了：

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

频道标题：标题在这里


项目标题：标题位于此处

项目链接：链接到此处

项目日期：日期在此显示

项目说明：此处为说明


项目标题：标题位于此处

项目链接：链接到此处

项目日期：日期在此显示

项目说明：此处为说明


项目标题：标题位于此处

项目链接：链接到此处

项目日期：日期在此显示

项目说明：此处为说明

---

您可以使用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" );
}

var-markup=“
${Name}（${ReleaseYear}）
”；
//将标记编译为命名模板
$.template（“movieTemplate”，标记）；
$.ajax({
数据类型：“jsonp”，
url:moviesServiceUrl，
jsonp:“$callback”，
成功：放映电影
});
//在回调中，使用.tmpl（）呈现数据。
功能showMovies（数据）{
//使用“电影”数据呈现模板并插入
//“movieList”元素下呈现的HTML
$.tmpl（“movieTemplate”，数据）
.附于（“#movieList”）；
}

---

请参阅：

您可以在

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 />";
}

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);

    });

    });

}

html=“频道标题：”+jsonp.rss.channels[0].title+“

”；
对于（jsonp.rss.channels[0].items中的x）
{
html+=“项目标题：”+jsonp.rss.channels[0]。项目[x]。标题+“
”；
html+=“项目链接：”+jsonp.rss.channels[0]。项目[x]。链接+“
”；
html+=“项目日期：”+jsonp.rss.channels[0]。项目[x]。发布日期+“
”；
html+=“项目描述：”+jsonp.rss.channels[0]。项目[x]。描述+“

”；
}

然后，您可以将

html

插入站点中所需的服务器位置。

尝试以下操作：

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 );
}

for（var i=0；i”+i+”
）；
document.write（“channeltitle=>”+jsonpCallback.rss.channels[i].Title）；
}
var itemList=jsonpCallback.rss.channels[0].items；
for（var k=0；k项目编号：“+k+”
”）；
document.write（“
项目标题=>”+itemList[k].Title”）；
document.write（“
Item Link=>”+itemList[k].Link”）；
document.write（“
项目发布标题=>”+itemList[k].pubDate”）；
document.write（“
项目描述=>”+itemList[k].Description”）；
}

---

您可以使用如下回调函数：

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 />";
}

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);

    });

    });

}

函数jsonpCallback（数据）{
$.each（data.rss.channels，function（d，c）{
var html=“频道标题：“+c.title+”

”；
$（'content'）.html（$（'content'）.html（）+html）；
美元。每个（c.项目、功能（即）{
var html=“项目标题：“+e.title+”
项目链接：“+e.link+”
项目日期：“+e.pubDate+”
项目描述：“+e.description+”

”；
$（'content'）.html（$（'content'）.html（）+html）；
});
});
}

---

示例：

由于某些原因，无法调用此函数。我做了一个测试，在该函数中放置了一个简单的警报框，但它没有显示。我将此代码放入jsonpCallback函数中，但什么也没有发生，出于某种原因，jsonpCallback函数没有被调用。我将此代码放入jsonpCallback函数中，什么也没有发生。由于某些原因，没有调用JSONPCCallback函数。@oshirowanen将其放入成功回调函数中，并使用类似于

$（“#content”）.html（html）的html