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. 完美的.net泛型也有特定的性能黑点?追根问底并且改善这个性能问题

    完美的.net真泛型真的完美吗 码C#多年,不求甚解觉得泛型就是传说中那么完美,性能也是超级好,不错,在绝大部分场景下泛型表现简直可以用完美来形容,不过随着前一阵重做IOC时,才发现与自己预想中不一样 ...

  2. encodeURIComponent() 和 encodeURI()

    encodeURI(URIstring): 该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: - _ . ! ~ * ' ( ) . 该方法的目的是对 URI ...

  3. solr 相似查询-MoreLikeThis

    参考文档: MoreLikeThis MoreLikeThisHandler 在solr中有两种方式实现MoreLikeThis:第一种:SearchHandler中的MoreLikeThisComp ...

  4. ios - 带动画圆形旋转的进度条

    #import <UIKit/UIKit.h> @interface TJCircleProgressView : UIView /** * 图标 */ @property(nonatom ...

  5. codeforces 676A A. Nicholas and Permutation(水题)

    题目链接: A. Nicholas and Permutation time limit per test 1 second memory limit per test 256 megabytes i ...

  6. 使用Xcode5开发时的icon取消高光效果

    .在General中App Icons 使用Source--> AppIcon .在Images.xcassets 中依次添加对应尺寸的icon. .选中AppIcon ,在右侧第三个按钮下,勾 ...

  7. HTML+CSS学习笔记 (12) - CSS布局模型

    标签:HTML+CSS css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是 ...

  8. ios之UITableViewController(二) tableView的编辑模式

    tableView的编辑模式 表视图可以进入编辑模式,当进入编辑模式就可以进行删除.插入.移动单元等操作 效果图: 让表视图进入编辑模式,进入编辑模式的方法有两种,一种是使用导航栏的edit 按钮,另 ...

  9. Professional iOS Network Programming Connecting the Enterprise to the iPhone and iPad

    Book Description Learn to develop iPhone and iPad applications for networked enterprise environments ...

  10. 推荐最近使用的一个APP

    最近使用一个APP叫做得到,觉得很不错,将一些很好的思想提炼出来,然后语音表达,放松眼睛,聆听收获.