運行ajax請求時無法將內部html設置為null？

Question

嗨，我正在嘗試將兩個data.html文件插入到兩個不同的html文件中（根本不是此處的單擊事件）。 我想要的只是我的data.html結構保持不變，但是我的網站模板會不時更改，只需通過ajax xhr請求調用data.html即可插入其內容。 我運行了以下代碼，它僅適用於data-two.html中的一個數據，但對於第一個數據，則不加載任何內容。

這是js文件

var xhr = new XMLHttpRequest();                 
xhr.onload = function() {                       
if(xhr.status === 200) {                     
document.getElementById('content').innerHTML = xhr.responseText;
document.getElementById('content1').innerHTML = xhr.responseText;
}
};

xhr.open('GET', 'data/data-one.html', true);      
xhr.open('GET', 'data/data-two.html', true);
xhr.send(null);

這實際上是兩個文件的主要html，但作為示例，我包括其中一個（第二個類似的html文件僅具有不同的content id，即content1：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>JavaScript &amp; jQuery - Chapter 8: Ajax &amp; JSON - Loading HTML</title>
    <link rel="stylesheet" href="css/c08.css" />
  </head>
  <body>
  <nav>
    <ul>
      <li><a href="article-1.html">Article One</a></li>
      <li><a href="article-2.html">Article Two</a></li>
    </ul>
  </nav>
    <h2>title</h2>
    <section id="content"></section>

    <script src="js/data-html.js"></script>

  </body>
</html>

這是data-one.html文件

<div>
<p>some constant text</p>
</div>

這是data-two.html文件

<div>
<p>some other constant text</p>
</div>

數據html文件永遠不會更改，這就是為什么我需要它們像這樣，但是隨着網站模板的更改，這種方式下，我只需要通過引用ID來調用data.html的內容。 當我運行代碼時，出現錯誤，我無法將innerHTML設置為null，但很可笑，它確實適用於一個鏈接，但不適用於另一個鏈接。 我希望我能解釋清楚。 請提出任何建議。 謝謝

Answer 1

您不能使用相同的XMLHttpRequest對象同時調用兩個不同的事物。 創建兩個XMLHttpRequest對象，並讓它們的onload事件執行每個事件所需的操作。

運行ajax請求時無法將內部html設置為null？

問題描述

1 個解決方案

解決方案1
1 2015-11-25 12:39:46

運行ajax請求時無法將內部html設置為null？

問題描述

1 個解決方案

解決方案1 1 2015-11-25 12:39:46

解決方案1
1 2015-11-25 12:39:46