jquery - Comment obtenir des données xml

Je suis un noob total de html, css, javascript, et de la programmation tout à fait. S'il vous plaît garder avec moi.

Im essayant de remplir ma table à l'aide de jquery. Les données seront à venir à partir d'un fichier 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>

Mon tableau html:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Club</th>
      <th>Number</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
  </tfoot>
  </tfoot>
</table>

Mon javascript/jquery script:

$(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>");           
      });
    }
  });
});

Je jure que Im vraiment un noob. Je n'ai pas la moindre idée de ce que Im faire. S'il vous plaît aider. J'ai vraiment envie d'apprendre. Merci à l'avance.

Une explication ne serait pas une mauvaise idée.
Les données de ce fichier est disponible dans la variable xml à l'intérieur de la fonction.
J'ai mis à jour mon code. Veuillez prendre un coup d'oeil. Merci.

OriginalL'auteur TheOnlyIdiot | 2012-05-30

  1. 16

    L'échantillon 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>

    Et le 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>

    vous pouvez aller à travers l'exemple et vous aurez une idée sur la même

    OriginalL'auteur

  2. 2

    J'ai été dans le même problème, où j'ai été chercher de données XML à l'aide de HTTP GET et puis de l'analyse. Prendre votre exemple:

    $.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>");
        }
    }
});

    Trois choses à remarquer, (- >):

    1. dataType: "text" J'ai fait la requête http avec comme type de données TEXTE plutôt que de XML, de sorte que je reçois de données xml comme un type de données string.

    2. getJson(xmlDoc) méthode: j'ai écrit une petite fonction pour convertir du XML en objet Javascript (JSON). Il y a d'autres petits utilitaires disponibles à faire de même.

    3. player.name: en raison de cette conversion, vous pouvez utiliser le contenu XML comme des objets javascript et donc plus facile à analyser et à lire.

    Je suis coller getJson() fonction ci-dessous (ce n'est pas testé, je l'ai fait pour un POC, mais il a travaillé pour moi):

    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;
}

    OriginalL'auteur