jQuery + XML problems
I've been trying to grab the Digg rss feed and parse its contents into a table as an intro to working with jQuery / XML. I took this webmonkey example and tried to customize it. Here is my js file:
// File: readXML.js
// Start function when DOM has completely loaded
$(document).ready(function(){
// Open the students.xml file
$.get("digg.com/rss/index.xml",{},function(xml){
// Build an HTML string
myHTMLOutput = '';
myHTMLOutput += '<table width="98%" border="1" cellpadding="0" cellspacing="0">';
myHTMLOutput += '<th>Title</th><th>PubDate</th><th>Description</th><th>Link</th>';
// Run the function for each student tag in the XML file
$('item',xml).each(function(i) {
diggTitle = $(this).find("title").text();
diggDate = $(this).find("pubDate").text();
diggDesc = $(this).find("description").text();
diggLink = $(this).find("link").text();
// Build row HTML data and store in string
mydata = BuildDiggHTML(diggTitle,diggDate,diggDesc,diggLink);
myHTMLOutput = myHTMLOutput + mydata;
});
myHTMLOutput += '</table>';
// Update the DIV called Content Area with the HTML string
$("#ContentArea").append(myHTMLOutput);
});
});
function BuildDiggHTML(diggTitle,diggDate,diggDesc,diggLink){
// Build HTML string and return
output = '';
output += '<tr>';
output += '<td>'+ diggTitle +'</td>';
output += '<td>'+ diggDate +'</td>';
output += '<td>'+ diggDesc +'</td>';
output += '<td>'+ diggLink +'</td>';
output += '</tr>';
return output;
}
And my HTML:
<html>
<head>
<title>JQuery Easy XML Read Example</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="readXML.js"></script>
</head>
<body>
<div id="ContentArea"></div>
</body>
</html>
Basically, it doesn't work: it just prints the table headers without any of the data. (I checked the example and the code before I modified it worked just fine.) So, basically, where am I going wrong??
EDIT
Here is the new code courtesy of andres (which still doesn't work!)
// File: readXML.js
// Start function when DOM has completely loaded
$(document).ready(function(){
// Open the students.xml file
$.get("http://feeds.digg.com/digg/popular.rss",{},function(xml){
// Build an HTML string
myHTMLOutput = '<table width="98%" border="1" cellpadding="0" cellspacing="0">';
myHTMLOutput += '<thead><th>Title</th><th>PubDate</th><th>Descript开发者_如何学Pythonion</th><th>Link</th></thead>';
// Run the function for each student tag in the XML file
myHTMLOutput += '<tbody>'
$('item',xml).each(function(i) {
// Build row HTML data and store in string
myHTMLOutput += BuildDiggHTML(this);
});
myHTMLOutput += '</tbody></table>';
// Update the DIV called Content Area with the HTML string
$("#ContentArea").append(myHTMLOutput);
});
});
function BuildDiggHTML(el){
// Build HTML string and return
var output = '';
output = '<tr>';
try {
output += '<td>'+ $(el).find("title").text() +'</td>';
output += '<td>'+ $(el).find("pubDate").text() +'</td>';
output += '<td>'+ $(el).find("description").text() +'</td>';
output += '<td>'+ $(el).find("link").text() +'</td>';
}catch(ex){
output = '<td colspan="4">'+ex.description+'</td>';
}
output += '</tr>';
return output;
}
"digg.com/rss/index.xml" redirects to "http://feeds.digg.com/digg/popular.rss", try to change the URL.
JS + HTML:
...
// Build an HTML string
myHTMLOutput = '<table width="98%" border="1" cellpadding="0" cellspacing="0">';
myHTMLOutput += '<thead><th>Title</th><th>PubDate</th><th>Description</th><th>Link</th></thead>';
// Run the function for each student tag in the XML file
myHTMLOutput += '<tbody>'
$('item',xml).each(function(i) {
// Build row HTML data and store in string
myHTMLOutput += BuildDiggHTML(this);
});
myHTMLOutput += '</tbody></table>';
...
function BuildDiggHTML(el){
// Build HTML string and return
var output = '';
output = '<tr>';
try {
output += '<td>'+ $(el).find("title").text() +'</td>';
output += '<td>'+ $(el).find("pubDate").text() +'</td>';
output += '<td>'+ $(el).find("description").text() +'</td>';
output += '<td>'+ $(el).find("link").text() +'</td>';
}catch(ex){
output = '<td colspan="4">'+ex.description+'</td>';
}
output += '</tr>';
return output;
}
EDIT:
jQuery Ajax Cross-Domain
try this:
$.get('http://digg.com/rss/index.xml', {}, callback, 'xml');
callback is the function you've already written.
what you've missed is the http:// part. I just added the 4th arg for a measure of safety, just in case the url does not return an appropriate MIME type.
You can't just do a call to digg.com... that's a cross-domain request. You'll need to do the whole jsonp (jQuery docs that mention it) thing or just do this data gathering on your backend.
Also, just as a side note, you should get in the habit of doing:
var someContent = [];
...
someContent.push( "somestring" );
...
someContent.join('');
...instead of...
var someContent = '';
...
someContent += "somestring";
becuase you will find it much faster.
加载中,请稍侯......
精彩评论