使用AJAX和JSON填充媒體正文

我在使用JSON和Ajax獲取輸出來填充頁面時遇到了麻煩。我有一個網頁，其中看起來像這樣：使用AJAX和JSON填充媒體正文

<!DOCTYPE html> 
<html> 
<title>Some Title</title> 
<body onload="loadData();"> 
<div id="body-wrapper"> 
    <div class="preview-common"> 
    <div class="view-pane-common"> 
     <p class="save-hover">SAVE</p> 
     <img src="dummy-data/new-preview.png" alt="Some Image" class="view-image-common"> 
    </div> 
    <div class="info-pane-common"> 
     <a><span> Some Title </span></a> 
     <p><span> By Some user </span></p> 
    </div> 
    </div> 
</div> 
</body> 
</html>

class和id，因爲我有一個使用這些類名和ID樣式的頁面一個單獨的CSS文件是必需的。

我寫了一個腳本，它是這樣的：

function loadData() { 

    var mainElement=document.getElementById('body-wrapper'); 

    var request = new XMLHttpRequest(); 

    request.onreadystatechange = function(response) { 
    if (request.readyState === 4) { 
     if (request.status === 200) { 

     var jsonOptions = JSON.parse(request.responseText); 

     jsonOptions.forEach(function(item) ({ 

      var mainDiv = document.createElement('div'); 
      mainDiv.className = "preview-common"; 

      mainDiv.forEach(function(item)({ 
      var firstDiv=document.createElement('div'); 
      firstDiv.className = "view-pane-common"; 

      var secondDiv = document.createElement('div'); 
      secondDiv.className="info-pane-common"; 

      firstDiv.forEach(function(item) ({ 
       var saveHover = document.createElement('p'); 
       saveHover.className = "save-hover"; 
       saveHover.innerHTML = "SAVE"; 

       var imgElement = document.createElement('img'); 
       imgElement.className = "view-image-common"; 
       imgElement.alt = 'Some Image'; 
       imgElement.src = "dummy-data/" + item.filename; 

       firstDiv.appendChild(saveHover); 
       firstDiv.appendChild(imgElement); 
      }); 

      secondDiv.forEach(function(item) ({ 
       var aElement = document.createElement('a'); 
       var firstSpan = document.createElement('span'); 
       var pElement = document.createElement('p'); 
       var secondSpan = document.createElement('span'); 

       firstSpan.innerHTML = item.title; 
       secondSpan.innerHTML = item.owner; 

       aElement.appendChild(firstSpan); 
       pElement.appendChild(secondSpan); 
       secondDiv.appendChild(aElement); 
       secondDiv.appendChild(pElement); 
      }); 

      mainDiv.appendChild(firstDiv); 
      mainDiv.appendChild(secondDiv); 
      }); 
      mainElement.appendChild(mainElement); 
     }); 
     } 
    } 

    request.open('GET', 'json-data/site-data.json', true); 
    request.send(); 
    } 
}

這裏所指向的JSON文件是在路徑「JSON數據/站點data.json」和所有的媒體在路徑「dummy-數據/」相對於index.html的

的JSON看起來是這樣的：

[ 
    {"filename":"preview_1.gif","owner":"Sam", "title": "First Drawing"}, 
     {"filename":"preview_2.gif","owner":"Alex", "title": "Second Drawing"}, 
     {"filename":"preview_3.gif","owner":"Han", "title": "Third Drawing"}, 
     {"filename":"preview_4.gif","owner":"Tyler", "title": "Another Drawing"}, 
     {"filename":"preview_5.gif","owner":"Jane", "title": "First Painting"}, 
     {"filename":"preview_6.gif","owner":"Jack", "title": "Canvas"}, 
     {"filename":"preview_7.gif","owner":"Tony", "title": "Drawing"}, 
     {"filename":"preview_8.gif","owner":"Peter", "title": "Yet Another Drawing"}, 
     {"filename":"preview_9.gif","owner":"Stan", "title": "Sketch"}, 
     {"filename":"preview_10.gif","owner":"Steve", "title": "Second Drawing"}, 
     {"filename":"preview_11.gif","owner":"Logan", "title": "Fancy Icon"}, 
     {"filename":"preview_12.gif","owner":"Charles", "title": "Fancy Photo"}, 
     {"filename":"preview.gif","owner":"Lucy", "title": "Some Sketch"}, 
     {"filename":"new_preview.png","owner":"Drake", "title": "Tenth Cavas"}, 
     {"filename":"preview.png","owner":"Terence", "title": "Last Photo"}, 
]

我沒有得到任何輸出，並沒有能夠理清什麼是錯的。有人可以幫我解釋一下工作解決方案。謝謝。

來源

2017-02-09 codeAndCoffee

如果你的文件被稱爲「site-data.json」，那麼你爲什麼試圖獲得'html-elements.json'？ – gpgekko

嘿，路徑是json-data/site-data.json。但它仍然不起作用。 – codeAndCoffee

@codeAndCoffee你的示例代碼調用'request.open（'GET'，'html-elements.json'，true）;'。如果您將其更改爲正確的網址並仍然存在問題，請修改該問題，以便我們瞭解您採取了哪些步驟。此外，如果您使用request.response而不是request.responseText，則不必執行JSON.parse。 – ADyson

這充滿了語法錯誤和邏輯問題，因爲實際上很難確定你希望實現什麼。

但這裏是沒有錯誤的版本，那麼至少產生一些輸出，希望這類似於你在找什麼：

jsonOptions.forEach(function(item) { 

     var mainDiv = document.createElement('div'); 
     mainDiv.className = "preview-common"; 

     var firstDiv=document.createElement('div'); 
     firstDiv.className = "view-pane-common"; 

     var secondDiv = document.createElement('div'); 
     secondDiv.className="info-pane-common"; 

      var saveHover = document.createElement('p'); 
      saveHover.className = "save-hover"; 
      saveHover.innerHTML = "SAVE"; 

      var imgElement = document.createElement('img'); 
      imgElement.className = "view-image-common"; 
      imgElement.alt = 'Some Image'; 
      imgElement.src = "dummy-data/" + item.filename; 

      firstDiv.appendChild(saveHover); 
      firstDiv.appendChild(imgElement); 

      var aElement = document.createElement('a'); 
      var firstSpan = document.createElement('span'); 
      var pElement = document.createElement('p'); 
      var secondSpan = document.createElement('span'); 

      firstSpan.innerHTML = item.title; 
      secondSpan.innerHTML = item.owner; 

      aElement.appendChild(firstSpan); 
      pElement.appendChild(secondSpan); 
      secondDiv.appendChild(aElement); 
      secondDiv.appendChild(pElement); 

     mainDiv.appendChild(firstDiv); 
     mainDiv.appendChild(secondDiv); 

     mainElement.appendChild(mainDiv); 
});

的問題有：

首先，每一個的forEach有一個額外的開頭語句中的括號，例如

jsonOptions.forEach(function(item) ({

應該是

jsonOptions.forEach(function(item) {

最後左托架被移除。

其次，forEach只是對數組有效的操作。 Div元素不是數組，因此對它們做forEach是沒有意義的，並導致運行時錯誤。很難看出這些循環的目的是什麼，即使它們是有效的。你想循環這些div的子元素嗎？這將有一些邏輯，除了這些都是新元素，並且在創建循環的位置沒有任何孩子。所以我刪除了所有forEach的div。這裏是的forEach的文檔，以供參考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

第三，

mainElement.appendChild(mainElement);

，因爲你試圖元素追加到自身拋出一個錯誤。我認爲這是一個錯字，你的意思是：

mainElement.appendChild(mainDiv);

來源

2017-02-09 14:30:46 ADyson

顯然，我的問題是語法錯誤。代碼現在正在工作。謝謝！ – codeAndCoffee

使用AJAX和JSON填充媒體正文

回答

相關問題