我的 .xml 文件中的内容有时会在我加载时出现在我的网页上，但当我刷新时，它会消失。 (javascript, jquery, ajax, xml)

Question

在这个项目中，我正在为 contact.html 文件创建一个 contact.js 文件，它将从 listings.html 文件中提取数据并将其全部内容附加到 aboutUs div 在 contact.html 页面。我编写了一个函数，使 listings.html 文件中的内容出现在 contact.html 文件中。

此外，在 contact.js 文件中，我编写了一个函数，将 realtors.xml 文件的所有内容附加到 listings.html 文件内容的正下方 aboutUs div 在 contact.html 页面。我的功能有效，但有时当我加载 contact.html 网页时，它会显示 realtors.xml 文件的内容，但有时它不会出现。另一方面，listings.html 文件的内容总是在我加载它时出现在我的网页上。有时我必须刷新我的网页两次或三次才能显示 realtors.xml 文件的内容，而其他时候，在刷新网页 5 次后 realtors.xml 文件的内容仍然出现排。我希望每次加载网页时 realtors.xml 文件的内容始终出现在我的网页上，但有时会出现这种情况。

我做错了什么？

我正在使用 contact.html 文件、contact.js 文件、realtors.xml 文件和 listings.html 文件（以及 jquery 文件（https://code.jquery.com/jquery-3.1.0.min.js)).

我的 contact.html 文件是这样的：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <title>Real Estate Sold</title>
            <link rel="stylesheet" type="text/css" href="listing.css" />
            <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
            <script type="text/javascript" src="contact.js"></script>
        </head>
        <body>
            <nav class="main-navigation" role="navigation">
                <div>
                    <ul id="menu-main-menu" class="nav-menu">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="index.html">Regional Info</a></li>
                        <li><a href="index.html">Current Listings</a></li>
                        <li><a href="#">Sold</a></li>
                        <li><a href="index.html">About Us</a></li>
                    </ul>
                </div>
            </nav>
         <div id="aboutUs"></div>
     </body>
 </html>

我的 contact.js 文件是这样的：

 $("document").ready(function() {
        getData();
        getXMLData();
      });

      function getData() {
        $("#aboutUs").load("listings.html");
      }

  function getXMLData() {
        $.get("realtors.xml", function(result) {
            var phone = result.getElementsByTagName("phone")[0];
            var name = result.getElementsByTagName("name")[0];
            var realtor = name.firstChild.nodeValue + " : " + phone.firstChild.nodeValue;
            var phone1 = result.getElementsByTagName("phone")[1];
            var name1 = result.getElementsByTagName("name")[1];
            var para = document.createElement("P");                     
            var t = document.createTextNode(realtor1);      
            var realtor1 = name1.firstChild.nodeValue + " : " + phone1.firstChild.nodeValue;
            $("#aboutUs").append(realtor);
            $("#aboutUs").append(para).append(realtor1);
        });
      }

我的 listings.html 文件是这样的：

<h2>About Us</h2>
<p> Wright Realty is a family owned real estate brokerage specializing in custom homes since 1852.  
    We appreciate that our customers demand quality that endures for generations, so we only
    list with homeowners who have maticulously maintained their unique and timeless homes.
</p>
<h3>Our Realtors:</h3>
<ul></ul>

我的realtors.xml文件是这样的：

<data>
    <name>Frank Lloyd</name>
    <phone>555-123-4567</phone>
    <name>Lloyd Wright</name>
    <phone>555-123-8910</phone>
</data>

Answer 1

我认为问题在于 realtors.xml 的（异步）处理可能发生在 listings.html 的加载之前，并且可能被它覆盖。

您必须：

在 listings.html 加载完成后调用 getXMLData()，方法是将其作为 complete 回调（参见 http://api.jquery.com/load/）或
创建两个不同的 div 来放置内容，这样先加载什么就无所谓了。

第一种方法如下所示：

  $("document").ready(function() {
    getData();
  });

  function getData() {
    $("#aboutUs").load("listings.html", getXMLData);
  }

我的 .xml 文件中的内容有时会在我加载时出现在我的网页上，但当我刷新时，它会消失。 (javascript, jquery, ajax, xml)

The contents from my .xml file sometimes appears on my webpage when I load it, but when I refresh, it disappears. (javascript, jquery, ajax, xml)

javascript

xml

jquery

webpage