金沙澳门官网调用天气预报接口

作者: 网络编程  发布:2019-09-14

方案一:

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

详细接口分析可参看:

返回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://www.guoyu588.com/uploads/allimg/190914/032T05250-0.jpg" 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://www.guoyu588.com/uploads/allimg/190914/032T05250-0.jpg" 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://www.guoyu588.com/uploads/allimg/190914/032T05250-0.jpg7&icon=1&num=3"></iframe>


</body>
</html>

 

 

另外,还有一些网站提供了免费的接口调用,很方便,可自定义天气预报样式并生成相应的代码,放在项目中即可直接使用

 

本文由金沙澳门官网发布于网络编程,转载请注明出处:金沙澳门官网调用天气预报接口

关键词: 金沙澳门官网

上一篇:金沙澳门官网:全栈开发
下一篇:没有了