如何在jQuery中使用xml数据填充新的html页面

时间:2013-11-21 18:03:00

标签: javascript jquery html ajax

我有一个RSS阅读器,可以使用ajax获取事件。我希望用户能够单击事件的链接并将其转换到包含详细信息的新页面。这是我发现的一个例子:http://jsfiddle.net/hellosze/t22QP/我无法理解正在发生的事情,因为我对jQuery很新,所以我希望有人编码指导我发生了什么。谢谢!

以下是我如何提取xml数据并将其显示到主页面:

$.ajax({
    type: 'GET',
    url: 'categoryURL',
    dataType: 'xml',
    success: function (xml) {
        var data = [];
        $(xml).find("item:lt(40)").each(function () {
            var dateText = $(this).find("Date").text().toString();
            var eventDate = moment(dateText,"YYYY-MM-DD");
            var title = $(this).find("title").text();

            var region = dateText.substr(8).toUpperCase();
                if (region.length < 3) { region = "ALL"; }  

            var description = $(this).find("description").text();
            var dateDisplay = description.substr(0, description.indexOf(",")+6); //Parsed DATE from description
                  if (dateDisplay.length > 35) { dateDisplay = "See event for details"; }

            //var locationdisplay = description.substr(description.indexOf(",")+6,4); //Parsed the location from description
            var category = $(this).find("category").text();
            var linkUrl = $(this).find("link").text();
            var displayTitle = "<a href='" + linkUrl + "' target='_blank'>" + title + "</a>" 

            var item = {title: displayTitle, DateDecription: dateDisplay, Date: new Date(eventDate), Region: region,}
            data.push(item);

           // $('#feedContainer').append('<h3>'+displaytitle+'</h3><p>'+"Event Date: "+descriptdisplay+'</p><p>'+"Location: "+region+'</p');

        }); //END .each()

        data.sort(function (a, b) {
            a = new Date(a.Date);
            b = new Date(b.Date);
            return a>b ? -1 : a<b ? 1 : 0;
        });

        $.each(data, function (index, item) {
            $('#feedContainer').append('<h3>' + item.title + '</h3><p>' + "Event Date: " + item.DateDecription + '</p><p>' + "Location: " + item.Region + '</p');
        });
    } //END success fn
});
});

0 个答案:

没有答案