因此,我正在为不同的社区制作一堆网页,在每个网页上我都希望有一个我可以自定义的小天气框,只需输入城镇名称,当前温度和当前天气状况即可.我希望能够完全按照自己的风格进行样式设置.我发现这个名为打开天气地图的网站似乎完全符合我的要求.问题是我不知道如何使用JSON.这可能很容易,但是我似乎在尝试过的任何在线教程中迷路了.
这是页面的URL的示例,其中加载了一些JSON. api.openweathermap/data/2.5/weather?q =伦敦,英国
我可以将其包含在文件中,然后动态更改城市和国家/地区代码以获取所需的城市.但是,如何将其加载到天气框中?可以说这就是我所拥有的:
<div class="weatherbox"> <strong class="city>{CITY NAME HERE}</strong> <span class="temperature">{X} °C</span> <p class="weatherdescription>{WEATHER DESCRIPTION HERE}</p> </div>然后如何从JSON访问数据?我希望它尽可能简单地完成.我是否包含这样的文件才能访问该对象,还是更复杂?
<script type="javascript" src="api.openweathermap/data/2.5/weather?q=London,uk"></script>从代码行中
解决方案:
<script type="javascript" src="api.openweathermap/data/2.5/weather?q=London,uk"></script>这是不正确的,api返回的是JSON,它不是javascript文件,因此您不能以这种方式访问它.请注意,他们的API似乎将城市和国家/地区作为URL参数的一部分,因此您需要为相应的城市/国家/地区插入插件.
对于您的特定问题,您可以执行以下操作:
var jsonData; $(document).ready(function () { $.getJSON('api.openweathermap/data/2.5/weather?q=London,uk', function(data) { jsonData = data; $('.city').text(jsonData.name); // etc }); });请参见 jsfiddle/jsxm7j3n/1/.
/p>
请注意,为了了解JSON,您可以通过JSON解析器(例如 http: //json.parser.online.fr/-这将使您更好地了解所收到的内容以及如何对其进行解析.
双重说明:忘了提及此解决方案使用JQuery的情况-我相信有纯JavaScript方式可以实现此目标,但是它将变得更加冗长,而且(在我看来)更加难以理解.
So, I'm making a bunch of webpages for different communities, and on each I want to have a little weather box that I can customize, just with the name of the town, the current temperature, and the current weather condition. I want to be able to style it all exactly how I want. I found this site called Open Weather Map that seems to do exactly what I want. The problem is that I don't know how to use JSON. It's probably easy, but I seem to have gotten lost on any online tutorials I've tried.
This is an example of a URL for the page, that loads some JSON. api.openweathermap/data/2.5/weather?q=London,uk
I could just include this in my file and dynamically change the city and the country code to get the city I want. But how do I load this into my weather box? Let's say this is what I have:
<div class="weatherbox"> <strong class="city>{CITY NAME HERE}</strong> <span class="temperature">{X} °C</span> <p class="weatherdescription>{WEATHER DESCRIPTION HERE}</p> </div>Then how do I access the data from the JSON? I want it to be done as simply as possible. Do I include the file like this to have access to the object, or is it more complicated?
<script type="javascript" src="api.openweathermap/data/2.5/weather?q=London,uk"></script>解决方案
from your line of code:
<script type="javascript" src="api.openweathermap/data/2.5/weather?q=London,uk"></script>this is incorrect, the api is returning JSON, it is not a javascript file so you don't access it in such a manner. Note that their API appears to take the city and country as a part of the URL parameters, so this you will need to plug in for the appropriate city/country.
For your specific question you could do something like:
var jsonData; $(document).ready(function () { $.getJSON('api.openweathermap/data/2.5/weather?q=London,uk', function(data) { jsonData = data; $('.city').text(jsonData.name); // etc }); });See jsfiddle/jsxm7j3n/1/ for it in action.
Note in order to understand the JSON, you can run it through a JSON parser such as the one at json.parser.online.fr/ - this will allow you to better understand the make up of what you're receiving back, and how to parse it.
Double note: forgot to mention this solution uses JQuery - i believe there are purely javascript ways to pull it off, but it will be much more verbose and (in my opinion) harder to understand.
更多推荐
露天天气API
发布评论