Question

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

将数据类型：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中所述。只要请求失败，就会调用此functjon。

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

现在，既然您可以从XML Validator以及error回调中清楚地看到您的XML文件已损坏。要解决这个问题，您必须创建一个根节点，如<schools>，并将其包含在整个现有XML中。现在，您可以根据需要嵌入尽可能多的<k12School>个标记。

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

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

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

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

在HTML表格中显示XML文件数据

2 个答案: