无刷新天气预报

来源：互联网发布：java判断图片尺寸编辑：程序博客网时间：2024/05/01 07:21

大二暑假的时候报了学校的PHP开放实验，这个天气预报的小功能算是自己写的第一个web程序吧，也正是它让我开始决定学习web开发，前端的学习和自己以前做ACM有点不一样，看到自己写出来的东西展示出来心里还是很爽的~废话少说，这个小项目我用了JQuery框架，你也可以用原生态的js写~

分析：做天气预报我们必须得得到天气预报的数据，即天气预报的API接口，我在这里使用的是百度的API，所以如果你也想使用百度的API你需要先去百度申请一个百度ak. 因为以前做过一个类似百度地图的安卓项目，所以申请过百度ak，此次就直接拿来用了。

解决了数据的来源，接下来你就需要思考一下数据的处理问题，怎么把数据体现在你的HTML页面中。这时候你就需要考虑接口的返回参数，上网随便百度下就可以找到了，附上一个我自己使用过的链接，来自方倍工作室，http://www.cnblogs.com/txw1958/p/baidu-weather-forecast-api.html 在这里你可以对天气预报的返回数据有一定的了解。

1.HTML部分

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>无刷新天气预报</title></head><script src="http://code.jquery.com/jquery-1.11.3.min.js"></script><script src="http://malsup.github.io/jquery.form.js"></script><script language="javascript">$(function (){   $('#btn').click(function (){     var params=$('input').serialize(); //序列化表单的值     $.ajax({       url:'weather.php', //后台处理程序       type:'post',         //数据发送方式       dataType:'json',     //接受数据格式       data:params,         //要传递的数据       success:callback//回调函数(这里是函数名)     });   }); });function callback(js)  //回调函数实体，参数为XMLhttpRequest.responseText{var item="";item +='<table border=1 bordercolor=#0080FF cellspacing=0 cellpadding=0>' //图表1+'<tr>'+'<th style=text-align:center colspan=2>今日天气：【'+js.results[0]['weather_data'][0]['weather']+'】'+'</th>'+'<th style=text-align:center>'+js.results[0]['currentCity']+'</th>'+'<th style=text-align:center colspan=2>'+js.date+'</th>'+'</tr>'+'<tr>'+'<td style=text-align:center>pm2.5</td>'+'<td style=text-align:center>温度</td>'+'<td style=text-align:center>风况</td>'+'<td style=text-align:center>白天</td>'+'<td style=text-align:center>夜晚</td>'+'</tr>'+'<tr>'+'<td style=text-align:center>'+js.results[0]['pm25']+'</td>'+'<td style=text-align:center>'+js.results[0]['weather_data'][0]['temperature']+'</td>'+'<td style=text-align:center>'+js.results[0]['weather_data'][0]['wind']+'</td>'+'<td align=center valign=middle><img src=" '+js.results[0]["weather_data"][0]["dayPictureUrl"]+ ' "></td>'+'<td align=center valign=middle><img src=" '+js.results[0]["weather_data"][0]["nightPictureUrl"]+ ' "></td>'+'</tr>'+'</table>'+"<br><br><table border=1  bordercolor=#0080FF cellspacing=0 cellpadding=0>"  //图表2+"<tr>"+"<td style=text-align:center>"+js.results[0]["index"][0]["title"]+"</td>"+"<td style=text-align:center>"+js.results[0]["index"][0]["zs"]+"</td>"+"<td style=text-align:center>"+js.results[0]["index"][0]["des"]+"</td>"+"</tr>"+"<tr>"+"<td style=text-align:center>"+js.results[0]["index"][1]["title"]+"</td>"+"<td style=text-align:center>"+js.results[0]["index"][1]["zs"]+"</td>"+"<td style=text-align:center>"+js.results[0]["index"][1]["des"]+"</td>"+"</tr>"+"<tr>"+"<td style=text-align:center>"+js.results[0]["index"][2]["title"]+"</td>"+"<td style=text-align:center>"+js.results[0]["index"][2]["zs"]+"</td>"+"<td style=text-align:center>"+js.results[0]["index"][2]["des"]+"</td>"+"</tr>"+"<tr>"+"<td style=text-align:center>"+js.results[0]["index"][3]["title"]+"</td>"+"<td style=text-align:center>"+js.results[0]["index"][3]["zs"]+"</td>"+"<td style=text-align:center>"+js.results[0]["index"][3]["des"]+"</td>"+"</tr>"+"<tr>"+"<td style=text-align:center>"+js.results[0]["index"][4]["title"]+"</td>"+"<td style=text-align:center>"+js.results[0]["index"][4]["zs"]+"</td>"+"<td style=text-align:center>"+js.results[0]["index"][4]["des"]+"</td>"+"</tr>"+"<tr>"+"<td style=text-align:center>"+js.results[0]["index"][5]["title"]+"</td>"+"<td style=text-align:center>"+js.results[0]["index"][5]["zs"]+"</td>"+"<td style=text-align:center>"+js.results[0]["index"][5]["des"]+"</td>"+"</tr>"+"</table>"+"<br><br><table border=1 bordercolor=#0080FF cellspacing=0 cellpadding=0>"  //图表3+"<tr>"+"<th style=text-align:center colspan=6 >今后几日天气一览</th>"+"</tr>"+"<tr>"+"<td style=text-align:center >日期</td>"+"<td style=text-align:center >天气</td>"+"<td style=text-align:center >风况</td>"+"<td style=text-align:center >温度</td>"+"<td style=text-align:center >白天</td>"+"<td style=text-align:center >夜晚</td>"+"</tr>"for(var i=1;i<4;i++){  item+="<tr><td style=text-align:center>"+js.results[0]['weather_data'][i]['date']+"</td>";  item+="<td style=text-align:center>"+js.results[0]['weather_data'][i]['weather']+"</td>";  item+="<td style=text-align:center>"+js.results[0]['weather_data'][i]['wind']+"</td>";  item+="<td style=text-aling:center>"+js.results[0]['weather_data'][i]['temperature']+"</td>";  item+='<td style=align:center;valign=middle><img src=" '+js.results[0]['weather_data'][i]['dayPictureUrl']+' "></td>';  item+='<td style=align:center;valign=middle><img src=" '+js.results[0]['weather_data'][i]['nightPictureUrl']+' "></td></tr>';}+"</table></br>"                                                          $("#content").html(item);}</script><body> <form id="formtest" action="" method="post">    <p><span>输入城市:</span><input type="text" name="city" /></p>    </form>  <button id="btn">提交</button>  <br>  <hr></body><div id="content"></div><html>

2.php部分

PHP部分是用来采集页面内容的，或许大家立马会想到file_get_contents()方法，我这里用的是curl函数来实现的。因为是项目要求使用curl方法，所以专门去搜了下这两种采集方法到底有什么区别。原来，这两个函数在性能方面还是有很大的不同的，curl函数的性能比file_get_contents()要好很多。虽然，file_get_contents()比较方便快捷，但是也很容易获取失败，所以还是多多使用curl函数吧。

curl函数的基本用法

     $curl = curl_init();        //初始化    curl_setopt($curl, CURLOPT_URL, $url);            //设置访问的url地址       curl_setopt($curl,CURLOPT_HEADER,1);            //是否显示头部信息       curl_setopt($curl, CURLOPT_TIMEOUT, 5);           //设置超时       curl_setopt($curl, CURLOPT_USERAGENT, _USERAGENT_);   //用户访问代理 User-Agent       curl_setopt($curl, CURLOPT_REFERER,_REFERER_);        //设置 referer       curl_setopt($curl,CURLOPT_FOLLOWLOCATION,1);      //跟踪301       curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);        //返回结果       $rtn = curl_exec($ch);       curl_close($ch);       return $rtn;

<?phpheader("content-type:text/html;charset=utf-8");  //$arr = $_POST; //若以$.get()方式发送数据，则要改成$_GET.或者干脆:$_REQUEST // $arr = $_REQUEST;   // $arr['append'] = '测试字符串-KKKMMM-BB';//'测试字符串';  //print_r($arr);  //$arr= $_REQUEST;$arr=$_POST;$city=$_POST['city'];$curl = curl_init();curl_setopt($curl,CURLOPT_URL,"http://api.map.baidu.com/telematics/v3/weather?location=".$city."&output=json&ak=hlVHc2IPsUQX47M2NjeS01D2");$rtn = curl_exec($curl);return $rtn;?>

3.最后的结果

0 0