如何把json的数据放入HTML中

-1

hi 我想知道如何把json的数据放到html中有没有标签或者什么，放在body下？如何把json的数据放入HTML中

 
`["book": 

     { 
     "title":"JavaScript, the Definitive Guide", 
     "publisher":"O'Reilly", 
     "author":"David Flanagan", 
     "cover":"/images/cover_defguide.jpg", 
     "blurb":"Lorem ipsum dolor sit amet, consectetuer adipiscing elit." 
      }, 


     { 
     "title":"DOM Scripting", 
     "publisher":"Friends of Ed", 
     "author":"Jeremy Keith", 
     "cover":"/images/cover_domscripting.jpg", 
     "blurb":"Praesent et diam a ligula facilisis venenatis." 
      }, 

     { 
     "title":"DHTML Utopia: Modern Web Design using JavaScript & DOM", 
     "publisher":"Sitepoint", 
     "author":"Stuart Langridge", 
     "cover":"/images/cover_utopia.jpg", 
     "blurb":"Lorem ipsum dolor sit amet, consectetuer adipiscing elit." 

    } 
]`

 
var xmlhttp; 
if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    {// code for IE6, IE5 

    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 

    var addrField = document.getElementById('myDiv'); 

    var card = eval('(' + xmlhttp.responseText + ')'); 
    addrField.value = card.places.place.name.value; 
    } 
    }; 

xmlhttp.open("GET","HTMLPage3.htm",true); 
xmlhttp.send();

来源

2011-05-19 cutexxbaby

您需要通过迭代数组的元素来生成HTML。如果你使用jQuery，有一个模板插件可以使这个简单。否则，你需要通过标准的JavaScript来完成。 – detaylor 2011-05-19 07:47:22

@Smirkin黄瓜我没有使用jQuery ....你的意思是迭代元素...因为我将在ajax中使用这个html url – cutexxbaby 2011-05-19 08:28:46

你有什么是不是有效的JSON。 book属性未正确定义。您可以使用<script>标记来存储这个HTML文档中，并确保你有固定的这个JSON或你可能会得到JavaScript错误：

<script type="text/javascript"> 
var books = [ 
    { 
     "title":"JavaScript, the Definitive Guide", 
     "publisher":"O'Reilly", 
     "author":"David Flanagan", 
     "cover":"/images/cover_defguide.jpg", 
     "blurb":"Lorem ipsum dolor sit amet, consectetuer adipiscing elit." 
    }, 
    { 
     "title":"DOM Scripting", 
     "publisher":"Friends of Ed", 
     "author":"Jeremy Keith", 
     "cover":"/images/cover_domscripting.jpg", 
     "blurb":"Praesent et diam a ligula facilisis venenatis." 
    }, 
    { 
     "title":"DHTML Utopia: Modern Web Design using JavaScript & DOM", 
     "publisher":"Sitepoint", 
     "author":"Stuart Langridge", 
     "cover":"/images/cover_utopia.jpg", 
     "blurb":"Lorem ipsum dolor sit amet, consectetuer adipiscing elit." 
    } 
]; 
</script>

现在，你可以通过这个数组中的元素循环：

for (var i = 0; i < books.length; i++) { 
    var book = books[i]; 
    alert(book.title); 
}

来源

2011-05-19 07:47:06

好吧...如果我必须使用ajax和这个json.html url我要把它放在xmlhttp.open（“GET”，“json.htm”，true）;我将能够检索标题和发布者...我如何编码它 – cutexxbaby 2011-05-19 08:01:37

@cutexxbaby，一旦你取得您可以使用eval方法将其转换为json对象：'var books = eval（xmlhttp.responseText）;'。然后，您可以循环显示我的答案中显示的“书籍”对象。 – 2011-05-19 08:22:09

@Darin Dimitrov可以告诉我怎么做？因为这是我做Ajax的时间，我从来没有学过 – cutexxbaby 2011-05-19 08:27:03

如何把json的数据放入HTML中

回答

相关问题