Wie zeige ich Json API Daten in HTML an?

-2

Ich bin ziemlich gut mit HTML und CSS, aber absolut keine Erfahrung mit Javascript.Wie zeige ich Json API Daten in HTML an?

Ich mag das Datum von dieser API in eine HTML-Seite

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

Dies ist erhalten angezeigt, wie ich ohne Erfolg bin versucht, bis jetzt.

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>

Danke :)

Quelle

2017-05-26 sloane

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

https : //developer.mozilla.org/en-US/docs/AJAX – Thiatt

@sloane Sobald Sie tatsächlich etwas Mühe gezeigt haben. Es ist unsere Aufgabe zu helfen, sobald Sie gezeigt haben, dass Sie es zuerst selbst versucht haben. Du hast das hier nicht getan. – Carcigenicate

Dieses Stück Code wird mit Jquery

Ich schlage vor, dass Sie ein bisschen mehr über ajax

bearbeiten lernen: Ich habe aktualisierte meine Antwort passend zu Ihrem Fall. Arbeits Geige 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>

Vergessen Sie nicht, jQuery und den JavaScript-Code im Kopfteil des HTML aufzunehmen.

Quelle

2017-05-26 20:06:35

Anmerkung, JQuery wird nicht benötigt, um AJAX zu verwenden, aber es vereinfacht seine Verwendung ein wenig. – Carcigenicate

Ja, schöne Erinnerung. :) –

Danke, es funktioniert super :) – sloane

Hier ist ein funktionierendes Beispiel, das nicht 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();

mehr über here Ajax Lernen nicht verwendet und sehen diese Arbeit fiddle

Quelle

2017-05-26 20:15:07 richbai90

Wie zeige ich Json API Daten in HTML an?

Antwort

Verwandte Themen