I’m just trying to test out JQuery AJAX and I’m going about it slowly. I open up the file on browser and use chrome dev tools to find find out what’s going on, and it says that the status code is 404. This tells me that my GET is going nowhere? Code below:
$(document).ready(function()
{$(".search button").click(function()
{getWeather(
$(".search-bar").val()
)}
)}
);
function getWeather(city) {
var metric = "&units=metric";
var myAPI = "4f41b20d31ef924373402ebf9b9fe310";
var url="api.openweathermap.org/data/2.5/forecast?q=" + city + metric + "&appid=" + myAPI;
$.getJSON(url, function(data)
{
console.log(data);
})
}
I checked my url and everything but I keep getting the same thing. Is there something wrong with my code so far? It’s a simple code right now but I don’t know what’s going wrong.
>Solution :
You’re missing the root of the URL:
var url="//api.openweathermap.org/data/2.5/forecast?q=" + city + metric + "&appid=" + myAPI;
// ^-- here
Otherwise, when you tell the browser to make a request to api.openweathermap.org, structurally that’s no different than making a request to index.html or any other resource on your own server. Without specifying // to indicate that this is a different host, the browser is going to request this from the current host relative to the current page, which may become something like:
https://localhost:12345/mypracticeproject/api.openweathermap.org/data/2.5/forecast?q=...
Which probably isn’t what you wanted. You don’t need to include the full protocol (http or https), but do at least need to include //.