Question

我有一个html页面，可以从网站上检索JSON数据，然后在点击按钮时在页面上显示它。我想要做的是将所有数据包含在一个包含滚动条的框中，如果内容太大的话。我知道如何获取JSON数据，我知道如何显示它，但我的问题是我无法弄清楚如何将它添加到页面上的“mydiv”框而不是仅仅将其附加到页面的末尾本身。我知道我可能忽略了一些非常简单的东西，但我对JavaScript很陌生，我花了一整天的时间来尝试让它工作，没有任何结果。

<html>
<head>
<title>JSON scroller</title>
<script>

function dataget()
{
request= new XMLHttpRequest();
request.open("GET","http://example.com/example.json",true);
request.onreadystatechange=function()
    {
        if(request.readyState==4 && request.status==200)
        {
            alert(request.responseText);
            reply=JSON.parse(request.responseText);
            new_nodes(reply);
        }
    }
request.send()
}
function new_nodes(nodes)
{
    var i
    for(i=0;i<nodes.length;i++)
        new_node(nodes[i]);
}
function new_node(node)
{
    var sec=document.createElement("section");
    var head=document.createElement("h2");
    var par=document.createElement("p");
    sec.appendChild(head);
    sec.appendChild(par);
    head.appendChild(document.createTextNode(node.title));
    par.appendChild(document.createTextNode(node.summary));
    document.body.appendChild(sec)
}
</script>
<body>

<div id="myDiv" style="height:50%;width:50%;border:1px solid #ccc;overflow:auto;"> 
<input id="clickMe" type="button" value="clickme" onclick="dataget();" />
</div> 

</body>
</html>

我很确定我需要做的只是更改'new_node'函数的追加并创建代码以涉及'mydiv'，但我所做的每一次更改都会导致相同的结果并附加数据对身体或根本没有结果。无论是那个还是我一直都完全离开了。任何帮助都将非常感激。

修改

这就是JSON文件的内容

[
{ "title": "book1",
      "summary": "A fantasy novel set in medieval times." },
{ "tile": "Book2",
  "summary": "A scifi novel set on another planet."}
]

Answer 1

如果你喜欢这个，那就更好了

function new_node(node)
{
    var sec=document.createElement("section");
    var head=document.createElement("h2");
    var par=document.createElement("p");
    sec.appendChild(head);
    sec.appendChild(par);
    head.appendChild(document.createTextNode(node.title));
    par.appendChild(document.createTextNode(node.summary));
    //document.body.appendChild(sec);
    document.getElementById('myDiv').innerHTML =  sec ;
}
<input id="clickMe" type="button" value="clickme" onclick="dataget();" />
<div id="myDiv" style="height:50%;width:50%;border:1px solid #ccc;overflow:auto;"> 
</div>

Answer 2

您要做的是将myDiv html设置为等于您的JSON。

document.getElementById("myDiv").innerHTML = "whatever";

如果除了显示它之外你不需要对JSON做任何事情，你可以改变它：

function new_node(node)
{
  var sec=document.createElement("section");
  var head=document.createElement("h2");
  var par=document.createElement("p");
  sec.appendChild(head);
  sec.appendChild(par);
  head.appendChild(document.createTextNode(node.title));
  par.appendChild(document.createTextNode(node.summary));
  document.body.appendChild(sec)
}

对此：

    function new_node(node)
{
  var sec=document.createElement("section");
  var head=document.createElement("h2");
  var par=document.createElement("p");
  sec.appendChild(head);
  sec.appendChild(par);
  head.appendChild(document.createTextNode(node.title));
  par.appendChild(document.createTextNode(node.summary));
  document.getElementById("myDiv").appendChild(sec)
}

编辑以更好地反映OP意图。

将JSON数据传递到div框中

2 个答案: