將API響應數據保存爲HTML元素

我有一個帶有JavaScript的html文件。我也有一個URL，打開時只是一個包含來自使用AWS API Gateway製作lambda API的AWS lambda API調用數據的頁面。該頁面看起來像一個完全空白的頁面時，它奠定了類似的數據加載，將API響應數據保存爲HTML元素

[ 
{"user": "bob", "groups": ["bobsGroup"], "policies": ["bobsPolicy", "anotherPolicy"["Policy3"]]}, 
{"user": "sal", "groups": ["salsGroup"], "policies": ["salssPolicy", "anotherPolicy"["Policy3"]]} 
]

我的問題是，我想從API響應取數據，並將其保存爲HTML段落元素。目前我使用的是正確的邏輯或以不正確的方式做，我不認爲通過努力，我的腳本標記內，運行以下，

var myjson; 
$.getJSON("https://myapi.execute-api.us-east-2.amazonaws.com/myapi//myapiresource", function(json){myjson = json;}); 
document.getElementById("demo").innerHTML = myjson

其中demo只是我的HTML中一個段落標記

完整的代碼片段是，

<!doctype html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 


    </head> 
    <body> 


    <div id = "demo"></div> 




    <script> 

     var myjson; 
$.getJSON("https://myapi.execute-api.us-east-2.amazonaws.com/myapi//myapiresource", function(json){ 
    document.getElementById("demo").innerHTML = json; 
}); 


    </script> 


    </body> 
</html>

來源

2017-07-28 jelidens

移動document.getElementById("demo").innerHTML阿賈克斯成功回調裏面......

var myjson; 
$.getJSON("https://myapi.execute-api.us-east-2.amazonaws.com/myapi//myapiresource", function(json){ 
    myjson = json; 
    document.getElementById("demo").innerHTML = myjson; 
});

代碼清理版本

$.getJSON("https://myapi.execute-api.us-east-2.amazonaws.com/myapi//myapiresource", function(json){ 
    document.getElementById("demo").innerHTML = json; 
});

來源

2017-07-28 18:19:18

謝謝您的幫助！我對使用JavaScript很陌生，甚至不知道AJAX的用途。我正在研究如何更好地理解它。 – jelidens

不客氣！接受這個答案，如果這有幫助的話可以加註。 –

爲了澄清，你是否說如果我只是將上面的代碼放在「代碼清理版本」中，並將其粘貼到我的HTML的腳本標記中，則應該使用$ .getJSON中的數據打開時填充我的HTML頁面？ – jelidens

將API響應數據保存爲HTML元素

回答

相關問題