在HTML表中显示XML文件数据 [英] Displaying XML file data in a HTML table

问题描述

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

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:

<!-- 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/脚本:

Here is my 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>

推荐答案

您可能需要首先更改代码中的一些小问题.

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

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

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

在W3Schools使用 XML验证器来验证XML文件.

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

第二，请务必确保将<?xml version="1.0" encoding="UTF-8"?>添加为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.

第三，作为个人注释，为清楚起见，请使用$(document).ready(function(){})代替$(function()).

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

现在，对于实际的jQuery AJAX调用，我对其进行了一些重做，以便对其进行更好的调试.看看:

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

<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文档中所述.每当请求失败时，都会调用此函数.

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.

您将注意到的另一个变化是success参数已由completed代替.现在，您实际上可以从回调中看到console.log()调用，因为complete参数使用其回调，而不管请求是否失败.

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.

现在，由于您可以从XML验证程序和error回调中清楚地看到，因此您的XML文件已损坏.要解决此问题，您必须创建一个根节点，例如<schools>，并将其包装在整个现有XML周围.现在，您可以根据需要嵌入任意多个<k12School>标签.

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.

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

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

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

由于您不再需要使用complete进行调试，因此您现在可以再次将success参数重新带回AJAX调用中.

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

这篇关于在HTML表中显示XML文件数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！