无刷新天气预报

最新推荐文章于 2023-06-04 23:23:29 发布

珞辰

最新推荐文章于 2023-06-04 23:23:29 发布

阅读量509

点赞数

分类专栏： web 文章标签：无刷新天气预报

本文链接：https://blog.csdn.net/a_c_c_e_p_t/article/details/51416472

版权

web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这篇博客讲述了作者在大二暑假通过PHP开放实验制作无刷新天气预报的过程。使用了JQuery框架和百度API获取天气数据，通过curl函数处理数据并在HTML页面中展示。博客内容包括数据源获取、接口理解和HTML与PHP的结合应用。

摘要由CSDN通过智能技术生成

大二暑假的时候报了学校的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;

<?php
header("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.最后的结果