實現簡單天氣預報,如下圖:
/*
*weather.php
*code:
*/
<?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>
From:csdn博客 風火程序員