使用AJAX和JSON使用媒体填充正文
使用AJAX和JSON使用媒体填充正文
提问于 2017-02-09 21:00:56
我在使用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‘，所有媒体位于相对于index.html的路径'dummy-data/’
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"},
]我没有得到任何输出，也不能找出哪里出了问题。谁能帮我一个有效的解决方案和解释。谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-02-09 22:30:46
这充满了语法错误和逻辑问题，以至于实际上很难确定您希望实现的目标。
但这里有一个没有错误的版本，它至少会产生一些输出，希望这类似于您正在寻找的内容：
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);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42137446
复制相关文章
相似问题
腾讯云开发者
