使用Javascript从openweathermap API检索5天天气海报
[英]Retrieving 5 day weather poster from openweathermap API Using Javascript
问题描述
i am getting a 404 error. 
我收到404错误。 I just want to retrieve 5 day weather info using openwheathermap api (strictly javascript, no jquery. i am practicing api and javascript and same structure worked with a movie api. what is the mistake i am making. below is my code so far 我只是想使用openwheathermap api检索5天的天气信息（严格的javascript，没有jquery。我正在练习api和javascript以及与电影api相同的结构。我正在制作的错误。下面是我的代码到目前为止
ps: zoom out to 25% when previewing ps：预览时缩小到25％
function enterkey(){ var enterk = event.which || event.keyCode; if(enterk==13){ showheather(); } } function showheather(){ var cName = document.getElementById("searchbox").value; var wgoes = document.getElementById("posterdiv"); var urlapi = "api.openweathermap.org/data/2.5/weather?q="+cName+""; var http = new XMLHttpRequest(); http.open("GET",urlapi,true) http.send() http.onreadystatechange = function(){ if(http.status==200 && http.readyState==4){ var wdata =JSON.parse(http.responseText) wgoes.innerHTML = wdata.city.name } } }
#wraper{ margin: 0 auto; height: 4000px; width:3840px; } #posterdiv{ margin-top: 0%; height: 2345px; width:3840px; border: 5px solid blue; border-radius: 15px; } #searchbox{ height: 300px; width:3840px; font-size: 250px; letter-spacing: 50px; border-style: none; }
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="../css/weather.css"> <title></title> </head> <body> <div id="wraper"> <input type="text" id="searchbox" placeholder="Type City Name Here.." onkeydown="enterkey()" > <div id="posterdiv"></div> </div> <script src = "../JavaScript/weather.js"></script> </body> </html>
2 个解决方案
解决方案1
0 2016-10-31 02:05:41
You need to pass in a complete absolute path through urlapi 你需要通过urlapi传递一个完整的绝对路径
Right now it's a relative path, so you're sending the API call to your own host. 现在它是一个相对路径，因此您将API调用发送到您自己的主机。
opeanweathermap also requires an API key, which you need to pass in the url. opeanweathermap还需要一个API密钥，您需要在该密钥中传递。
解决方案2
0 已采纳 2016-10-31 15:20:32
function enterkey(){ var enterk = event.which || event.keyCode; if(enterk==13){ showheather(); } } function showheather(){ var cName = document.getElementById("searchbox").value; var wgoes = document.getElementById("posterdiv"); var urlapi = "http://api.openweathermap.org/data/2.5/weather?q="+cName+"&appid='enter your app id'"; var http = new XMLHttpRequest(); http.open("GET",urlapi,true) http.send() http.onreadystatechange = function(){ if(http.status==200 && http.readyState==4){ var wdata =JSON.parse(http.responseText) wgoes.innerHTML = wdata.city.name } } }
api key was the problem. api键是问题所在。 openweathermap require user to have api key. openweathermap要求用户拥有api密钥。 not just the json link. 不仅仅是json链接。 also add http .works like a charm now 现在也可以像现在一样添加http .works
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.