天气预报ajax+php（可惜用的是已经失效的api）

Posted 银王意志

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了天气预报ajax+php（可惜用的是已经失效的api）相关的知识，希望对你有一定的参考价值。

 

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天气预报</title>
    <style>
        *{margin: 0;padding: 0;}
        .box{
            margin: 10px auto;
            padding: 20px;
            width: 200px;
            border: 1px solid #00f;
            text-align: center;
            background-color: #ccc;
        }
        .box p{
            line-height: 30px;
        }
        .sj{
            /* color: #0000fa; */
            font-weight: bold;
            font-size: 1.6em;
            margin-bottom: 10px;
        }
        .tq{
            font-weight: bold;
            /* font-size: 1.6em; */
        }
    </style>
</head>
<body>
    <div class="box">
        <p class="sj"></p>
        <p class="dz"></p>
        <p class="tq"></p>
        <p class="wd"></p>
        <p class="fx"></p>
        <p class="fl"></p>
        <p class="sd"></p>
        <p class="ap"></p>
    </div>
    <script>
    var date = new Date();
    var    year = date.getFullYear();
    var    month = date.getMonth() + 1;
    var    date = date.getDate();
    var $=function(sel){
            return document.querySelector(sel);
        }
    $(‘.sj‘).innerHTML=year+"年"+month+"月"+date+"日";
        var xhr=new XMLHttpRequest();
        var url=‘tianqi.php?t=‘+Math.random();
        xhr.open("get",url,true);
    xhr.onreadystatechange=function(){
        if(4==this.readyState && 200==this.status){
            var txt=xhr.responseText;
                var o=JSON.parse(txt);
                 console.log(o);                
                $(‘.dz‘).innerHTML=‘地址：‘+o.weatherinfo.city;
                $(‘.tq‘).innerHTML=‘天气：‘+o.weatherinfo.njd;
                $(‘.wd‘).innerHTML=‘温度：‘+o.weatherinfo.temp;
                $(‘.fx‘).innerHTML=‘风向：‘+o.weatherinfo.WD;
                $(‘.fl‘).innerHTML=‘风力：‘+o.weatherinfo.WS;
                $(‘.sd‘).innerHTML=‘SD：‘+o.weatherinfo.SD;
                $(‘.ap‘).innerHTML=‘AP：‘+o.weatherinfo.AP;
        }
    }
        xhr.send();


    </script>
</body>
</html>

 

 

php部分

<?php 
header("Access-Control-Allow-Origin:*");//h5跨域解决方案
$url=‘http://www.weather.com.cn/data/sk/101060101.html‘;
$skinfo=file_get_contents($url);
print_r($skinfo);

 

 

原理是：

　　通过php获得api的地址获得数据，如果谁有可用的数据，请求分享

　　然后通过file_get_contents($url)获取url内容

　　　　php 两种方法获取url内容 file_get_contents和curl

　　然后通过ajax固定写法获取数据

var xhr=new XMLHttpRequest();
        var url=‘tianqi.php?t=‘+Math.random();
        xhr.open("get",url,true);
    xhr.onreadystatechange=function(){
        if(4==this.readyState && 200==this.status){
            var txt=xhr.responseText;
                var o=JSON.parse(txt);
                 console.log(o);                
                $(‘.dz‘).innerHTML=‘地址：‘+o.weatherinfo.city;
               。。。
                $(‘.ap‘).innerHTML=‘AP：‘+o.weatherinfo.AP;
        }
    }
        xhr.send();

txt是获得的数据，而o则是转换成json，然后通过’o.对象.对象名‘来输出值。

以上是关于天气预报ajax+php（可惜用的是已经失效的api）的主要内容，如果未能解决你的问题，请参考以下文章

天气预报API开发

jq_ajax + php实现当前天气查询

Ajax入门

jquery的ajax提交后，会跳转页面

Wio Terminal 从网络获取天气数据

Wio Terminal 从网络获取天气数据