使用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填充媒体正文

回答

相关问题