16

我完全是 html、css、javascript 和编程的菜鸟。请多多包涵。

我试图使用 jquery 填充我的表。数据将来自 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>

我的html表：

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

我的 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>");           
      });
    }
  });
});

我发誓我真的是个菜鸟。我不知道我在做什么。请帮忙。我真的很想学习。提前致谢。

4

2 回答 2

20

示例 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>

还有 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>

你可以通过这个例子，你会得到同样的想法

于 2012-05-30T07:19:18.613 回答
4

我遇到了类似的问题，我使用 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>");
        }
    }
});

需要注意的三件事（->）：

  1. dataType: "text"我使用 TEXT 而不是 XML 的数据类型发出了 http 请求，因此我将 xml 数据作为字符串数据类型。

  2. getJson(xmlDoc)方法：我写了一个小函数来将 XML 转换为 Javascript 对象 (JSON)。还有其他小型实用程序可以做同样的事情。

  3. 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;
}
于 2018-03-20T09:37:36.507 回答