jquery - 如何获取xml数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10811511/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery - How to get xml data
提问by TheOnlyIdiot
Im a total noob to html, css, javascript, and programming altogether. Please bear with me.
我对 html、css、javascript 和编程完全是个菜鸟。请多多包涵。
Im trying to populate my table using jquery. The data will be coming from an xml file.
我正在尝试使用 jquery 填充我的表。数据将来自一个 xml 文件。
football_player.xml:
football_player.xml：
<?xml version="1.0" encoding="UTF-8"?>
<football_player>
<name>Cristiano Ronaldo</name>
<club>Real Madrid</club>
<number>7</number>
<country>Portugal </country>
<name>Fernando Torres </name>
<club>Chelsea </club>
<number>9</number>
<country>Spain</country>
<name>Iker Casillas</name>
<club>Real Madrid </club>
<number>1</number>
<country>Spain</country>
<name>David Beckham</name>
<club>Los Angeles Galaxy</club>
<number>23</number>
<country>England</country>
</football_player>
My html table:
我的 html 表：
<table>
<thead>
<tr>
<th>Name</th>
<th>Club</th>
<th>Number</th>
<th>Country</th>
</tr>
</thead>
<tbody>
</tbody>
</tfoot>
</tfoot>
</table>
My javascript/jquery script:
我的 javascript/jquery 脚本：
$(document).ready(function () {
$.ajax({
type: "GET",
url: "football_player.xml",
dataType: "xml",
success: function(xml) {
$(xml).find("football_player").each(function () {
$("table tbody").append("<tr>");
$("table tbody").append("<td>" + $(this).find("name").text() + "</td>");
$("table tbody").append("<td>" + $(this).find("club").text() + "</td>");
$("table tbody").append("<td>" + $(this).find("number").text() + "</td>");
$("table tbody").append("<td>" + $(this).find("country").text() + "</td>");
$("table tbody").append("</tr>");
});
}
});
});
I swear Im really a noob. I don't have any idea of what Im doing. Please help. I really want to learn. Thanks in advance.
我发誓我真的是个菜鸟。我不知道我在做什么。请帮忙。我真的很想学习。提前致谢。
回答by Arnab Shaw
The sample XML:
示例 XML：
<?xml version="1.0" encoding="utf-8" ?>
<RecentBooks>
<Book>
<Title>My Cool Book Title</Title>
<Description>The my cool book is possibly the best cool book in that any developer could use to be a great web designer.</Description>
<Date>12/1/2010</Date>
</Book>
<Book>
<Title>Another PHP book</Title>
<Description>Learn everything about PHP with 'Another PHP book,' your ultimate guide to the ins and outs of PHP.</Description>
<Date>4/1/2010</Date>
</Book>
<Book>
<Title>jQuery Techniques</Title>
<Description>jQuery techniques runs you through real life examples of jQuery from beginner to expert</Description>
<Date>6/2/2010</Date>
</Book>
<Book>
<Title>MySQL Database Book</Title>
<Description>Brush up your knowledge with the best MySQL database book on the market. </Description>
<Date>14/2/2010</Date>
</Book>
</RecentBooks>
And the HTML & jquery.
以及 HTML 和 jquery。
$(document).ready(function () {
$.ajax({
type: "GET",
url: "books.xml",
dataType: "xml",
success: xmlParser
});
});
function xmlParser(xml) {
$('#load').fadeOut();
$(xml).find("Book").each(function () {
$(".main").append('<div class="book"><div class="title">' + $(this).find("Title").text() + '</div><div class="description">' + $(this).find("Description").text() + '</div><div class="date">Published ' + $(this).find("Date").text() + '</div></div>');
$(".book").fadeIn(1000);
});
}
<div class="main">
<div align="center" class="loader"><img src="loader.gif" id="load" width="16" height="11" align="absmiddle"/></div>
</div>
<div class="clear"></div>
you can go through the example and you will get idea about the same
你可以通过这个例子，你会得到相同的想法
回答by Savaratkar
I was in similar problem, where I was fetching XML data using HTTP GET and then parsing. Taking your example:
我遇到了类似的问题，我使用 HTTP GET 获取 XML 数据然后解析。以你的例子为例：
$.ajax({
type: "GET",
url: "football_player.xml",
->dataType: "text",
success: function(xml) {
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xml, "text/xml");
var json = ->getJson(xmlDoc);
for(var i =0; i< json[0].football_player.length;i++) {
var player = json[0].football_player[i];
$("table tbody").append("<tr>");
$("table tbody").append("<td>" + ->player.name + "</td>");
$("table tbody").append("<td>" + ->player.club + "</td>");
$("table tbody").append("<td>" + ->player.number + "</td>");
$("table tbody").append("<td>" + ->player.country + "</td>");
$("table tbody").append("</tr>");
}
}
});
Three things to notice (->):
需要注意的三件事 (->)：
dataType: "text"I made http request with data type as TEXT rather than XML, so that I get xml data as a string data type.getJson(xmlDoc)method: I wrote a small function to convert XML to Javascript object (JSON). There are other small utilities available to do the same.player.name: due to this conversion, you can use XML content as javascript objects and thus easier to parse and read.
dataType: "text"我使用数据类型作为 TEXT 而不是 XML 发出 http 请求，以便我将 xml 数据作为字符串数据类型。getJson(xmlDoc)方法：我写了一个小函数将 XML 转换为 Javascript 对象（JSON）。还有其他一些小实用程序可以做同样的事情。player.name：由于这种转换，您可以将 XML 内容用作 javascript 对象，从而更易于解析和阅读。
I am pasting getJson()function below (its not tested, I made it for a POC, but worked for me):
我在getJson()下面粘贴函数（它没有经过测试，我是为 POC 制作的，但对我有用）：
function getJson(xmlDoc) {
var result = [];
for (var i = 0; i < xmlDoc.children.length; i++) {
var child = xmlDoc.children[i];
if (result[child.tagName] === undefined) {
result[child.tagName] = [];
}
var nodeJson = getJsonFromNode(xmlDoc.children[i]);
result[child.tagName].push(nodeJson);
}
return result;
}
function getJsonFromNode(node) {
var nodeJson = {};
// for attributes
for (var i = 0; i < node.attributes.length; i++) {
var att = node.attributes[i];
nodeJson[att.localName] = att.value;
}
// for child nodes
for (var i = 0; i < node.children.length; i++) {
var child = node.children[i];
if (nodeJson[child.tagName] === undefined) {
nodeJson[child.tagName] = [];
}
var result = getJsonFromNode(node.children[i]);
nodeJson[child.tagName].push(result);
}
return nodeJson;
}
