Question

我在使用JSON和Ajax填充页面时遇到问题。我有一个看起来像这样的页面：

<!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>

类和id是必需的，因为我有一个单独的CSS文件，它使用这些类名和id来设置页面的样式。

我写了一个看起来像这样的脚本：

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 / site-data.json'，所有媒体都在路径'dummy-data /'相对于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"},
]

我没有得到任何输出，也无法解决出错的问题。有人可以帮我解决一个有效的解决方案。感谢。

Answer 1

这充满了语法错误和逻辑问题，实际上很难确定你希望实现的目标。

但这是一个无错误的版本，至少可以产生一些输出，希望这类似于你想要的：

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的子元素吗？这将有一些逻辑，除了这些都是新元素，并且在创建循环时没有任何子元素。所以我删除了div上的所有forEach。以下是forEach的文档，供参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

第三，

mainElement.appendChild(mainElement);

因为您尝试将元素附加到自身而引发错误。我认为这是一个错字，你的意思是：

mainElement.appendChild(mainDiv);

使用AJAX和JSON使用媒体填充正文

1 个答案: