Javascript ajaxhttpget请求
我目前正在通过jQuery自学一些AJAX 我编写了一个直接的get请求,将xml文件中的数据加载到包含容器类的节中 这是我的html文件:Javascript ajaxhttpget请求,javascript,jquery,ajax,Javascript,Jquery,Ajax,我目前正在通过jQuery自学一些AJAX 我编写了一个直接的get请求,将xml文件中的数据加载到包含容器类的节中 这是我的html文件: <!DOCTYPE html> <html lang="en"> <head> </head> <body> <section class="container"> </section> <script src="http://code.jquery.com
<!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文件
以下是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 » 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 – Random strings/passwords will display here. Load objects used for random string generation into the “Object Input Box” above. Objects above can be characters, words, sentences, etc. Test by clicking the “Generate random strings” 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 […]]]></description>
<content:encoded><![CDATA[<p>Output Box – Random strings/passwords will display here.<br />
Load objects used for random string generation into the “Object Input Box” above. Objects above can be characters, words, sentences, etc.<br />
Test by clicking the “Generate random strings” 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>
Biz-Tech.ie»;商业科技新闻
'
“”+$(this.find(“description”).text()+””
“作者:”+$(this).find(“dc:creator”).text()+”'
);
});
}
这个函数不起作用,我一辈子都不知道为什么,因为我看到一个语法错误。
如有任何建议,将不胜感激。
谢谢。您在
$(文档)中编写了文档
而不是文档
。准备好了吗您的代码有一些问题
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>'
);
});
3)。还有一件事:您的选择器必须是$(“.container”)
,因为container
是一个类,而不是id
4)。最后还有一个关于如何检索dc:creator
节点的小细节。由于此节点具有名称空间,因此需要按如下方式对其进行转义:
.find("dc\\:creator")
$(this).find('dc\\:creator, creator').eq(0)
然而,它仍然不能保证它能在所有浏览器中工作。您可能应该这样做:
.find("dc\\:creator")
$(this).find('dc\\:creator, creator').eq(0)
这里提供两个选择器。第二个选择器creator
将在Chrome中工作,第一个选择器(转义)将在Firefox中工作
5) 。同样以防万一,document
可能是一个打字错误,但无论如何它应该是document
演示:问题的关键是“我正在使用本地xml文件”…”。如果你看一下你的控制台,我很确定你得到了一个“访问控制允许原点错误”。这是浏览器型号的安全问题。如果您需要更多信息,请阅读
简而言之,尽管访问控制允许源代码错误发生在您从不同于托管HTML页面的域调用Web服务(如对XML文件执行GET请求)时。在您的情况下,我相信您的HTML文件在硬盘上,而Web服务在本地主机上被调用
出于开发目的,您可以使用。现在就可以了。SCRIPT1006:Expected')'xmlFeed.js,第13行字符10我已经更新了语法,将您的两个观点都更正为:$(document).ready(function(){$.ajax({type:'GET',url:'feed.xml',dataType:'xml',success:xmlParser};});函数xmlParser(xml){$(xml).find(“item”).each(函数(){$(“#容器”).append('++$(this).find(“title”).text()++'
'++''++$(this).find(“description”).text()++''+'作者:'++$(this).find(“dc:creator”).text()++''>}}我仍然收到这个控制台错误:'uncaughtsyntaxerror:unexpectedstring'我道歉。我不该用“本地”这个词。我把所有文件都放在桌面上的同一个文件夹中,称为“新文件夹”。文件夹结构是:index.html、xmlFeed.js和feed.xmlFeed.js。我现在在xmlFeed.js.xmlFeed.js的第一行字符1的开头遇到一个控制台错误。SCRIPT5009:“$”未定义表示未加载jQuery。确保它在xmlFeed.js
之前运行。非常感谢您花时间构建plunker演示。我复制粘贴并重命名了我的文件以匹配您的文件。我仍然收到一个控制台错误。SCRIPT5009:“$”是未定义的script.js,第1行字符1