0

好的，所以我需要尝试并完成的是拥有一个静态网页，该网页将显示从 XML 文档中提取的信息并将其呈现到屏幕上而无需刷新。我猜是基本的 AJAX 东西。

诀窍是，当我试图通过思考这个问题时，我在精神上不断地遇到“逻辑”障碍。

目标：

- 有一个图表，显示棒球队的名字、胜负、平局。在我的 XML 文档中有一个“待定”状态，因此不应该显示未完成的游戏。（这里需要帮助）

- 有一个选择列表，允许您选择从 XML 文档填充的团队。（完毕）

- 从上述选择列表中选择特定球队后，页面应在单独的区域显示该球队的所有计划比赛。包括待定。基本上所有与该团队相关的比赛和日期（包含在 XML 文件中）。（这里需要帮助）

到目前为止我所拥有的：

HTML\JS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="batty.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Little Batty League</title>
<script type="text/javascript" src="library.js"></script>
<script type="text/javascript" src="jquery.js"></script>

<script  type="text/javascript">
   var IE = window.ActiveXObject ? true: false;
   var MOZ = document.implementation.createDocument ? true: false;


   $(document).ready(function(){
            $.ajax({
            type: "GET",
            url: "schedule.xml",
            dataType: "xml",
            success: function(xml) {
            var select = $('#mySelect');
            $(xml).find('Teams').each(function(){
            var title = $(this).find('Team').text();
        select.append("<option/><option class='ddheader'>"+title+"</option>");
                    });
                    select.children(":first").text("please make a selection").attr("selected",true);
                }
            });
        });
     </script>
   </script>
</head>
<body onLoad="init()">
    <!-- container start -->
<div id="container">

        <!-- banner start -->
        <div id="banner">
            <img src="images/mascot.jpg" width="324" height="112" alt="Mascot" />

           <!-- buttons start --> 
            <table width="900" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td><div class="menuButton"><a href="index.html">Home</a></div></td>
                <td><div class="menuButton"><a href="schedule.html">Schedule</a></div></td>
                <td><div class="menuButton"><a href="contact.html">Contact</a></div></td>
                <td><div class="menuButton"><a href="about.html">About</a></div></td>
              </tr>
            </table>
           <!-- buttons end -->

        </div>
        <!-- banner end -->

        <!-- content start -->
        <div id="content">
            <br />
            <form>
                <select id="mySelect">
                    <option>please make a selection</option>
                </select>
            </form>
        </div>
        <!-- content end -->

        <!-- footer start -->
        <div id="footer">
            &copy; 2012 Batty League
        </div>
        <!-- footer end -->

    </div>
    <!-- container end -->
</body>
</html>

XML是：

<?xml version="1.0" encoding="utf-8"?>
    <Schedule season="1">
        <Teams>
            <Team>Bluejays</Team>
        </Teams>

        <Teams>
            <Team>Chickens</Team>
        </Teams>

        <Teams>
            <Team>Lions</Team>
        </Teams>

        <Teams>
            <Team>Pixies</Team>
        </Teams>

        <Teams>
            <Team>Zombies</Team>
        </Teams>

        <Teams>
            <Team>Wombats</Team>
        </Teams>

        <Game status="Played"> 
            <Home_Team>Chickens</Home_Team>
            <Away_Team>Bluejays</Away_Team>
            <Date>2012-01-10T09:00:00</Date>
        </Game>

        <Game status="Pending"> 
            <Home_Team>Bluejays </Home_Team>
            <Away_Team>Chickens</Away_Team>
            <Date>2012-01-11T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Bluejays</Home_Team>
            <Away_Team>Lions</Away_Team>
            <Date>2012-01-18T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Lions</Home_Team>
            <Away_Team>Bluejays</Away_Team>
            <Date>2012-01-19T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Bluejays</Home_Team>
            <Away_Team>Pixies</Away_Team>
            <Date>2012-01-21T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Pixies</Home_Team>
            <Away_Team>Bluejays</Away_Team>
            <Date>2012-01-23T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Bluejays</Home_Team>
            <Away_Team>Zombies</Away_Team>
            <Date>2012-01-25T09:00:00</Date>
        </Game>

        <Game status="Pending"> 
            <Home_Team>Zombies</Home_Team>
            <Away_Team>Bluejays</Away_Team>
            <Date>2012-01-27T09:00:00</Date>
        </Game>

        <Game status="Pending"> 
            <Home_Team>Bluejays</Home_Team>
            <Away_Team>Wombats</Away_Team>
            <Date>2012-01-28T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Wombats</Home_Team>
            <Away_Team>Bluejays</Away_Team>
            <Date>2012-01-30T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Chickens</Home_Team>
            <Away_Team>Lions</Away_Team>
            <Date>2012-01-31T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Lions</Home_Team>
            <Away_Team>Chickens</Away_Team>
            <Date>2012-02-04T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Chickens</Home_Team>
            <Away_Team>Pixies</Away_Team>
            <Date>2012-02-05T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Pixies</Home_Team>
            <Away_Team>Chickens</Away_Team>
            <Date>2012-02-07T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Chickens</Home_Team>
            <Away_Team>Zombies</Away_Team>
            <Date>2012-02-08T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Zombies</Home_Team>
            <Away_Team>Chickens</Away_Team>
            <Date>2012-02-10T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Lions</Home_Team>
            <Away_Team>Pixies</Away_Team>
            <Date>2012-02-12T09:00:00</Date>
        </Game>

                <Game status="Played"> 
            <Home_Team>Pixies </Home_Team>
            <Away_Team>Lions</Away_Team>
            <Date>2012-02-14T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Lions</Home_Team>
            <Away_Team>Zombies</Away_Team>
            <Date>2012-02-15T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Zombies</Home_Team>
            <Away_Team>Lions</Away_Team>
            <Date>2012-02-16T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Lions</Home_Team>
            <Away_Team>Wombats</Away_Team>
            <Date>2012-01-23T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Wombats</Home_Team>
            <Away_Team>Lions</Away_Team>
            <Date>2012-02-24T09:00:00</Date>
        </Game>

        <Game status="Pending"> 
            <Home_Team>Pixies</Home_Team>
            <Away_Team>Zombies</Away_Team>
            <Date>2012-02-25T09:00:00</Date>
        </Game>

        <Game status="Pending"> 
            <Home_Team>Zombies</Home_Team>
            <Away_Team>Pixies</Away_Team>
            <Date>2012-02-26T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Pixies</Home_Team>
            <Away_Team>Wombats</Away_Team>
            <Date>2012-02-27T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Wombats</Home_Team>
            <Away_Team>Pixies</Away_Team>
            <Date>2012-02-28T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Zombies</Home_Team>
            <Away_Team>Wombats</Away_Team>
            <Date>2012-02-04T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Wombats</Home_Team>
            <Away_Team>Zombies</Away_Team>
            <Date>2012-02-05T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Wombats</Home_Team>
            <Away_Team>Chickens</Away_Team>
            <Date>2012-02-07T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Chickens</Home_Team>
            <Away_Team>Wombats</Away_Team>
            <Date>2012-02-08T09:00:00</Date>
        </Game>
    </Schedule>

编辑：更简洁：

如何使用 JS 从 XML 文件中提取信息并以类似图表的格式显示在页面上？

我将如何为选择列表编写 if 语句，一旦选择了特定团队，它将填充一个不同的框（与上一段不同），其中包含与该团队有关的信息？

4

1 回答 1

1

你应该继续使用 jQuery 选择器：

例如：选择某个团队的所有游戏

var teamName = "Bluejays";
$(xml).find('Game > Home_Team:contains(' + teamName + '), Game > Away_Team:contains(' + teamName + )').each(function(){
  var date = $(this).siblings('Date').text();
  var status = $(this).parent().attr('status');
  });

有很多方法可以遍历你的xml，随心所欲，

针对xml解析问题：

  $.ajax({
    type: "GET",
    url: "../xml/sdf.xml",
    dataType: ($.browser.msie) ? "text" : "xml",
    success: parseXml
  });
  function  parseXml(xml)
    {
          if ($.browser.msie) {
            var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
            xmlDoc.loadXML(xml);
            xml = xmlDoc;
          } ...
于 2012-08-28T21:33:58.303 回答