在 HTML table 中显示 XML 文件数据

Question

每当我运行我的代码时，table headers 就会出现，但不会 table 数据。我认为我的 XML 文件可能无法正确加载。我正在尝试将我的 XML 文件放入 HTML table。我看代码的时间太长了，这也是我第一个使用/编写 XML 文件的项目，所以我想知道是否其他人可以看出我的代码可能有什么问题。我的 XML 文件和 HTML 文件都在同一个文件夹中。

这是我的 XML:

<!-- School Number 1 -->

<k12School>
    <identification>
        <schoolId>0421</schoolId>
        <name>Eastside High School</name>
        <organizationType>K12School</organizationType>
    </identification>
    <directory>
        <gradesOfferedList>
            <gradesOffered xlmns="https://ceds.ed.gov/cedselementdetails.aspx?termid=3131">"09"/"10"/"11"/"12"</gradesOffered>
        <gradesOfferedList>
    </directory>
    <addressList>
        <address>
            <street>
                <line1>1201 SE 43rd St</line1>
            </street>
            <city>Gainsville</city>
            <stateProvince>FL</stateProvince>
            <postalCode>32641</postalCode>
            <county>Alachua</county>
        </address>
    </addressList>
    <school>
        <reference>
            <NCESID>101023234576</NCESID>
        </reference>
    </school>

</k12School>

<!-- School Number 2 -->

<k12School>
    <identification>
        <schoolId>0591</schoolId>
        <name>Oak View Middle School</name>
        <organizationType>K12School</organizationType>
    </identification>
    <directory>
        <gradesOfferedList>
            <gradesOffered xlmns="https://ceds.ed.gov/cedselementdetails.aspx?termid=3131">"06"/"07"/"08"</gradesOffered>
        <gradesOfferedList>
    </directory>
    <addressList>
        <address>
            <street>
                <line1>1203 SW 250th St</line1>
            </street>
            <city>Newberry</city>
            <stateProvince>FL</stateProvince>
            <postalCode>32669</postalCode>
            <county>Alachua</county>
        </address>
    </addressList>
    <school>
        <reference>
            <NCESID>977765431110</NCESID>
        </reference>
    </school>

</k12School>

<!-- School Number 3 -->

<k12School>
    <identification>
        <schoolId>0400</schoolId>
        <name>FLVS Full-Time 9-12</name>
        <organizationType>K12School</organizationType>
    </identification>
    <directory>
        <gradesOfferedList>
            <gradesOffered xlmns="https://ceds.ed.gov/cedselementdetails.aspx?termid=3131">"09"/"10"/"11"/"12"</gradesOffered>
        <gradesOfferedList>
    </directory>
    <addressList>
        <address>
            <street>
                <line1>2145 Metrocenter Blvd</line1>
            </street>
            <city>Orlando</city>
            <stateProvince>FL</stateProvince>
            <postalCode>32835</postalCode>
            <county>Orange</county>
        </address>
    </addressList>
    <school>
        <reference>
            <NCESID>900000212001</NCESID>
        </reference>
    </school>

</k12School>

这是我的 HTML/Script:

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(function(){
    $.ajax({
        type: "GET",
        url: "Schools.xml",
        dataType: "xml",
        success: function(xml){
            $(xml).find('identification').each(function(){
                var schoolID = $(this).find('schoolID').text();
                var name = $(this).find('name').text();
                var organizationType = $(this).find('organizationType').text();
                $('<tr></tr>').html('<th>' +schoolID+ '</th><td>$' +name+ '</td><td>$' +organizationType+ '</td>').appendTo('#school_data');
            });
        }
    });
});

</script>


<table id = "school_data">
    <tr><th>schoolID</th><th>name</th><th>organizationType</th><th>gradesOffered</th><th>street>line1</th><th>city</th><th>stateProvince</th><th>postalCode</th><th>county</th><th>NCESID</th>
</tr>
</table>

Answer 1

将datatype:xml改为Html

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <style>

  </style>
</head>
<body>
  <table id = "school_data">
  <tr><th>schoolID</th><th>name</th><th>organizationType</th><th>gradesOffered</th><th>street>line1</th><th>city</th><th>stateProvince</th><th>postalCode</th><th>county</th><th>NCESID</th>
  </tr>
  </table>

  <script>
     $(document).ready(function(){
           $.ajax({
               type: "GET",
               url: "schools.xml",
               dataType: "html",
               success: function(xml){
                 console.log("here");$
                   $(xml).find('identification').each(function(){
                       var schoolID = $(this).find('schoolID').text();
                       var name = $(this).find('name').text();
                       var organizationType = $(this).find('organizationType').text();
                       $('<tr></tr>').html('<th>' +schoolID+ '</th><td>$' +name+ '</td><td>$' +organizationType+ '</td>').appendTo('#school_data');
                   });
               }
           });
   });
  </script>

</body>
</html>

Answer 2

您的代码中有一些小问题您可能想先更改。

首先，schools.xml 文件中有一些错误。您忘记关闭某些标签，在本例中为 <gradesOfferedList>.

使用 XML validator over at W3Schools 验证您的 XML 个文件。

其次，始终确保将 <?xml version="1.0" encoding="UTF-8"?> 添加为 XML 文件的第一行，以防止任何编码错误。

第三，作为个人旁注，为了清楚起见，使用 $(document).ready(function(){}) 而不是 $(function()).

现在对于实际的 jQuery AJAX 调用，我对其进行了一些修改，以便更好地调试它。看看：

<script>
    $(document).ready(function(){
        console.log("Golly, we're verifying that jQuery is working on page-load");

        $.ajax({
            type: "GET",
            url: "schools.xml",
            dataType: "xml",
            complete: function(xml){
                console.log('Yes, we did finish loading the XML file.')

                console.log(xml);

                $(xml).find('identification').each(function(){
                    console.log('Iterating through the XML tags');

                    var schoolID = $(this).find('schoolID').text();
                    var name = $(this).find('name').text();
                    var organizationType = $(this).find('organizationType').text();
                    $('<tr></tr>').html('<th>' +schoolID+ '</th><td>$' +name+ '</td><td>$' +organizationType+ '</td>').appendTo('#school_data');
                });
            },
            error: function(errorData){
                console.log('Error: request failed!');
                console.log(errorData);
            }
        });
    });
</script>

如您所见，我添加了一个错误回调，如 jQuery AJAX documentation 中指定的那样。每当请求失败时都会调用此函数。

您会注意到的另一个变化是 success 参数已被 completed 取代。现在您实际上可以从回调中看到 console.log() 调用，因为无论请求是否失败，complete 参数都会使用其回调。

现在您可以从 XML 验证器和 error 回调中清楚地看到您的 XML 文件已损坏。要解决这个问题，您必须创建一个根节点，例如 <schools> 并将其包裹在整个现有的 XML 周围。现在您可以嵌入任意数量的 <k12School> 标签。

<schools>
    <k12school>
        <identification>
        </identification>
    </k12school>

    <k12school>
        <identification>
        </identification>
    </k12school>

    <k12school>
        <identification>
        </identification>
    </k12school>
</schools>

您现在可以再次将 success 参数取回您的 AJAX 调用，因为您不再需要使用 complete 进行调试。

在 HTML table 中显示 XML 文件数据

Displaying XML file data in a HTML table

html

xml

html-table