天气预报的Ajax效果
最近在网站上看了很多显示实时天气预报的,挺实用而且用户体验也不错。对用户的帮助也比较大,用户可以通过你的网站了解到实时的天气信息。感觉比较有意思,于是自己钻研了一下其中的实现方法。于是决定把代码分享给大家,希望能对大家的前端事业有所贡献。
原理其实很简单。就是当页面加载进来之后,请求php文件,返回一组json。这组json就是我们所需要的有关天气的信息。我们只需要把返回来的json解析以后,放到相应的位置即可。
JavaScript的代码:
$(function () { $.ajax({
//请求的地址
url : "weather.php",
//请求成功后执行的函数
success : function (data) { //用eval()解析返回来的数据,将字符串转成JSON格式
var oD = eval('('+data+')'); //用jquery-1.8.2获取元素
var $place = $(".place"),
$temp = $(".temp"),
$wind = $(".wind"),
$windPower = $(".windPower"); //将返回来的数据放到相应的位置
$place.html(oD["weatherinfo"]["city"]);
$temp.html(oD["weatherinfo"]["temp"] + "°");
$wind.html(oD["weatherinfo"]["WD"]);
$windPower.html(oD["weatherinfo"]["WS"]); }
}); })
由于是从其他网站上面取数据,所以用了点php的小知识。PHP的思路是用file_get_contents()函数向指定的地址请求,返回来的数据再输出到前台。
PHP代码:
<?php
$weather = file_get_contents("http://www.weather.com.cn/data/sk/101010100.html");
echo $weather;
?>
HTML代码:
<div class="all">
这里是:<span class="place">城市</span>,
气温是<span class="temp">气温</span>,
风向:<span class="wind">风向</span>,
风力:<span class="windPower">风力</span>
</div>
为了使页面看得比较清楚,加了些样式。
Css代码:
.all span {font:bold 30px/50px "宋体";color:red;}
以上就是简单的天气预报效果,还有一些简单的原理实现。希望能对大家的前端事业有一些小小的帮助。以上仅是个人理解,若有小问题,咱们可以随时交流,互相学习嘛。
天气预报的Ajax效果的更多相关文章
- C# Winform 实现Ajax效果自定义按钮
技术看点 WinForm自定义控件的使用 自定义控件gif动画的播放 需求及效果 又来一波 C# GDI自定义控件show .这个控件已经使用几年了,最近找出来重构一下.原来是没有边框的,那么导致导航 ...
- 使用script的src实现跨域和类似ajax效果
在解决js的跨域问题的时候, 有多种方式, 其中有一种是利用script标签的src属性,因为这个属性是不受域名限制的,我们可以直接让src的这个链接指向跨域网站的一个接口, 这个接口返回的是js代码 ...
- Ajax效果
Ajax的效果就是不通过网页的跳转,就可以通过请求,就可以自动加载某个网页,在注册帐号时,经常 不通过网页跳转从数据库中查看是否有相同数据的出现,确认是否能够正确注册 下面是用其他方式实现ajax的效 ...
- jQuery Mobile学习之grid、等待显示的ajax效果、页面跳转、页面跳转传递参数等(二)
Index.cshtml <!-- Start of second page --> <section data-role="page" id="bar ...
- thinkphp中ajaxReturn方法实现ajax效果
前台代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- IFrame实现的无刷新(仿ajax效果)...
前台代码: <iframe style="display:none;" name="gg"></iframe> <form act ...
- Ajax效果--个人收藏
$.ajax({ url: "../../../Tools/WeChatMenu.ashx?action=get_menu", type: "post", da ...
- 自定义ajax,添加loading效果
自定义ajax /** * @desc 自定义ajax请求,添加等待gif */ var n=0; $.defineAjax=function(obj){ n++; if(!$('#loadingDi ...
- 详细的Ajax使用
1. ajax对xml的接收和处理 xml主要作用: 主要保存和传输数据 1. xml文档结构 dom操作xml getElementsByTagName(); //根据标签名获取元素 childNo ...
随机推荐
- Codeforces Round #353 (Div. 2) D. Tree Construction 模拟
D. Tree Construction 题目连接: http://www.codeforces.com/contest/675/problem/D Description During the pr ...
- opencv hog算子
梯度直方图特征(HOG) 是一种对图像局部重叠区域的密集型描述符, 它通过计算局部区域的梯度方向直方图来构成特征.Hog特征结合SVM分类器已经被广泛应用于图像识别中,尤其在行人检测中获得了极大的成功 ...
- GIT(1)----更新代码和上传代码操作的步骤
1.第一次下载代码 a.首先获得下载的地址,可从服务器,或者GitHut上获得.例如http://100.211.1.110:21/test/test.git b.终端里切换到想要将代码存放的目录,在 ...
- mongoDB系列之(三):mongoDB 分片
1. monogDB的分片(Sharding) 分片是mongoDB针对TB级别以上的数据量,采用的一种数据存储方式. mongoDB采用将集合进行拆分,然后将拆分的数据均摊到几个mongoDB实例上 ...
- [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080
相信如果用谷歌浏览器做移动端页面的时候 用touch事件的时候应该遇到过这个东东吧 documet.addEventListener("touchstart",function() ...
- 将MyEclipse项目导入到Eclipse中
1.请首先确保你的eclipse是javaee版本的,或者已经安装wtp插件 2.然后修改eclipse工程下的.project文件: 3.在<natures></natures&g ...
- 数据结构及算法篇bsearch crypt lfind lsearch qsort rand srand
crypt(将密码或数据编码) 相关函数 getpass 表头文件 #define _XOPEN_SOURCE #include<unistd.h> 定义函数 char * crypt ( ...
- org-mode入门教程
org-mode 入门教程By Z.H. Fu 切问录 www.fuzihao.org org-mode 入门教程 org-mode是Emacs提供的一个强大的编辑模式,可以用于做会议笔记以及制作各种 ...
- PHP自己定义安装
① 自己定义安装(先要在管理里停止apache服务,再卸载apache.再安装时不须要重新启动电脑) apache+php+mysql+phpmyadmin自行安装 我们建议大家,安装的时候安装到同一 ...
- 某浪PHP面试题及答案优化
前几天一网友去国内某知名IT公司某浪面试PHP,在他谈心得的时候得一面试题,下面写问题答案及优化方案,希望大家多提提意见. “神马,杨辉三角?” 我估计太久不上学了,当年初中数学及大学C语言课上的杨辉 ...