使用jquery和ajax解析xml

时间:2021-10-21 00:50:35

I have an rss feed for my podcast and essentially what I am trying to do is populate an html5 audio player with URLs within the RSS feed.

我的播客有一个RSS源,基本上我要做的就是在RSS源中填充带有URL的html5音频播放器。

I figure the best way to go about this is to parse the links using ajax and then append them into the src of the audio player. I am aware of the same domain policy that would prevent me doing this with ajax, so I am using the cross domain ajax plugin (http://bit.ly/Jbi9iX) to get around this.

我认为最好的解决方法是使用ajax解析链接,然后将它们附加到音频播放器的src中。我知道同样的域策略会阻止我用ajax这样做,所以我使用跨域ajax插件(http://bit.ly/Jbi9iX)来解决这个问题。

I am struggling to figure out exactly why the code below is not working for me, basically at this stage I simply want to append the url's within the RSS feed into the #results to show that its working, then I will add it to the src part of the audio player.

我正在努力弄清楚为什么下面的代码对我不起作用,基本上在这个阶段我只想将RSS提要中的url追加到#results以显示它的工作,然后我将它添加到src音频播放器的一部分。

$(document).ready(function () {
    $.ajax({
        url: 'http://theresidency.libsyn.com/rss',
        type: 'GET',
        dataType: "xml",
        success: parseXml
    });
});

function parseXml(xml) {
var item = $(xml).find("item");

  $(item).each(function() {
    $("#results").append($("enclosure").attr("url").text() + "<br />");
  });

}

I am not getting any errors in chrome dev tools, and I have looked around at other examples but I can figure out what I'm doing wrong.

我没有在chrome dev工具中遇到任何错误,我已经查看了其他示例,但我可以弄清楚我做错了什么。

Here is an example of the xml/rss: http://pastebin.com/stuY495c And here is what I have so far uploaded: http://bit.ly/J9QHZc

这是一个xml / rss的例子:http://pastebin.com/stuY495c这是我到目前为止上传的内容:http://bit.ly/J9QHZc

Any help would be much appreciated so thanks in advance!

任何帮助将非常感谢,所以提前感谢!

2 个解决方案

#1


6  

Where exactly are you passing the data to the function, I think you need to do:

你究竟在哪里将数据传递给函数,我认为你需要这样做:

$(document).ready(function () {
    $.ajax({
        url: 'http://theresidency.libsyn.com/rss',
        type: 'GET',
        dataType: "xml",
        success: function(data) {
           parseXml(data);
        }
    });
});

function parseXml(xml) {
var item = $(xml).find("item");

  $(item).each(function() {
    $("#results").append($("enclosure").attr("url").text() + "<br />");
  });

}

or just:

要不就:

$(document).ready(function () {
    $.ajax({
        url: 'http://theresidency.libsyn.com/rss',
        type: 'GET',
        dataType: "xml"
    }).done(function(xml) {
        $.each($("item", xml), function(i, e) {
            $("#results").append($("enclosure").attr("url").text() + "<br />");
        });
    });
});

EDIT:

编辑:

Did some more fiddling with this, and came up with:

做了一些更多的摆弄,并提出:

$(document).ready(function () {
    $.ajax({
        url: 'http://query.yahooapis.com/v1/public/yql?q=%20SELECT%20*%20FROM%20xml%20WHERE%20url%3D%22http%3A%2F%2Ftheresidency.libsyn.com%2Frss%22&format=json&callback=',
        dataType: "json"
    }).done(function(data) {
        $.each(data.query.results.rss.channel.item, function() {
            $("#results").append(this.enclosure.url + "<br />");
        });
    });
});​

I do believe that is what you are looking for, here's a DEMONSTRATION

我相信这就是你要找的,这是一个演示

#2


1  

Turns out, parsing RSS is a bit more complicated than basic XML parsing. Don't worry though, google can do the job for you and return a json-object:

事实证明,解析RSS比基本的XML解析要复杂一些。不过不用担心,谷歌可以为你完成这项工作并返回一个json对象:

$(function() {
   parseRSS('http://theresidency.libsyn.com/rss');
});

function parseRSS(url) {
  $.ajax({
    url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url),
    dataType: 'json',
    success: function(data) {
      $.each(data.responseData.feed.entries, function() {
        $('#results').append(this.link + '<br />');
      })
    }
  });
}

#1


6  

Where exactly are you passing the data to the function, I think you need to do:

你究竟在哪里将数据传递给函数,我认为你需要这样做:

$(document).ready(function () {
    $.ajax({
        url: 'http://theresidency.libsyn.com/rss',
        type: 'GET',
        dataType: "xml",
        success: function(data) {
           parseXml(data);
        }
    });
});

function parseXml(xml) {
var item = $(xml).find("item");

  $(item).each(function() {
    $("#results").append($("enclosure").attr("url").text() + "<br />");
  });

}

or just:

要不就:

$(document).ready(function () {
    $.ajax({
        url: 'http://theresidency.libsyn.com/rss',
        type: 'GET',
        dataType: "xml"
    }).done(function(xml) {
        $.each($("item", xml), function(i, e) {
            $("#results").append($("enclosure").attr("url").text() + "<br />");
        });
    });
});

EDIT:

编辑:

Did some more fiddling with this, and came up with:

做了一些更多的摆弄,并提出:

$(document).ready(function () {
    $.ajax({
        url: 'http://query.yahooapis.com/v1/public/yql?q=%20SELECT%20*%20FROM%20xml%20WHERE%20url%3D%22http%3A%2F%2Ftheresidency.libsyn.com%2Frss%22&format=json&callback=',
        dataType: "json"
    }).done(function(data) {
        $.each(data.query.results.rss.channel.item, function() {
            $("#results").append(this.enclosure.url + "<br />");
        });
    });
});​

I do believe that is what you are looking for, here's a DEMONSTRATION

我相信这就是你要找的,这是一个演示

#2


1  

Turns out, parsing RSS is a bit more complicated than basic XML parsing. Don't worry though, google can do the job for you and return a json-object:

事实证明,解析RSS比基本的XML解析要复杂一些。不过不用担心,谷歌可以为你完成这项工作并返回一个json对象:

$(function() {
   parseRSS('http://theresidency.libsyn.com/rss');
});

function parseRSS(url) {
  $.ajax({
    url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url),
    dataType: 'json',
    success: function(data) {
      $.each(data.responseData.feed.entries, function() {
        $('#results').append(this.link + '<br />');
      })
    }
  });
}