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. Doing Homework 状态压缩DP

    Doing Homework 题目抽象:给出n个task的name,deadline,need.  每个任务的罚时penalty=finish-deadline;   task不可以同时做.问按怎样的 ...

  2. The Last Practice

    Problem Description Tomorrow is contest day, Are you all ready?We have been training for 45 days, an ...

  3. 1.6.3 Uploading Data with Solr Cell using Apache Tika

    1. Uploading Data with Solr Cell using Apache Tika solr使用Apache Tika工程的代码提供了一个框架,用于合并所有不同格式的文件解析器为so ...

  4. ios 把毫秒值转换成日期 NSDate

    ios 把毫秒值转换成日期 (比较好用) 1343359790000 这是毫秒值------最佳解决方案-------------------- long long time=134335979000 ...

  5. 【Amazon Linux】免费搭建subversion服务器

    Amazon的EC2服务器可以免费试用一年.在这里申请: https://aws.amazon.com/cn/free/ 尝试把它弄成一个svn库来保存代码.按照 http://northwaygam ...

  6. python 基础——运算符重载

    方法 重载 调用 __init__ 构造函数 x = Class() __del__ 析构函数 del x __str__ 打印 print x __call__ 调用函数 x(*args) __ge ...

  7. FreeBSD 安裝 Tomcat JAVA JDK1.6 筆記

    首先是安裝軟體 cd /usr/ports/java/jdk16/ make 在這一步,需要你手動到sun.com上下載幾個安裝包,按提示下載好後加入到 /usr/ports/distfiles/,再 ...

  8. hdu 4010 Query on The Trees LCT

    支持:1.添加边 x,y2.删边 x,y3.对于路径x,y上的所有节点的值加上w4.询问路径x,y上的所有节点的最大权值 分析:裸的lct...rev忘了清零死循环了两小时... 1:就是link操作 ...

  9. WPF 之 数据绑定

    数据绑定需要: 后台必须要有与控件对应的类和相关的属性 在后台new 一个类的对象 在后台把控件的数据上下文设置为该对象. 在XAML中把要绑定的控件中Text =      "{Bindi ...

  10. jQuery 显示加载更多(节流) 实现预加载

    (function () { var showMoreNChildren = function ($children, n) { //显示某jquery元素下的前n个隐藏的子元素 var $hidde ...