zoukankan html css js c++ java

天气预报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.对象.对象名‘来输出值。

查看全文

相关阅读:
Struts2中请求参数的接收方式和ModelDriven机制及其运用
 struts2获得请求参数的方式
 参数（parameter）和属性（Attribute）的区别
 getContextPath、getServletPath、getRequestURI，getRealPath的区别
 struts2的result的type属性
 Struts2的值栈和对象栈
 el表达式跟ognl表达式的区别(转)
Struts学习之值栈的理解
 创建虚拟机-1
安装kvm模块配置网络

原文地址：https://www.cnblogs.com/yinwangyizhi/p/9179350.html