天气预报信息

最新推荐文章于 2023-03-04 15:47:01 发布

dancheng_work

最新推荐文章于 2023-03-04 15:47:01 发布

阅读量385

点赞数

分类专栏： # ajax

本文链接：https://blog.csdn.net/dancheng1/article/details/77414140

版权

ajax 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

不同地区需要显示该地区对应的天气信息

获得访问用户的ip地址信息，通过ip地址获得其对应的城市信息

城市信息获得出来还要获得城市的编码信息。

ip------->城市-------》编码

www.tianqi.com网站已经把 ip/城市/编码的关系都给处理好了，可以直接调用获得城市对应的天气信息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //利用ajax调用天气信息
        window.onload = function () {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if(xhr.readyState == 4){
                    eval("var info=" + xhr.responseText);
                    var s = "";
                    s += "地址：" + info.weatherinfo.city + "<br/>";
                    s += "温度：" + info.weatherinfo.temp + "<br/>";
                    s += "风向：" + info.weatherinfo.WD + "<br/>";
                    document.getElementById('result').innerHTML = s;
                }
            }
            xhr.open('get', './weather.php');
            xhr.send(null);
        }
    </script>
    <style type="text/css">

    </style>
</head>
<body>
    <h2>网站首页面（或得天气信息）</h2>
    <div id="result"></div>
    <iframe width="420" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&color=%2300B0F0&icon=1&num=1&site=13"></iframe>
</body>
</html>