This question already has answers here:
Closed 2 years ago.
I'm building a website in which the user could read a random quote by clicking a button. I found this website and its API from which I would like to pull the data that I need:
http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=json
if i just copy and paste the URL in Chrome I can see clearly the JSON that I need but if I use AJAX to pull that data it doesn't work and I get this error on the console
XMLHttpRequest cannot load http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
here is my code:
var btn = document.getElementById("btn");
btn.addEventListener("click", function() {
var our_request = new XMLHttpRequest();
our_request.open("GET", "http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=json");
our_request.onload = function() {
var our_data = JSON.parse(our_request.responseText);
console.log(our_data);
};
our_request.send();
});<!DOCTYPE html>
<html>
<head>
<title>Random Quote Machine</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
<header>
<h1>THAT'S A RANDOM QUOTE MACHINE!</h1>
<h3>Push the button and see your quote of the day.</h3>
<p>If you fell inspired, share this thought with your friends on social media.</p>
</header>
<div id="container">
<p id="text">here's the quote</p>
<p id="btn"><button>Good Luck!</button></p>
</div>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>How come that I can see the JSON but I cannot pull it through AJAX?
Thanks for your help
</div>
