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