Javascript 从JSON构建HTML（无jQuery）

我试图从url或本地文件获取数据，并将其显示在div中。我试图把数据输入我的div，但不知道怎么做？那么到目前为止，我的代码是：

JS

var HttpClient = function() {
    this.get = function(aUrl, aCallback) {
        var anHttpRequest = new XMLHttpRequest();
        anHttpRequest.onreadystatechange = function() { 
            if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200)
                aCallback(anHttpRequest.responseText);
        }

        anHttpRequest.open( "GET", aUrl, true );            
        anHttpRequest.send( null );
    }
}


var url = new HttpClient();
url.get('https://jsonplaceholder.typicode.com/posts', function(response) {

});

数据的HTML结构：带span的四列布局

 <div class="inside">
          <div class="sml_image"></div>
          <p class="title"></p>
          <p class="sub"></p>
          <p class="body"></p>
     </div>

虽然我在该json中没有看到任何图像url，但我将id放在了类为

的div中。image

，我已经为您提供了一个如何实现它的示例。您可以这样做，使用

JSON.parse

将响应字符串转换为对象、循环和

innerHMTL

：

var HttpClient=function（）{
this.get=函数（aUrl、aCallback）{
var anHttpRequest=newxmlhttprequest（）；
anHttpRequest.onreadystatechange=函数（）{
如果（anhtprequest.readyState==4&&anhtprequest.status==200）
aCallback（anhtprequest.responseText）；
}
anhtprequest.open（“GET”，aUrl，true）；
anHttpRequest.send（空）；
}
}
var url=newhttpclient（）；
url.get（'https://jsonplaceholder.typicode.com/posts，函数（响应）{
var json=json.parse（响应）；
for（var x=0；x'+json[x].title+'
'+json[x].body+'
'；
}
});
解析JSON并设置循环来构造HTML：


var HttpClient=function（）{
this.get=函数（aUrl、aCallback）{
var anHttpRequest=newxmlhttprequest（）；
anHttpRequest.onreadystatechange=函数（）{
如果（anhtprequest.readyState==4&&anhtprequest.status==200）
aCallback（anhtprequest.responseText）；
}
anhtprequest.open（“GET”，aUrl，true）；
anHttpRequest.send（空）；
}
}
var url=newhttpclient（）；
url.get（'https://jsonplaceholder.typicode.com/posts，函数（响应）{
/*答复*/
var items=JSON.parse（响应）；
var container=document.getElementById（'container'）；
items.forEach（功能（项目）{
var div=新元素（'div'）；
div.appendChild（新元素（'p'，'title'，item.title））；
div.appendChild（新元素（'p'，'body'，item.body））；
子容器（div）；
})
/*结束回答*/
});
函数新元素（标记、类名、内容）{
var el=document.createElement（标记）；
如果（className）el.className=className；
如果（content）el.innerHTML=content；
返回el；
}
如何将数据放入不同的div中？在我的json url中有一个图像。而不仅仅是容器。我想把它换成不同的。目前它只装进集装箱。但我希望冠军能进入决赛，其他的都像埃奇索里一样，我没有否决答案，也许是因为我弄错了，你说的不同的div是什么意思。已经创建了多个div。你的意思是像你想让所有的标题进入一个单独的div和class
title
，所有的body结果进入一个单独的元素和class
body
？是的，就是这样，请不要对真正回答你问题的答案投反对票。我没有投反对票，可能是因为错误