Wie kann ich die Anzeige der Json-API-Daten in html?

Bin ich Recht gut mit html und css, aber absolut keine Erfahrung mit javascript.

Möchte ich das Datum anzeigen von diesem API in eine html-Seite

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

Dies ist wie ich bin versucht ohne Erfolg bis jetzt.

JS:

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.');
});

HTML:

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

Danke 🙂

  • stackoverflow.com/help/how-to-ask
  • developer.mozilla.org/en-US/docs/AJAX
  • Sobald Sie haben tatsächlich gezeigt, einige Mühe. Es ist unsere Aufgabe zu helfen, sobald Sie gezeigt haben, dass Sie tatsächlich versucht es erstmal selber. Sie haben das nicht getan hier.
  • lassen Sie mich 3 min zu Bearbeiten meine Frage, dann wirst du vielleicht herausfinden, dass ich es versucht habe. Es ist nicht wie ich kommen, und Fragen, ohne versucht seit 2 Stunden von mir..)
  • Sie werden überrascht sein, die Menschen tun es die ganze Zeit. Und wenn Sie versucht haben, zeigen Ihre Arbeit. Wir können nicht wissen, was Sie noch nicht gezeigt. In der Zukunft, bitte zeigen Sie Ihre Bemühungen von Anfang, damit es nicht scheinen, wie Sie für Fragen eine Antwort, ohne Sie bereits versucht, sich selbst.
  • dort gehen Sie. aber bis jetzt habe ich nicht erreichen, um diplay alles auf diesem Weg..

InformationsquelleAutor sloane | 2017-05-26
  1. 1

    Dieses Stück code ist Mit Jquery

    Schlage ich vor, dass Sie lernen, ein wenig mehr über ajax

    Edit: habe ich aktualisiert meine Antwort, passend zu Ihrem Fall. Arbeiten Geige hier

    <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 javascript-code in den head-Bereich Ihres html-Codes.

    • Beachten Sie, JQuery ist nicht erforderlich, AJAX verwenden, aber es vereinfacht Ihre Verwendung ein wenig.
    • Froh, dass ich helfen konnte. Könnten Sie bitte akzeptieren Sie die Antwort dann?
    InformationsquelleAutor Fluff removal service
  2. 3

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

    Erfahren Sie mehr über ajax hier und sehen diese arbeiten fiddle

    InformationsquelleAutor richbai90
Schreibe einen Kommentar