Json APIデータをhtml形式で表示するにはどうすればよいですか？

-2

私はhtmlとcssでかなりうまくいますが、javascriptを使っている人はまったく経験がありません。Json APIデータをhtml形式で表示するにはどうすればよいですか？

は私が今までは成功せずにしようとしているどのようにこれはHTMLページ

http://api.travelpayouts.com/data/routes.json?token=PutHereYourToken

には、このAPIから受け取った日付を表示したいです。

var getJSON = function(url) { 
 
    return new Promise(function(resolve, reject) { 
 
    var xhr = new XMLHttpRequest(); 
 
    xhr.open('get', url, true); 
 
    xhr.responseType = 'json'; 
 
    xhr.onload = function() { 
 
     var status = xhr.status; 
 
     if (status == 200) { 
 
     resolve(xhr.response); 
 
     } else { 
 
     reject(status); 
 
     } 
 
    }; 
 
    xhr.send(); 
 
    }); 
 
}; 
 

 
getJSON('https://api.travelpayouts.com/data/routes.json?token=mytoken').then(function(data) { 
 
    alert('Your Json result is: ' + data.result); 
 

 
    result.innerText = data.result; 
 
}, function(status) { 
 
    alert('Something went wrong.'); 
 
});

<body> 
 
<div class="container"> 
 
<div id="result" style="color:red"></div> 
 
</div> 
 
</body>

いただきありがとうございます:)

出典

2017-05-26 sloane

https://stackoverflow.com/help/how-to-ask – tech2017

HTTPSを参照してください使用していない作業例です：//developer.mozilla.org/en-US/docs/AJAX – Thiatt

@スローンあなたが実際に何らかの努力を示したら、実際にあなた自身が最初に試したことを示すと、それは私たちの仕事です。あなたはここでそれをしていません。 – Carcigenicate

のコードのこの作品は、Jquery

を使用している私はあなたがajax

編集について少し詳細を学ぶことを示唆している：私は持っていますあなたのケースに合わせて私の答えを更新しました。作業フィドルhere

<body> 
<div class="container"> 
<div id="result" style="color:red"></div> 
</div> 
</body>

Javascriptを

<script> 

$(document).ready(function(){ 

    $.ajax({ 
      url: "http://api.travelpayouts.com/data/routes.json?token=PutHereYourToken", 
      type: 'GET', 
      dataType: 'json', 
      success: function(res) { 
       $('#result').html(res) 
      } 
     }); 

}) 

</script>

はjQueryとあなたのhtmlのheadセクション内のJavaScriptコードを含めることを忘れないでください。

出典

2017-05-26 20:06:35

JQueryはAJAXを使う必要はありませんが、その使い方は簡単です。 – Carcigenicate

はい、いい思い出があります。 :) –

ありがとうそれは素晴らしい作品:) – sloane

ここでjQueryの

// Callback to run when data is ready 
function reqListener() { 
    // Parse the JSON text to an object so we can get just one property 
    var data = JSON.parse(this.responseText); 
    // Append that value to the DOM. 
    document.querySelector("#demo").innerHTML = data.body; 
} 

// Create a new ajax requst 
var oReq = new XMLHttpRequest(); 
// Fire callback on load event 
oReq.addEventListener("load", reqListener); 
// Create the connection to our API 
oReq.open("GET", "https://jsonplaceholder.typicode.com/posts/1"); 
// Fire the request 
oReq.send();

はAJAX hereの詳細情報と、この作業fiddle

出典

2017-05-26 20:15:07 richbai90

Json APIデータをhtml形式で表示するにはどうすればよいですか？

答えて

関連する問題