如何自定义天气预报

最新推荐文章于 2024-04-14 10:39:46 发布

wei_ge163

最新推荐文章于 2024-04-14 10:39:46 发布

阅读量4k

点赞数

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/wei_ge163/article/details/8167478

版权

JavaScript 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了如何使用jQuery框架从中国天气网获取实时天气数据，包括通过IP地址获取当前城市，利用城市ID获取天气详情。代码实现了从本地网络IP到特定城市天气预报的自定义功能，并提供了简化版的实现步骤和关键代码段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

很多时候大家都会用到天气预报，这里就结合自己所作的功能，讲下如何获取网上的信息，自定义一个天气预报，主要讲解数据获取。

1、采用jquery框架

2、数据来原：中国天气网

参考文献：

http://m.weather.com.cn/data5/city.xml

http://blog.youkuaiyun.com/hello_haozi/article/details/7564223

http://www.yovisun.me/sina-wangyi-ip-addr-api.html

http://blog.youkuaiyun.com/wei_ge163/article/details/8148107

3、实现原理

a.通过天气网提供的连接，得到本地网络IP

b.通过IP获取的当前城市

c.通过城市对比天气网提供的ID对照表，拼接自己所在城市的城市代码

d.通过城市代码获取到城市天气数据

注意：本代码实现只到地级市

4.具体代码实现如下

function getWeather() {
    //request get current ip
    $.ajax({url: 'http://61.4.185.48:81/g/', dataType: "script", success: function(result){
        var weatherUrl;    //Current city url
        var provinceCode;    //Current province code
        var cityCode;    //Current city code
        var H_CITY = ["北京", "上海", "天津", "重庆"];
        if (ip){
            var new_ip = ip.replace("_", "").replace("_", "");
            //according to current ip get current city detail info
            $.ajax({url: ('http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js&ip=' + new_ip), dataType: "script", success: function(_result){
                if (remote_ip_info.ret == '1'){   
                    //get current province code
                    provinceCode = getWeatherCode("http://m.weather.com.cn/data5/city.xml", remote_ip_info.province, 2);
                    //get current province code
                    cityCode = getWeatherCode("http://m.weather.com.cn/data5/city" + provinceCode + ".xml", remote_ip_info.city, 4);
                    //get current weather url
                    weatherUrl = "http://m.weather.com.cn/data/101"  + cityCode + (H_CITY.indexOf(remote_ip_info.city)!=-1?"00":"01") + ".html";
                    queryWeather(weatherUrl);
                } else {   
                    $("#weatherContent").html("没有找到匹配的 IP 地址信息！");
                }
            }, error: error, timeout: "3000"});
        } else {   
            $("#weatherContent").html("没有找到IP信息！");
        }
    }, error: error, timeout: "3000"});
}

//find weather info
function queryWeather(url) {    
    $.ajax({
        url: url,
        data: null,
        success: success,
        error: error,
        dataType: "json",
        timeout: "3000"
    });   
}

//get city weather code
function getWeatherCode(url, address, length) {
    var str = $.ajax({url: url, async: false}).responseText;
    var index = str.indexOf(address);
    if(str && index == -1) {
        $("#weatherContent").html("没有对应城市信息！");
    } else {
        return str.substring(index - (length + 1), index - 1);
    }
}

var success = function(response){
    parseToday(response.weatherinfo);
};

var error = function(xhr, status) {
    $("#weatherContent").html("Http 请求错误！");  
};
var parseToday = function(weatherInfo){ 
    //信息显示
}

5、是不是很简单，你可以做出好看的自定义天气样式，也可以精确到地级市下面的区县，可以仔细看city 的xml定义。