让每一名学员高薪就业
返回列表 发新帖

php解析全国城市天气信息

[复制链接]

10

主题

10

帖子

105

积分

教师团队

Rank: 7Rank: 7Rank: 7

积分
105

源码时代教师

发表于 2019-1-20 21:12:39  | 显示全部楼层 | 阅读模式
天气预报接口
国家气象局给咱们提供了天气预报接口接口地址是http://flash.weather.com.cn/wmaps/xml/china.xml
直接打开该接口可以看到如下数据
屏幕快照 2019-01-20 下午9.01.07.png
这是一个xml格式的数据,接下来我们可以使用php代码解析该xml数据,得到天气预报信息

php解析天气预报xml数据
解析xml的php代码如下
weather.php
  1. <?php
  2. //全国城市天气预报XML接口地址
  3. $url = 'http://flash.weather.com.cn/wmaps/xml/china.xml';
  4. //php解析xml
  5. $china = simplexml_load_file($url);
  6. $cities = [];
  7. //xml中每个城市节点的属性
  8. $attributes = [
  9.         'cityname',//城市名称
  10.         'pyName',
  11.         'quName',
  12.         'state1',//天气详情图片编号
  13.         'state2',
  14.         'stateDetailed',//天气详情
  15.         'tem1',//最低温度
  16.         'tem2',//最高温度
  17.         'windState'//风力详情
  18. ];
  19. foreach ($china->city as $city){
  20.     $weather = [];
  21.     foreach ($attributes as $attribute){
  22.         $weather[$attribute] = (string)$city[$attribute];
  23.     }
  24.     $cities[$weather['cityname']] = $weather;

  25. }
  26. //将解析好的天气预报数据转换成json字符串,方便页面js调用
  27. $weathers =  json_encode($cities);
  28. //调用视图文件
  29. require 'weather.html';
复制代码


视图文件weather.html
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
  8.     <title>天气预报</title>

  9.     <!-- Bootstrap -->
  10.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

  11.     <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
  12.     <!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
  13.     <!--[if lt IE 9]>
  14.     <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
  15.     <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
  16.     <![endif]-->
  17. </head>
  18. <body>

  19. <div class="container">
  20.     <table class="table">
  21.         <tr>
  22.             <td>选择城市</td>
  23.             <td>
  24.                 <select id="city_list">
  25.                     <option value="">=选择城市=</option>
  26.                 </select>
  27.             </td>
  28.         </tr>

  29.     </table>
  30.     <table class="table" id="weather_detail">

  31.     </table>
  32. </div>

  33. <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
  34. <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
  35. <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
  36. <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  37. <script>
  38.     //输出所有城市的天气信息
  39.     var weathers = <?=$weathers?>;
  40.     //遍历所有城市,生成选择城市下拉菜单
  41.     $.each(weathers,function(city,weather){
  42.         $("#city_list").append('<option>'+city+'</option>');
  43.     });
  44.     //选择城市时,显示该城市对应的天气详情
  45.     $("#city_list").change(function(){
  46.         showWeather($(this).val());
  47.     });
  48.     //获取城市对应的天气信息
  49.     function showWeather(city){
  50.         var weather = weathers[city];
  51.         var html = '<tr>';
  52.         html += '<td>城市:'+weather.cityname+'</td>';
  53.         html += '<td>天气:'+weather.stateDetailed+getImg(weather.state1)+'</td>';
  54.         html += '<td>温度:'+weather.tem2+'~'+weather.tem1+'</td>';
  55.         html += '<td>风力:'+weather.windState+'</td>';
  56.         html += '</tr>';
  57.         $("#weather_detail").html(html);

  58.     }
  59.     //获取天气详情对应的图片
  60.     function getImg(n){
  61.         var url = 'http://m.weather.com.cn/img/c'+n+'.gif';
  62.         return '<img src="'+url+'" />';
  63.     }
  64. </script>
  65. </body>
  66. </html>
复制代码
展示天气信息
代码运行效果如下
屏幕快照 2019-01-20 下午9.08.03.png
选择一个城市后可以看到该城市的天气详情
屏幕快照 2019-01-20 下午9.08.18.png

回复

使用道具 举报

0

主题

9

帖子

26

积分

菜鸟

Rank: 1

积分
26
发表于 2019-1-20 21:32:49  | 显示全部楼层
好东西一定要看看!
回复 支持 反对

使用道具 举报

0

主题

8

帖子

1

积分

菜鸟

Rank: 1

积分
1
发表于 2019-1-20 21:34:27  | 显示全部楼层
什么都不说,先赞一个!
回复 支持 反对

使用道具 举报

0

主题

9

帖子

4

积分

菜鸟

Rank: 1

积分
4
发表于 2019-1-20 21:36:02  | 显示全部楼层
顶源码。
回复 支持 反对

使用道具 举报

0

主题

7

帖子

-2

积分

限制会员

积分
-2
发表于 2019-1-20 21:41:27  | 显示全部楼层
老师,你上课么
回复 支持 反对

使用道具 举报

0

主题

8

帖子

-1

积分

限制会员

积分
-1
发表于 2019-1-20 21:41:31  | 显示全部楼层
PHP是世界上最好的语言
回复 支持 反对

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Java培训  |   PHP培训  |   UI培训  |   H5培训  |   Python培训  |   大数据培训  |   如何报名  |   视频下载
快速回复 返回顶部 返回列表