admin 管理员组

文章数量: 1086019

I'm quite good with html and css but absolutely no experience using javascript.

I want to display the date received from this API into an html page

.json?token=PutHereYourToken

This is how I'm trying without any success until now. 

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('.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>

I'm quite good with html and css but absolutely no experience using javascript.

I want to display the date received from this API into an html page

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

This is how I'm trying without any success until now. 

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./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>

Thank you :)

  • javascript
  • html
  • json
Share Improve this question edited May 26, 2017 at 20:18 sloane asked May 26, 2017 at 19:56 sloanesloane 451 gold badge1 silver badge5 bronze badges 6
  • stackoverflow./help/how-to-ask – tech2017 Commented May 26, 2017 at 19:57
  • developer.mozilla/en-US/docs/AJAX – Thiatt Commented May 26, 2017 at 20:01
  • @sloane Once you've actually shown some effort. It's our job to help once you've shown that you've actually tried it yourself first. You haven't done that here. – Carcigenicate Commented May 26, 2017 at 20:08
  • @Carcigenicate, let me 3 min to edit my question, then maybe you will figure out that I tried. It's not like I e and ask without having tried since 2 hours by myself..) – sloane Commented May 26, 2017 at 20:13
  • 1 @sloane You'd be surprised, people do it all the time. And if you tried, show your work. We can't know what you haven't shown. In the future, please show your efforts from the start so it doesn't seem like you're asking for an answer without already having tried yourself. – Carcigenicate Commented May 26, 2017 at 20:14
 |  Show 1 more ment

2 Answers 2

Reset to default 3

Here's a working example that does not use 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./posts/1");
// Fire the request
oReq.send();

Learn more about ajax here and see this working fiddle

This piece of code is Using Jquery

I suggest that you learn a bit more about ajax

Edit: I have updated my answer to fit your case. Working fiddle here

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

Javascript

<script>

$(document).ready(function(){

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

})

</script>

Do not forget to include jQuery and the javascript code in the head section of your html.

本文标签： javascriptHow do I display Json API data in htmlStack Overflow

版权声明：本文标题：javascript - How do I display Json API data in html? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1743994890a2515394.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。