jquery – 如何获取xml数据
我是html，css，javascript和编程的总菜鸟。 请多多包涵。
我试图用jquery填充我的表。 数据将来自xml文件。
football_player.xml ：
Cristiano Ronaldo Real Madrid 7 Portugal Fernando Torres Chelsea 9 Spain Iker Casillas Real Madrid 1 Spain David Beckham Los Angeles Galaxy 23 England
我的html表：
Name Club Number Country
我的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(""); $("table tbody").append("" + $(this).find("name").text() + " "); $("table tbody").append("" + $(this).find("club").text() + " "); $("table tbody").append("" + $(this).find("number").text() + " "); $("table tbody").append("" + $(this).find("country").text() + " "); $("table tbody").append(" "); }); } }); });
我发誓我真的是个菜鸟。 我不知道我在做什么。 请帮忙。 我真的很想学。 提前致谢。
示例XML：
My Cool Book Title The my cool book is possibly the best cool book in that any developer could use to be a great web designer. 12/1/2010 Another PHP book Learn everything about PHP with 'Another PHP book,' your ultimate guide to the ins and outs of PHP. 4/1/2010 jQuery Techniques jQuery techniques runs you through real life examples of jQuery from beginner to expert 6/2/2010 MySQL Database Book Brush up your knowledge with the best MySQL database book on the market. 14/2/2010
和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('' + $(this).find("Title").text() + '' + $(this).find("Description").text() + 'Published ' + $(this).find("Date").text() + ''); $(".book").fadeIn(1000); }); } 
你可以通过这个例子，你会得到相同的想法
我遇到了类似的问题，我使用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(""); $("table tbody").append("" + ->player.name + " "); $("table tbody").append("" + ->player.club + " "); $("table tbody").append("" + ->player.number + " "); $("table tbody").append("" + ->player.country + " "); $("table tbody").append(" "); } } });
要注意的三件事（ – >）：
-
dataType: "text"我创建了http请求，数据类型为TEXT而不是XML，因此我将xml数据作为字符串数据类型。 -
getJson(xmlDoc)方法：我写了一个小函数来将XML转换为Javascript对象（JSON）。 还有其他小型实用程序可以做同样的事情。 -
player.name：由于这种转换，您可以将XML内容用作javascript对象，从而更容易解析和阅读。
我正在粘贴下面的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; }