PHP+AJAX无刷新实现返回天气预报数据

天气数据是通过采集中国气象网站的。本来中国天气网站也给出了数据的API接口,接下来为大家介绍下用php来写一个天气预报的模块,感兴趣的朋友可以参考下
 

用php来写一个天气预报的模块

天气数据是通过采集中国气象网站的。本来中国天气网站也给出了数据的API接口。以下是API的地址。返回的数据格式为json格式。

1. http://www.weather.com.cn/data/sk/101010100.html
2. http://www.weather.com.cn/data/cityinfo/101010100.html
3. http://m.weather.com.cn/data/101010100.html

URL中的数字”101010100“是城市代码。所以可以先列出每个城市的城市代码,然后php程序接收到了城市代码,再去组装URL,在通过URL来显示该城市的实时天气。

index.php

复制代码 代码如下:

<?php
header("Content-Type:text/html;charset=utf-8");
?>
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<head>
<title>weather forecast</title>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
function getCityId(){
var http_request=createAjax();
var url="weatherforecast.php"
var data="cityid="+$("cityId").value;
http_request.onreadystatechange=getWetherInfo;
http_request.open("post",url,true);
http_request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
http_request.send(data);
function getWetherInfo(){
if(http_request.readyState==4 && http_request.status==200){
var info=http_request.responseText;
$("weatherinfo").innerHTML=info;
}
}
}
</script>
</head>
<body>
<select name="cityId" onchange="getCityId();" id="cityId">
<option>--请选择城市--</option>
<option value="101010100">北京</option>
<option value="101020100">上海</option>
<option value="101030100">天津</option>
<option value="101040100">重庆</option>
<option value="101280101">广州</option>
</select>
<span id="weatherinfo"></span>
</body>
</html>

weatherforecast.php

复制代码 代码如下:

<?php
header("Content-Type:text/html;charset=utf-8");
header("Cache-Control:no-cache");
if (isset($_POST['cityid'])){
$cityid=$_POST['cityid'];
$url=$url="http://www.weather.com.cn/data/sk/".$cityid.".html";
}else {
$url="http://www.weather.com.cn/data/sk/101010100.html";
}
$weatherInfo_json=file_get_contents($url);
$weatherInfo=json_decode($weatherInfo_json,true);
$cityName=$weatherInfo['weatherinfo']['city'];
$cityTemp=$weatherInfo['weatherinfo']['temp'];
$cityWd=$weatherInfo['weatherinfo']['WD'];
$cityWs=$weatherInfo['weatherinfo']['WS'];
$cityTime=$weatherInfo['weatherinfo']['time'];
$citySD=$weatherInfo['weatherinfo']['SD'];
echo $weatherinfo="城市名字:$cityName,气温:$cityTemp,风向:$cityWd";
?>

时间: 2024-09-30 13:08:00

PHP+AJAX无刷新实现返回天气预报数据的相关文章

PHP+AJAX无刷新实现返回天气预报数据_AJAX相关

用php来写一个天气预报的模块 天气数据是通过采集中国气象网站的.本来中国天气网站也给出了数据的API接口.以下是API的地址.返回的数据格式为json格式. 1. http://www.weather.com.cn/data/sk/101010100.html 2. http://www.weather.com.cn/data/cityinfo/101010100.html 3. http://m.weather.com.cn/data/101010100.html URL中的数字"10101

ajax无刷新保存用户提交数据

们继续我们的修改用户资料,修改用户资料,首先第一个需要我们做的就是,先显示出所有的用户信息. 最新的网站结构,下面用箭头标注的就是今天新增加了几个文件. ShowStudent.htm增加如下代码. <link href="Style/BaseStyle.css教程" rel="stylesheet" type="text/css" /> <script src="Js/BaseJs.js" type=&qu

Ajax无刷新 返回一个集合

问题描述 我要这样一个效果有一个下拉列表框,里面是产品的类型有:酒类.饮料类.日用品类.比如当我选择了酒类,那么就查询显示所有酒类的产品,显示的是一个集合.我想使用Ajax无刷新技术.但是貌似Ajax返回的只是一个String值,请问有谁知道可以返回一个集合实现我要的效果吗? 解决方案 解决方案二:dwr解决方案三:Ajax返回的是一个xml文件.你可以自己设计xml文件的结构,当然可以保存多个数据了.解决方案四: 解决方案五:组织成json数据解决方案六:使用json数据解决方案七:json数

XMLHTTP无刷新自动实时更新数据

xml|数据|刷新|无刷新 传统上,我们浏览网页,如果加入最新的数据.只能是等我们重新向服务器端请求时才能显示出来.但是,对于一些时效性很强的网站,传统的这种做法是不能满足的. 我们可以让程序自动刷新,定时向服务器请求数据.5秒取一次数据,10秒取一次数据.利用XMLHTTP发出请求并取得数据.传到客户端,客户端重新组织并显示数据. demo.htm 前台显示. <script language="JavaScript">function GetResult(){/**--

js动态创建上传表单通过iframe模拟Ajax无刷新的具体实现

 这篇文章主要介绍了js动态创建上传表单通过iframe模拟Ajax无刷新的具体实现,需要的朋友可以参考下  代码如下: <script>  window.onload=function(){  upfile('file.php');  }      /*  ** url 路径  **/  function upfile(url){  //创建iframe  var iframe = document.createElement("iframe");  document.b

Ajax无刷新分页的性能优化方法_AJAX相关

Ajax无刷新分页,已经是一个大家比较熟悉的事物了,大概就是web前端页面上有一个js的方法,通过Ajax去请求服务器端的分页数据接口,拿到数据后再在页面上创建html结构,展现给用户,类似于下面这样: <script type="text/javascript"> function getPage(pageIndex){ ajax({ url:" RemoteInterface.cgi", method:"get", data:{p

jQuery实现form表单基于ajax无刷新提交方法详解_jquery

本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o

ajax无刷新(添加评论功能)

问题描述 ajax无刷新(添加评论功能) JSp,我 用ajax无刷新写了一个添加评论的功能,但是JS脚本这边解析servlet端构造的xml文档老是报错,代码如下: (当解析"item"根节点就报错了-"不支持该属性或方法",如果有其它的错误,请指出,该如何解决,谢谢!) servlet: StringBuffer sb=new StringBuffer(); sb.append(""); sb.append(""+coun

ajaxfileupload.js插件结合一般处理文件实现Ajax无刷新上传

先上几张图更直观展示一下要实现的功能,本功能主要通过Jquery ajaxfileupload.js插件结合ajaxUpFile.ashx一般应用程序处理文件实现Ajax无刷新上传功能,结合NPOI2.0实现数据读取.这个功能在实际工作种经常用到,希望能给需要做这方面的人有些帮助. 一.功能页面布局及介绍 1.上传页面布局及input file上传功能 2.上传页面文件正在上传效果 3.上传完成效果,多文件展示区 二.功能代码实现及资源引用 1.js资源文件引用 html页面js引用,需要引用j