AjaxJavaScript天气预报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天气预报--www.jbxue.com</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";  

?>  

PHP+AJAX无刷新返回天气预报的更多相关文章

  1. ajax完成list无刷新返回

    ajax完成list无刷新返回 ajax无刷新技术总结,以下是一段我写的ajax应用的js脚本.其中提交的data刚开始我采用的是$('#formId').serialize();但是出现乱码问题,为 ...

  2. ajax无刷新获取天气信息

    浏览器由于安全方面的问题,禁止ajax跨域请求其他网站的数据,但是可以再本地的服务器上获取其他服务器的信息,在通过ajax请求本地服务来实现: <?php header("conten ...

  3. 移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传

    现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片 ...

  4. ajax 无刷新分页

    //ajax 无刷新分页1.前台要做的 滑动时 当前page+1,通过page ajax请求后台接口获取数据将数据进行拼装;2.后台要做的 做分页接口返回json数据前台判断触发请求条件: var p ...

  5. thinkphp ajax 无刷新分页效果的实现

    思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...

  6. DWZ框架Ajax无刷新表单提交处理流程

    DWZ框架Ajax无刷新表单提交处理流程是: 1.       ajax表单提交给服务器 2.       服务器返回一个固定格式json结构 3.       js会调函数根据这个json数据做相应 ...

  7. Thinkphp框架 -- ajax无刷新上传图片

    用Thinkphp框架做无刷新上传图片 视图层 View <!doctype html> <html lang="en"> <head> < ...

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

    先上几张图更直观展示一下要实现的功能.本功能主要通过Jquery ajaxfileupload.js插件结合ajaxUpFile.ashx一般应用程序处理文件实现Ajax无刷新上传功能,结合NPOI2 ...

  9. TP3.2：实现Ajax无刷新上传图片

    1.基于TP3.2+ajaxfileupload进行无刷新上传图片,本次只上传一张,多张以后搞出来再发 2.效果:   3.html代码: <html> <head> < ...

随机推荐

  1. BootStrap2学习日记16---选项卡内容

    代码: <ul class="nav nav-tabs"> <li class="active"><a href="#t ...

  2. hadoop群集安装中碰到的问题

    在hadoop群集安装结束后,进行格式测试出现问题如下 格式化 cd /data/hadoop/bin ./hdfs namenode -format 15/01/21 05:21:17 WARN f ...

  3. Android小项目之八 界面细节

    ------- 源自梦想.永远是你IT事业的好友.只是勇敢地说出我学到! ---------- 按惯例,写在前面的:可能在学习Android的过程中,大家会和我一样,学习过大量的基础知识,很多的知识点 ...

  4. mysql的 join联合查询的通俗解释

    表a 1 2 3 4 aid adate 1 a1 2 a2 3 a3 表b 1 2 3 4 bid bdate 1 b1 2 b2 4 b4 两个表a.b相连接,要取出id相同的字段. 1 sele ...

  5. 21世纪C语言(影印版)

    <21世纪C语言(影印版)> 基本信息 原书名:21st Century C 作者: Ben Klemens 出版社:东南大学出版社 ISBN:9787564142056 上架时间:201 ...

  6. 51nod 棋盘问题(博弈论)

    题目链接: 棋盘问题 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 上帝创造了一个n*m棋盘,每一个格子都只有可能是黑色或者白色的. 亚当和夏娃在玩一个游戏,每次寻找边长为x的正方 ...

  7. 流操作text文件------读取、保存文档

    ************************************一.读取指定text文档中的内容:**************************************** 方法一. t ...

  8. 让UIScrollView、UITableView的滚动条一直显示

    先用xcode5.1.1或更低版本创建一个Category,如图: 然后拷贝以下代码到刚创建的UIImageView+ForScrollView.m文件中: - (void) setAlpha:(fl ...

  9. js里正则表达式详解

    详细内容请点击 正则表达式中的特殊字符 字符 含意 \ 做为转意,即通常在"\"后面的字符不按原来意义解释,如/b/匹配字符"b",当b前面加了反斜杆后/\b/ ...

  10. 破解软件系列－PE文件深入浅出之Section Table节表

    我们已经学了许多关于 DOS header 和 PE header 的知识.接下来就该轮到 section table(节表)了.节表其实就是紧挨着 PE header 的一结构数组.该数组成员的数目 ...