從URL獲取JSON數據並在HTML中顯示

我需要創建一個html頁面，該頁面從網站獲取json數據並顯示它。從URL獲取JSON數據並在HTML中顯示

目前我的代碼是這樣的，這顯然不按照我想要的方式完成工作，但我想要一個起點來顯示頁面中的信息。任何人都可以解釋我可以如何去做這件事？

<!DOCTYPE html> 
<html> 
<head> 
<script> 
function loadXMLDoc() 
{ 
var xmlhttp; 
(window.XMLHttpRequest) 
    { 
    xmlhttp=new XMLHttpRequest(); 
    } 

xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 
    } 
    } 
xmlhttp.open("GET","demo",true); 
xmlhttp.send(); 
} 
</script> 
</head> 
<body> 

<div id="myDiv"><h2>Click Button to display information!</h2></div> 
<button type="button" onclick="loadXMLDoc()">Change Content</button> 

</body> 
</html>

來源

2014-05-18 MeyJaX

所以這是你如何能做到這一點：

這個鏈接會告訴你如何操作更詳細：http://jsfiddle.net/9zfHE/8/

$(document).ready(function(){ 
    $("#button").click(function(){ 
    $.getJSON("http://example.com/",function(result){ 
     $.each(result, function(i, field){ 
     $("#myDiv").append("<tr id='bord'><td>"+i + "</td><td> " + field.name + "</td><td>" + field.description + "</td></tr>"); 
     }); 
    }); 
    }); 
});

此鏈接是你想按照它到底是什麼外觀：http://jsfiddle.net/9zfHE/10/

$(document).ready(function(){ 
    $("#button").click(function(){ 
    $.getJSON("http://example.com/",function(result){ 
     $.each(result, function(i, field){ 
     $("#myDiv").append("<h4>" + field.name + "</h4><p>" + field.description + "</p>"); 
     }); 
    }); 
    }); 
});

你必須使用AJAX &。 getJSON基本上從url中抓取字段的方法。然後我附加了一個從你的json到div的表格。

如果你添加更多的數據到你的json，那麼你可以通過field.[json-field-name]抓住它，並通過給它提供'id'給你任何樣式&然後在css中創建樣式。 i跟蹤json文件中元素的數量。

希望這有助於在

更多的文檔：http://api.jquery.com/jquery.getjson/

Ajax使用jQuery插件需要被嵌入到你的頁面的.getJSON方法工作。

[編輯：]這是您的HTML文件的樣子：

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> 
</script> 
<script> 
$(document).ready(function(){ 
    $("#button").click(function(){ 
    $.getJSON("http://example.com/",function(result){ 
     $.each(result, function(i, field){ 
     $("#myDiv").append("<h4>" + field.name + "</h4><p>" + field.description + "</p>"); 
     }); 
    }); 
    }); 
}); 
</script> 
</head> 
<body> 

<div id="myDiv"><h2>Click Button to display information!</h2></div> 
<input type="submit" id="button" value="Change Content"></input> 

<div></div> 
</body> 
</html>

來源

2014-05-18 03:02:43 fscore

哇！多謝老兄！我想我現在得到它：D – MeyJaX

我編輯了OP到我認爲應該用你的例子看它應該看起來（稍後將自己修改它），抱歉再次打擾你，但我仍然有點困惑最終的結果應該如何看待。 – MeyJaX

查看我的編輯請 – fscore

從URL獲取JSON數據並在HTML中顯示

回答

相關問題