方案一：
浏览器由于安全的限制，不允许跨域访问。但是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>
另外,还有一些网站提供了免费的接口调用，很方便，可自定义天气预报样式并生成相应的代码，放在项目中即可直接使用
http://www.tianqi.com/plugin/
http://www.cnblogs.com/wangjingblogs/p/3192953.html
时间： 2024-10-01 02:50:03