夏日博客

A-A+

jQuery获取天气API实例程序代码

2016年01月11日 前端设计 暂无评论 阅读 6 views 次

jQuery获取天气API我们见得多了，在这里小编看到一站长写得非常不错的一款jQuery获取天气API插件，我们一起来看它的用法。

1、后台

  1. <?php  
  2. if(isset($_GET['city']) && $_GET['city']!='')  
  3. {  
  4.  $url='http://m.weather.com.cn/data/';  
  5.  $city=(int)$_GET['city'];  
  6.  $json = file_get_contents($url . $city .'.html');  
  7.  echo $json;  
  8.  exit;  
  9. }  
  10. ?>  

获取http://m.weather.com.cn/data/的天气数据，返回的是json格式数据。

2、前台

返回的json数据：

  1. weatherinfo：  
  2. {  
  3. city: "杭州"  
  4. city_en: "hangzhou"  
  5. cityid: "101210101"  
  6. date: ""  
  7. date_y: "2012年8月12日"  
  8. fchh: "18"  
  9. fl1: "小于3级"  
  10. fl2: "小于3级"  
  11. fl3: "小于3级"  
  12. fl4: "小于3级"  
  13. fl5: "小于3级"  
  14. fl6: "小于3级"  
  15. fx1: "微风"  
  16. fx2: "微风"  
  17. img1: "1"  
  18. img2: "4"  
  19. img3: "1"  
  20. img4: "99"  
  21. img5: "1"  
  22. img6: "4"  
  23. img7: "0"  
  24. img8: "1"  
  25. img9: "0"  
  26. img10: "1"  
  27. img11: "1"  
  28. img12: "99"  
  29. img_single: "4"  
  30. img_title1: "多云"  
  31. img_title2: "雷阵雨"  
  32. img_title3: "多云"  
  33. img_title4: "多云"  
  34. img_title5: "多云"  
  35. img_title6: "雷阵雨"  
  36. img_title7: "晴"  
  37. img_title8: "多云"  
  38. img_title9: "晴"  
  39. img_title10: "多云"  
  40. img_title11: "多云"  
  41. img_title12: "多云"  
  42. img_title_single: "雷阵雨"  
  43. index: "炎热"  
  44. index48: "炎热"  
  45. index48_d: "天气炎热，建议着短衫、短裙、短裤、薄型T恤衫、敞领短袖棉衫等清凉夏季服装。"  
  46. index48_uv: "中等"  
  47. index_ag: "较易发"  
  48. index_cl: "较不宜"  
  49. index_co: "很不舒适"  
  50. index_d: "天气炎热，建议着短衫、短裙、短裤、薄型T恤衫、敞领短袖棉衫等清凉夏季服装。"  
  51. index_ls: "不宜"  
  52. index_tr: "一般"  
  53. index_uv: "中等"  
  54. index_xc: "不宜"  
  55. st1: "34"  
  56. st2: "26"  
  57. st3: "36"  
  58. st4: "26"  
  59. st5: "33"  
  60. st6: "27"  
  61. temp1: "26℃~35℃"  
  62. temp2: "27℃~35℃"  
  63. temp3: "27℃~35℃"  
  64. temp4: "28℃~35℃"  
  65. temp5: "28℃~36℃"  
  66. temp6: "28℃~35℃"  
  67. tempF1: "78.8?~95?"  
  68. tempF2: "80.6?~95?"  
  69. tempF3: "80.6?~95?"  
  70. tempF4: "82.4?~95?"  
  71. tempF5: "82.4?~96.8?"  
  72. tempF6: "82.4?~95?"  
  73. weather1: "多云转雷阵雨"  
  74. weather2: "多云"  
  75. weather3: "多云转雷阵雨"  
  76. weather4: "晴转多云"  
  77. weather5: "晴转多云"  
  78. weather6: "多云"  
  79. week: "星期日"  
  80. wind1: "微风"  
  81. wind2: "微风"  
  82. wind3: "微风"  
  83. wind4: "微风"  
  84. wind5: "微风"  
  85. wind6: "微风"  
  86. }  

例子:

  1. <!DOCTYPE html>  
  2. <meta charset="utf-8" />  
  3. <title>weather API</title>  
  4. <style type="text/css">  
  5. *  
  6. {  
  7.  padding:0;margin: 0;font-family: 微软雅黑;  
  8. }  
  9. div  
  10. {  
  11.  clear:both;  
  12. }  
  13. li  
  14. {  
  15.  list-style: none;  
  16.  margin-right: 20px;  
  17.  line-height: 24px;  
  18.  float:left;  
  19.  width: 300px;  
  20.  text-align: center;  
  21. }  
  22. li span  
  23. {  
  24.  margin-right: 10px;  
  25. }  
  26. </style>  
  27. <script type="text/javascript" src="../public/jQuery.js"></script>  
  28. <script type="text/javascript">  
  29. $(function()  
  30. {  
  31.  var $div_1=$('#div-1');  
  32.  var $div_2=$('#div-2');  
  33.  var $btn=$('input:button');  
  34.  $btn.click(function()  
  35.  {  
  36.   $(this).fadeOut(100);  
  37.   get_weather();  
  38.  });  
  39.  function get_weather()  
  40.  {  
  41.   $.ajax(  
  42.   {  
  43.    url:'_weather.php',  
  44.    data:{city:101210101},//杭州  
  45.    type:'get',  
  46.    dataType:'json',  
  47.    beforeSend:function()  
  48.    {  
  49.     $div_2.html('正在获取杭州天气<span>.</span>');  
  50.     var str='.,..,...,....,.....,......';  
  51.     var a=str.split(',');  
  52.     var i=0;  
  53.     _t=setInterval(function()  
  54.     {  
  55.      i++;  
  56.      i=(i>5)?0:i;  
  57.      $div_2.find('span').html(a[i]);  
  58.     },300);  
  59.    },  
  60.    success:function(json)  
  61.    {  
  62.     var w=json.weatherinfo;  
  63.     html_1='';  
  64.     var a=[];  
  65.     a[0]='今日天气';  
  66.     a[1]='明日天气';  
  67.     a[2]='后日天气';  
  68.     for(var i=0;i<=2;i++)  
  69.     {  
  70.      m=i*2+1;  
  71.      n=i*2+2;  
  72.      html_1+='<li><strong>'+a[i]+'：</strong><br/>';  
  73.      for(j=m;j<=n;j++)  
  74.      {  
  75.       html_1+='<span><img class="img-'+j+'" src="http://m.weather.com.cn/img/b'  
  76.       +eval("w.img"+j)+'.gif" alt="'  
  77.       +eval("w.img_title"+j)+'" title="'  
  78.       +eval("w.img_title"+j)+'" />'  
  79.       +'</span>';  
  80.      }  
  81.      html_1+='<br/>';  
  82.      for(j=m;j<=n;j++)  
  83.      {  
  84.       html_1+='<span>'+eval("w.weather"+j)+'</span>';  
  85.      }  
  86.      html_1+='</li>';  
  87.     }  
  88.     $div_1.html(html_1);  
  89.     clearInterval(_t);  
  90.     $div_2.html('天气数据获取完成！');  
  91.    },  
  92.    error:function()  
  93.    {  
  94.     clearInterval(_t);  
  95.     $div_2.html('获取天气失败！');  
  96.     $btn.fadeIn(100);  
  97.    }  
  98.   });  
  99.  }  
  100.  get_weather();  
  101. });  
  102. </script>  
  103. <h1>获取杭州天气(来源：m.weather.com.cn)</h1>  
  104. <input type="button" value="重新获取天气数据" style="display:none;">  
  105. <div id="div-1"></div>  
  106. <div id="div-2"></div>  
标签：

给我留言