如何把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中

回答

相關問題