jQuery + XML 问题答案

【问题标题】：jQuery + XML problemsjQuery + XML 问题
【发布时间】：2023-03-20 14:55:01
【问题描述】：

我一直在尝试获取 Digg rss 提要并将其内容解析为表格，作为使用 jQuery / XML 的介绍。我以this webmonkey 为例并尝试对其进行自定义。这是我的js文件：

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

还有我的 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>

基本上，它不起作用：它只是打印没有任何数据的表头。（我在修改之前检查了示例和代码，它工作得很好。）那么，基本上，我哪里出错了？？

编辑

这是由 andres 提供的新代码（仍然无法正常工作！）

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

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

【问题讨论】：

标签： jquery xml

【解决方案1】：

"digg.com/rss/index.xml" 重定向到"http://feeds.digg.com/digg/popular.rss"，尝试更改 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;
}

编辑：

jQuery Ajax Cross-Domain

【讨论】：

嗨 - 我已经更改了代码（我已经包含在我的原始帖子中），但我仍然得到完全相同的结果！感谢您的回复;还有更多想法吗？
@Sean McRaghty 对不起，我在回答中犯了一个错误，你正在做跨域，这在 IE 中有效，但在其他浏览器中无效。我在答案中传递了一个链接，供您查看此问题的解决方案

【解决方案2】：

试试这个：

$.get('http://digg.com/rss/index.xml', {}, callback, 'xml');

callback 是你已经写好的函数。

您错过的是http:// 部分。为了安全起见，我刚刚添加了第 4 个参数，以防 url 没有返回适当的 MIME 类型。

【讨论】：

不幸的是，用这个替换我的 $.get 行完全破坏了事情 - 空白页。

【解决方案3】：

您不能只调用 digg.com...这是一个跨域请求。您需要完成整个jsonp (jQuery docs that mention it) 事情，或者只在您的后端收集数据。

另外，顺便说一句，你应该养成这样做的习惯：

var someContent = [];
...
someContent.push( "somestring" );
...
someContent.join('');

...而不是...

var someContent = '';
...
someContent += "somestring";

因为你会发现它更快。

【讨论】：