AJAX http GET请求
[英]AJAX http GET request
问题描述
我现在正在通过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文件。
这是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>
最后，这是ajax GET请求以及将xml解析为我的html中的container部分的函数：
$(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>'
);
});
}
该功能无法正常工作，我一生不知道为什么会出现语法错误。 任何建议将不胜感激。 谢谢。
3 个解决方案
解决方案1
5 已采纳 2014-10-12 10:24:23
您的代码有一些问题。
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是一个类，而不是id，因此选择器必须为$(".container") 。
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
解决方案2
2 2014-10-12 10:24:00
您在$(doccument).ready写了doccument而不是document 。
解决方案3
0 2014-10-12 10:32:04
将HTTP标头添加到AJAX获取请求
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.