利用中国天气预报接口实现简单天气预报
利用中国天气预报接口实现简单天气预报
发布时间:2016-12-29 来源:查字典编辑
摘要:复制代码代码如下:复制代码代码如下:.allspan{font:bold30px/50px"宋体";color:red;}天气预报这里是:城...

复制代码 代码如下:

<?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>

这里是:<span>城市</span>,

气温是<span>气温</span>,

风向:<span>风向</span>,

风力:<span>风力</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>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新php教程学习
热门php教程学习
编程开发子分类