在HTML表中显示XML文件数据

Whenever I run my code, the table headers appear, but not the table data. I think my XML file may not be loading correctly. I am trying to put my XML file into an HTML table. I've been looking at the code too long and this is also my first project using/ writing XML files so I was wondering if someone else could see what could be wrong with my code. My XML file & HTML file are both in the same folder.

每当我运行我的代码时,都会显示表头,但不会显示表数据。我认为我的XML文件可能无法正确加载。我试图将我的XML文件放入HTML表格。我一直在查看代码太久了,这也是我第一个使用/编写XML文件的项目,所以我想知道是否有其他人可以看到我的代码可能出错。我的XML文件和HTML文件都在同一个文件夹中。

Here is my XML:

这是我的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>

Here is my HTML/Script:

这是我的HTML /脚本:

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

2 个解决方案

#1

There are a couple of minor things with your code you might want to change first.

您可能希望首先更改代码中的一些小问题。

First off, you have some errors in schools.xml file. You forgot to close some tags, in this case <gradesOfferedList>.

首先,您在schools.xml文件中有一些错误。你忘了关闭一些标签,在这种情况下是。

Use the XML validator over at W3Schools to validate your XML files.

在W3Schools上使用XML验证器来验证XML文件。

Second, always make sure to add <?xml version="1.0" encoding="UTF-8"?> as the first line of your XML files, to prevent any encoding errors.

其次,始终确保将添加为XML文件的第一行,以防止出现任何编码错误。

Third, just as a personal side note, use $(document).ready(function(){}) for clarity sake, instead of $(function()).

第三,就个人注意事项而言,为清晰起见,使用$(document).ready(function(){})而不是$(function())。

Now for the actual jQuery AJAX call, I reworked it a little bit in order to debug it a little better. Take a look:

现在对于实际的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>

As you can see I added an error callback, as specified in the jQuery AJAX documentation. This functjon will be called whenever the request fails.

正如您所看到的,我添加了一个错误回调,如jQuery AJAX文档中所指定的那样。只要请求失败,就会调用此functjon。

The other change you will notice is that the success parameter has been subsituted by completed. Now you can actually see the console.log() calls from within the callback, because the complete parameter uses its callback regardless of whether the request failed or not.

您将注意到的另一个更改是,success参数已由completed完成。现在,您实际上可以在回调中看到console.log()调用,因为无论请求是否失败,complete参数都会使用其回调。

Now since you can clearly see from both the XML Validator as well as the error callback is that your XML file is corrupt. To fix that, you'll have to create a root node, like <schools> and wrap that around the whole of your exisiting XML. Now you can embed as many <k12School> tags as you want.

现在,既然您可以从XML Validator以及错误回调中清楚地看到您的XML文件已损坏。要解决这个问题,你必须创建一个根节点,比如 ,并将其包装在整个现有XML中。现在,您可以根据需要嵌入任意数量的标签。

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

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

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

You can now take back the success parameter into your AJAX call again, since you don't need to debug with complete anymore.

您现在可以再次将success参数收回到AJAX调用中,因为您不再需要使用complete进行调试。

#2

Change the datatype:xml to Html

将数据类型: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>

#1