如何使用 JQuery 解析 XML 文件以更新 HTML 表答案

【问题标题】：How To Parse XML Files Using JQuery To Update A HTML Table如何使用 JQuery 解析 XML 文件以更新 HTML 表
【发布时间】：2012-02-12 15:52:07
【问题描述】：

我需要解析特定格式的 XML 文件，然后确定主队或客队获胜，然后将 3 或 1 分分配给由结果确定的 HTML 表（总分列），我会更喜欢使用 JQuery 来执行此操作。

results.xml 代码：

<?xml version="1.0"?>
<title>Results</title>
  <results>
    <result id="1234">
      <hometeam>
        <name>Roma</name>
        <score>2</score>
      </hometeam>
      <awayteam>
        <name>Lazio</name>
        <score>0</score>
      </awayteam>
  </result>
</results>

HTML 代码：

<table id="table">
<th>Team</th>
<th>Played</th>
<th>Won</th>
<th>Drawn</th>
<th>Lost</th>
<th>Total Goals</th>
<th>Overall Points</th>

<tr>
<td>Roma</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>Lazio</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>Inter</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>Milan</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
</table>

JQuery 代码：

function showData() {
$.ajax({
type: "GET",
url: "results.xml",
dataType: "xml",

这就是我到目前为止的所有 JQuery 代码。

计算结果的计算会去哪里？

if (hometeam score > awayteam score)
{ add 3 to hometeams Overall Points}
else if (hometeam score = awayteam score)
{ add 1 to hometeams Overall Points and add 1 to awayteams Overall Points}
else 
{ add 3 to awayteams Overall Points}

我将如何评估主队和客队的得分并在 HTML 表格中更新正确的球队？

感谢您的帮助。

【问题讨论】：

标签： javascript jquery html xml ajax

【解决方案1】：

当然，您可以使用 javascript 来解析 xml，例如使用 jQuery 的 parseXML 函数。 http://api.jquery.com/jQuery.parseXML/

但是，这可能会很慢，因为每次最终用户访问您的页面时，您都必须解析一个大文件。 XML 文件往往很大。

我会先将 XML 转换为 JSON 或数据库行。

PHP 有一个名为 Simple XML Parser 的库，它随大多数发行版一起提供。界面非常简单。 Python 还有一个名为 lxml 的丰富库来解析 XML。

当然，如果你真的想用 javascript 解析 XML，我认为这个问题很有帮助。 Paging Through XML Data Using jQuery and HTML

【讨论】：

【解决方案2】：

当你比较你的 ajax 调用时

$.ajax({
type: "GET",
url: "results.xml",
dataType: "xml",

对于jquery documentation 中的示例，您会看到缺少的内容。以下是您的通话内容：

$.ajax({
  url: "results.xml",
  dataType: "xml",
  type: "GET",
  success: function(data){
    // do something with data
  }
});

您需要指定一个函数，如果数据成功返回，该函数将被调用。在上面的示例中，该函数是一个匿名函数。您也可以使用普通功能有一个名字：

function handle_success(data){
    // do something with data
}

$.ajax({
  url: "results.xml",
  dataType: "xml",
  type: "GET",
  success: handle_success
});

但要注意 AJAX 中的 A：它代表异步。意思是：您的成功函数将在以后调用，甚至永远不会调用。在 ajax 调用之后，您的程序的其余部分照常继续。

【讨论】：