Question

我目前正在通过jQuery教自己一些AJAX。

我写了一个直接的get请求，将xml文件中的数据加载到一个容器类的部分。

这是我的html文件：

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>

<section class="container">

</section>


<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8" async defer></script>
<script src="xmlFeed.js" type="text/javascript" charset="utf-8" async defer></script>
</body>
</html>

在创建WordPress网站上的虚拟帖子后，我使用的是本地xml文件，并获得了Feed。

这是xml文件：

<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
    xmlns:content="http://purl.org/rss/1.0/modules/content/"
    xmlns:wfw="http://wellformedweb.org/CommentAPI/"
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:atom="http://www.w3.org/2005/Atom"
    xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
    xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
    >

<channel>
    <title>Biz-Tech.ie &#187; Biz-Tech News</title>
    <atom:link href="http://www.biz-tech.ie/category/biz-tech-news/feed/" rel="self" type="application/rss+xml" />
    <link>http://www.biz-tech.ie</link>
    <description></description>
    <lastBuildDate>Sat, 11 Oct 2014 17:39:16 +0000</lastBuildDate>
    <language>en-US</language>
        <sy:updatePeriod>hourly</sy:updatePeriod>
        <sy:updateFrequency>1</sy:updateFrequency>
    <generator>http://wordpress.org/?v=4.0</generator>
    <item>
        <title>News</title>
        <link>http://www.biz-tech.ie/news/</link>
        <comments>http://www.biz-tech.ie/news/#comments</comments>
        <pubDate>Sat, 11 Oct 2014 17:39:16 +0000</pubDate>
        <dc:creator><![CDATA[Michael]]></dc:creator>
                <category><![CDATA[Biz-Tech News]]></category>

        <guid isPermaLink="false">http://www.biz-tech.ie/?p=170</guid>
        <description><![CDATA[Output Box &#8211; Random strings/passwords will display here. Load objects used for random string generation into the &#8220;Object Input Box&#8221; above. Objects above can be characters, words, sentences, etc. Test by clicking the &#8220;Generate random strings&#8221; button above to generate 10, 14 character, random strings from the default input objects. NOTICE: Tool uses Javascript method Math.random() pseudorandom generator to obtain [&#8230;]]]></description>
                <content:encoded><![CDATA[<p>Output Box &#8211; Random strings/passwords will display here.<br />
Load objects used for random string generation into the &#8220;Object Input Box&#8221; above. Objects above can be characters, words, sentences, etc.<br />
Test by clicking the &#8220;Generate random strings&#8221; button above to generate 10, 14 character, random strings from the default input objects.<br />
NOTICE: Tool uses Javascript method Math.random() pseudorandom generator to obtain random string. Do not use for critical random results.<br />
Privacy of Data: This tool is built-with and functions-in Client Side JavaScripting, so only your computer will see or process your data input/output.</p>
]]></content:encoded>
            <wfw:commentRss>http://www.biz-tech.ie/news/feed/</wfw:commentRss>
        <slash:comments>0</slash:comments>
        </item>
    </channel>
</rss>

最后这里是ajax GET请求以及在我的html中将xml解析为容器部分的函数：

 $(doccument).ready(function() {
   $.ajax({
      type:"GET",
      url:"feed.xml",
      dataType:"xml",
      success:xmlParser
   });
});

function xmlParser(xml) {
   $(xml).find("item").each(function(){
      $("#container").append('<h3>'+ $(this).find("title").text()+'</h3><br />'
         '<a href="'+ $(this).find("link").text()+'></a>'
         '<p>'+ $(this).find("description").text()+'</p>'
         '<p><h5>Author: '+ $(this).find("dc:creator").text()+'</h5></p>'
         );
   });
}

该功能不起作用，对于我的生活，我不知道为什么我可以看到语法错误。任何建议将不胜感激。感谢。

Answer 1

您的代码存在一些问题。

1）。你在javascript中连接字符串的方式是不正确的。使用以下语法：

   $(xml).find("item").each(function(){
      $(".container").append('<h3>'+ $(this).find("title").text()+'</h3><br />' +
         '<a href="'+ $(this).find("link").text()+'"></a>' +
         '<p>'+ $(this).find("description").text()+'</p>' +
         '<p><h5>Author: '+ $(this).find('dc\\:creator, creator').eq(0).text()+'</h5></p>'
         );
   });

注意+运算符，它用于字符串连接。

2）。还有一个问题。您错过了链接构造字符串中的结束引号，它会破坏HTML并隐藏所有后续内容：

'<a href="' + $(this).find("link").text() + '"></a>'
                                             ^-- add this guy here

3）。还有一件事：您的选择器必须是$(".container")，因为container是一个类，而不是ID。

4）。最后还有一个关于如何检索dc:creator节点的细节。由于此节点是命名空间，因此您需要将其转义为：

.find("dc\\:creator")

然而，它仍然无法保证它适用于所有浏览器。你可能应该这样做：

$(this).find('dc\\:creator, creator').eq(0)

您在这里提供两个选择器。第二个选择器creator可以在Chrome中使用，第一个（转义）在Firefox中。

5）。同样，doccument可能是一个错字，但无论如何它应该是document。

演示：http://plnkr.co/edit/0Z2tJJ3JANtJq30CNUDD?p=preview

Answer 2

您在doccument中写了document而不是$(doccument).ready。

Answer 3

问题的关键是“我使用的是本地xml文件 ...”。如果你看一下你的控制台，我很确定你得到的是“Access-Control-Allow-Origin错误”。这是一个浏览器模型安全问题。如果您需要更多信息，请阅读here。

简而言之，当您调用Web服务（例如对XML文件执行GET请求）时，会发生Access-Control-Allow-Origin错误，该域来自与承载HTML页面的域不同的域。在您的情况下，我相信您的HTML文件在您的硬盘驱动器上，而在本地主机上调用Web服务。

出于开发目的，您可以使用this chrome plugin。这将暂时有效。

AJAX http GET请求

3 个答案:

演示：http://plnkr.co/edit/0Z2tJJ3JANtJq30CNUDD?p=preview