创建天气预报最简单的方法是什么？

发布于 2024-12-24 17:48:31 字数 1171 浏览 3 评论 0原文

我正在开发一个网络应用程序。这里我用 JavaScript 创建了一个弹出窗口。现在我想在这个窗口内创建天气预报。

做到这一点最简单的方法是什么？

$(".popup-button").click(function(evt){
//prevent default link behavior
    evt.preventDefault();

//get id from clicked element
var id = $(this).attr("id");

switch (id) {
    case "popup-button-wetter":
        //centering with css
        centerPopup($("#popup-wrapper-wetter"));
        //load popup  
        loadPopupadditional($("#popup-wrapper-wetter"));
        //get weather
        getWeather ()
        break;
          ......


function getWeather () {
     $.get("http://weather.yahooapis.com/forecastrss?w=782458&u=c", function(data){
                   console.log("Data Loaded: " + data);
                 });
            }
    });

但后来我得到了此错误：

XMLHttpRequest 无法加载 http://weather.yahooapis.com/forecastrss?w=782458&u=c。 Access-Control-Allow-Origin 不允许 Origin file://。

这是什么意思？

原文

Im developing an web app. Here I created a popup-window in JavaScript. Now I like to create inside this window a weather-forecast.

What is the easiest way to do this?

I did it like here: Get weather from Yahoo with jQuery

$(".popup-button").click(function(evt){
//prevent default link behavior
    evt.preventDefault();

//get id from clicked element
var id = $(this).attr("id");

switch (id) {
    case "popup-button-wetter":
        //centering with css
        centerPopup($("#popup-wrapper-wetter"));
        //load popup  
        loadPopupadditional($("#popup-wrapper-wetter"));
        //get weather
        getWeather ()
        break;
          ......


function getWeather () {
     $.get("http://weather.yahooapis.com/forecastrss?w=782458&u=c", function(data){
                   console.log("Data Loaded: " + data);
                 });
            }
    });

but then I got this error:

XMLHttpRequest cannot load http://weather.yahooapis.com/forecastrss?w=782458&u=c. Origin file:// is not allowed by Access-Control-Allow-Origin.

What does it mean?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦初启 2024-12-31 17:48:31

我知道我迟到了，但是当我构建天气页面时遇到了同样的问题。
我使用了 Google 的 API，但是您应该能够相当轻松地为 Yahoo 的 API 重写此代码：

在 PHP 文件中执行类似的操作：

<?php
$lat = explode(".", $_GET["lat"] * 1000000); //latitude returned by JS geolocation
$lon = explode(".", $_GET["lon"] * 1000000); //longitude returned by JS geolocation
$api = simplexml_load_string(utf8_encode(file_get_contents("http://www.google.com/ig/api?weather=,,," . $lat[0] . "," . $lon[0] . "&zoom=10&hl=de")));
echo $api->weather->current_conditions->temp_c->attributes()->data; //prints the current temperature in °C
?>

将 HTML 页面的字符集设置为 UTF-8

<meta charset="utf-8">

然后通过插入 ; 标签以便正确显示 ä、ö 和 ü 等变音符号。

Tl;dr：您可以通过 PHP 抓取 XML 文件，然后将 XMLHttpRequest 发送到本地 PHP 文件来绕过跨域 AJAX 块。 ;)

I know I'm late, but I ran into the same problem when I was building a weather page.
I used Google's API, but you should be able to rewrite this for Yahoo's API rather easily:

Do something like this in a PHP file:

<?php
$lat = explode(".", $_GET["lat"] * 1000000); //latitude returned by JS geolocation
$lon = explode(".", $_GET["lon"] * 1000000); //longitude returned by JS geolocation
$api = simplexml_load_string(utf8_encode(file_get_contents("http://www.google.com/ig/api?weather=,,," . $lat[0] . "," . $lon[0] . "&zoom=10&hl=de")));
echo $api->weather->current_conditions->temp_c->attributes()->data; //prints the current temperature in °C
?>

Then set the charset of your HTML page to UTF-8 by inserting