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

1、后台
<?php
if(isset($_GET['city']) && $_GET['city']!='')
{
 $url='http://m.weather.com.cn/data/';
 $city=(int)$_GET['city'];
 $json = file_get_contents($url . $city .'.html');
 echo $json;
 exit;
}

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

2、前台

返回的json数据:

weatherinfo:
{
city: "杭州"
city_en: "hangzhou"
cityid: "101210101"
date: ""
date_y: "2012年8月12日"
fchh: "18"
fl1: "小于3级"
fl2: "小于3级"
fl3: "小于3级"
fl4: "小于3级"
fl5: "小于3级"
fl6: "小于3级"
fx1: "微风"
fx2: "微风"
img1: "1"
img2: "4"
img3: "1"
img4: "99"
img5: "1"
img6: "4"
img7: "0"
img8: "1"
img9: "0"
img10: "1"
img11: "1"
img12: "99"
img_single: "4"
img_title1: "多云"
img_title2: "雷阵雨"
img_title3: "多云"
img_title4: "多云"
img_title5: "多云"
img_title6: "雷阵雨"
img_title7: "晴"
img_title8: "多云"
img_title9: "晴"
img_title10: "多云"
img_title11: "多云"
img_title12: "多云"
img_title_single: "雷阵雨"
index: "炎热"
index48: "炎热"
index48_d: "天气炎热,建议着短衫、短裙、短裤、薄型T恤衫、敞领短袖棉衫等清凉夏季服装。"
index48_uv: "中等"
index_ag: "较易发"
index_cl: "较不宜"
index_co: "很不舒适"
index_d: "天气炎热,建议着短衫、短裙、短裤、薄型T恤衫、敞领短袖棉衫等清凉夏季服装。"
index_ls: "不宜"
index_tr: "一般"
index_uv: "中等"
index_xc: "不宜"
st1: "34"
st2: "26"
st3: "36"
st4: "26"
st5: "33"
st6: "27"
temp1: "26℃~35℃"
temp2: "27℃~35℃"
temp3: "27℃~35℃"
temp4: "28℃~35℃"
temp5: "28℃~36℃"
temp6: "28℃~35℃"
tempF1: "78.8?~95?"
tempF2: "80.6?~95?"
tempF3: "80.6?~95?"
tempF4: "82.4?~95?"
tempF5: "82.4?~96.8?"
tempF6: "82.4?~95?"
weather1: "多云转雷阵雨"
weather2: "多云"
weather3: "多云转雷阵雨"
weather4: "晴转多云"
weather5: "晴转多云"
weather6: "多云"
week: "星期日"
wind1: "微风"
wind2: "微风"
wind3: "微风"
wind4: "微风"
wind5: "微风"
wind6: "微风"
}

例子

<!DOCTYPE html>
<meta charset="utf-8" />
<title>weather API</title>
<style type="text/css">
*
{
 padding:0;margin: 0;font-family: 微软雅黑;
}
div
{
 clear:both;
}
li
{
 list-style: none;
 margin-right: 20px;
 line-height: 24px;
 float:left;
 width: 300px;
 text-align: center;
}
li span
{
 margin-right: 10px;
}
</style>
<script type="text/javascript" src="../public/jQuery.js"></script>
<script type="text/javascript">
$(function()
{
 var $div_1=$('#div-1');
 var $div_2=$('#div-2');
 var $btn=$('input:button');
 $btn.click(function()
 {
  $(this).fadeOut(100);
  get_weather();
 });
 function get_weather()
 {
  $.ajax(
  {
   url:'_weather.php',
   data:{city:101210101},//杭州
   type:'get',
   dataType:'json',
   beforeSend:function()
   {
    $div_2.html('正在获取杭州天气<span>.</span>');
    var str='.,..,...,....,.....,......';
    var a=str.split(',');
    var i=0;
    _t=setInterval(function()
    {
     i++;
     i=(i>5)?0:i;
     $div_2.find('span').html(a[i]);
    },300);
   },
   success:function(json)
   {
    var w=json.weatherinfo;
    html_1='';
    var a=[];
    a[0]='今日天气';
    a[1]='明日天气';
    a[2]='后日天气';

    for(var i=0;i<=2;i++)
    {
     m=i*2+1;
     n=i*2+2;
     html_1+='<li><strong>'+a[i]+':</strong><br/>';
     for(j=m;j<=n;j++)
     {
      html_1+='<span><img class="img-'+j+'" src="http://m.weather.com.cn/img/b'
      +eval("w.img"+j)+'.gif" alt="'
      +eval("w.img_title"+j)+'" title="'
      +eval("w.img_title"+j)+'" />'
      +'</span>';
     }
     html_1+='<br/>';
     for(j=m;j<=n;j++)
     {
      html_1+='<span>'+eval("w.weather"+j)+'</span>';
     }
     html_1+='</li>';
    }
    $div_1.html(html_1);
    clearInterval(_t);
    $div_2.html('天气数据获取完成!');
   },
   error:function()
   {
    clearInterval(_t);
    $div_2.html('获取天气失败!');
    $btn.fadeIn(100);
   }
  });
 }
 get_weather();
});
</script>
<h1>获取杭州天气(来源:m.weather.com.cn)</h1>
<input type="button" value="重新获取天气数据" style="display:none;">
<div id="div-1"></div>
<div id="div-2"></div>

时间: 2024-09-20 18:42:32

jQuery获取天气API实例程序代码的相关文章

jQuery获取同级元素的简单代码_jquery

next()相邻下一个同级元素 prev()相邻上一个同级元素 siblings()所有同级元素 $("#id").next(); $("#id").prev(); $("#id").siblings(); 以上这篇jQuery获取同级元素的简单代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持. 以上是小编为您精心准备的的内容,在的博客.问答.公众号.人物.课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索j

smarty获取url参数传值程序代码

smarty获取url参数传值程序代码 <head> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>smarty获取url参数传值程序代码</title> </head> <body> <!--{$smarty.get.url}--> </body> </h

WordPress获取文章内容摘要程序代码

这个是我自己写的获取文章内容摘要程序  代码如下 复制代码 <?php  global $more;    $more = 1;    //1=全文 0=摘要   $my_content = strip_tags(get_the_excerpt(), $post->post_content); //获得文章   $my_content = str_replace(array("rn", "r", "n", " ",

jQuery获取DOM节点实例分析(2种方式)_jquery

本文实例讲述了jQuery获取DOM节点.分享给大家供大家参考,具体如下: jQuery中包裹后的DOM对象实际上是一个数组,要获得纯粹的DOM对象可以有两种方式: 1.使用数组索引方式访问,例如: 复制代码 代码如下: var dom = $(dom)[0]; 2.使用函数get()访问,例如: 复制代码 代码如下: var dom = $(dom).get(0); get()函数中的参数为索引号. 3.示例 var div = document.createElement("DIV"

jquery获取radio值实例_jquery

本文实例讲述了jquery获取radio值的方法,分享给大家供大家参考.具体如下: 单选组radio: 复制代码 代码如下: $("input[@type=radio][@checked]").val(); 单选组 radio: 复制代码 代码如下: $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项 获取一组radio被选中项的值 复制代码 代码如下: var ite

PHP中获取内存使用情况程序代码

cPHP内置函数memory_get_usage()能返回当前分配给PHP脚本的内存量,单位是字节(byte).在WEB实际开发中,这些函数非常有用,我们可以使用它来调试PHP代码性能. memory_get_usage()函数返回内存使用量,memory_get_peak_usage()函数返回内存使用峰值,getrusage()返回CUP使用情况.但有一点请注意,在这些函数需要在Linux上运行. 下面我们来看一个实例:    代码如下 复制代码 echo '开始内存:'.memory_ge

jquery获取select选择的值代码

jquery获取select选择的文本与值  代码如下 复制代码 获取select 选中的 text :jQuery("#select1  option:selected").text(); 获取select选中的 value: $("#ddlregtype ").val(); 获取select选中的索引: $("#ddlregtype ").get(0).selectedindex; 弹出选中值并显示  代码如下 复制代码 <script

jQuery弹出遮罩层实例程序代码

特点:代码量少,简单易用.没有格式限制,随意的代码填充.舍弃了在ie6/7/8下的完全兼容(背景不透明),仅保证信息内容可正常阅读. 缺点:考虑到在触屏手机上的效果,未添加对scroll事件的响应,否则有可能永远看不到弹出的内容(网页的缩放会影响scrollTop值). 相关插件要么功能太强大体积也大,要么是固定的格式需要预设标题.内容.关闭按钮等.非固定样式又非常灵活的一时没找到,就把手头的一个有bug的原生javascript弹出层改动了一下,借助jQuery绕开了麻烦的兼容性问题,正好如今

jquery index获取元素索引值程序代码

例  代码如下 复制代码  $("li").click(function(){      alert($("li").index(this));  }); 例 [JS]  代码如下 复制代码 $('li').index(document.getElementById('bar')); //1,传递一个DOM对象,返回这个对象在原先集合中的索引位置 $('li').index($('#bar')); //1,传递一个jQuery对象 $('li').index($('