调用天气预报接口

方案一：

浏览器由于安全的限制，不允许跨域访问。但是PHP服务器是允许的。我们可以通过使用PHP文件做代理，通过PHP来调用接口。

详细接口分析可参看：http://www.cnblogs.com/wangjingblogs/p/3192953.html

返回JSON格式

PHP代码

<?php //此接口返回json格式
echo file_get_contents('http://www.weather.com.cn/data/cityinfo/101181601.html');?>

HTML代码

<!DOCTYPE html>
<html>
<head><title>调用天气预报接口</title>
</head>
<body>
<script type="text/javascript">
window.onload = function () {//创建XMLHttpRequest对象var xmlHttp = new XMLHttpRequest();//创建连接
    xmlHttp.open('get','./getWeather.php');//判断准备状态及状态码
    xmlHttp.onreadystatechange = function(){if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {//把后台传来的字符串类型的数据信息转换成对象
            eval('var info ='  xmlHttp.responseText);//把weatherinfo对象中的数据存放到info中
            info = info.weatherinfo;console.log(info);//拼接字符串var str = '';str  = '城市：' info.city '<br>';str  = '城市编号：' info.cityid '<br>';str  = '温度：' info.temp1 '~' info.temp2 '<br>';str  = '天气：' info.weather '<br>';str  = '发布时间：' info.ptime '<br>';//把数据输出到浏览器
            document.getElementById('weather').innerHTML = str;}}//发送连接
    xmlHttp.send(null);
}
</script><div id="weather"><!-- 此处显示天气预报 -->
</div>
</body>
</html>

方案二：

为天气预报接口，可直接将以上代码放到项目中直接使用！

<iframe name=\"weather_inc\" src=\"http:\/\/i.tianqi.com\/index.php?c=code&id=1\" width=\"330\" height=\"35\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>


完整代码：

<!DOCTYPE html>
<html>
<head><title>调用天气预报接口</title>
</head>
<script type="text/javascript">document.writeln("<iframe name=\"weather_inc\" src=\"http:\/\/i.tianqi.com\/index.php?c=code&id=1\" width=\"330\" height=\"35\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>");
</script>
<body>
<!-- 天气预报接口 -->
<iframe width="420" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=17&icon=1&num=3"></iframe></body>
</html>