利用中国天气预报接口实现简单天气预报

  

复制代码 代码如下:

  <?php

  header("content-type:text/html;charset=utf-8");

  $weather = file_get_contents("http://www.weather.com.cn/data/sk/101280601.html");

  echo $weather;

  ?>

  

复制代码 代码如下:

  <html>

  <head>

  <meta http-equiv="Content-Type" content="text/html;charset=gbk" />

  <style type="text/css">

  .all span {font:bold 30px/50px "宋体";color:red;}

  </style>

  <title>天气预报</title>

  </head>

  <body>

  <div class="all">

  这里是:<span class="place">城市</span>,

  气温是<span class="temp">气温</span>,

  风向:<span class="wind">风向</span>,

  风力:<span class="windPower">风力</span>

  </div>

  <script type="text/javascript" src="http://127.0.0.1/jquery.js"></script>

  <script type="text/javascript">

  $(function () {

  $.ajax({

  //请求的地址

  url : "http://127.0.0.1/weather.php",

  //请求成功后执行的函数

  success : function (data) {

  //用eval()解析返回来的数据,将字符串转成JSON格式

  var oD = eval('('+data+')');

  //用jquery-1.8.2获取元素

  var $place = $(".place"),

  $temp = $(".temp"),

  $wind = $(".wind"),

  $windPower = $(".windPower");

  //将返回来的数据放到相应的位置

  $place.html(oD["weatherinfo"]["city"]);

  $temp.html(oD["weatherinfo"]["temp"] + "°");

  $wind.html(oD["weatherinfo"]["WD"]);

  $windPower.html(oD["weatherinfo"]["WS"]);

  }

  });

  })

  </script>

  </body>

  </html>