实时更新的天气预报页面
2017-04-19 23:07
155 查看
这是一个实时更新的天气预报界面。
先说一下思路：由于我请求数据采用的是ajax的方式，ajax是不能直接想聚合数据申请数据的。所以这里通过服务器的php获取聚合数据里的天气的信息 再由我的页面想php申请数据
1.创建一个button 点击的时候开始数据的请求，具体步骤分为以下五部：
var btn=document.queryselector("button")获取页面的button元素，为元素添加一个点击方法
btn.onclike=function(){
var cx=new XMLHttpRequest();定义一个AJAX
cx.open("GET","http://192.168.3.5/tianqi/index.php?cityname="+inputdiv.value+"&key=df0035098882d554ba70162e871f5e34")
这里的key是从聚合数据申请的
数据装入，这里的传输方式有两种 get和post get方式会将我们数据的数据拼接到网页的url中，很不安全并且不能传输图片 视频 音乐等类型的文件。所以不推荐使用，一般都是用post 但是不是一定的 。具体还是看需求。
前后端数据传输的方式有两种ajax和form两种 submit只有在form中才有效 ajax可以实现页面不刷新的，form点击登录成功之后可以实现跳转
post的传输方式：
cx.open("[POST","http://192.168.3.5/tianqi/index.php","true")
这里的true指的是是否异步，可以不写 一般来说不写的话默认是异步。
存在异步和同步两种方式，一般代表可以多线程可以同时操作，而同步指的是请求发出以后，要上一个请求执行完成后才会执行下一个请求，会出现阻塞情况。
将数据发送出去
cx.send（） post的发送方式 cx.send(cityname="+inputdiv.value)
请求成功的话服务器会返回数据，不成功的话服务器也会将错误的代码发回，需要我们查阅聚合数据的相关文档查明失败的原因
<
4000
p>请求发送回来的数据是一大段的转码后字符串，需要我们将字符串转JSON格式的数据。就是JSON.parse的方法。
然后将我们需要的数据提取出来放到页面当中。
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.w{
width: 1000px;
height: 800px;
background: rgba(255,188,25,.1);
margin:0 auto;
}
.center{
width: 598px;
height: 550px;
border: 1px solid black;
margin: 0 auto;
text-align: center;
background-image: url(slider.jpg);
background-size: 598px 550px;
}
.top{
width: 600px;
height: 150px;
/*border: 1px solid red;*/
margin: 0 auto;
background: url(ww.jpg);
background-size: 600px 150px;
}
div.content{
width: 400px;
height: 400px;
margin: 0 auto;
margin-top: 10px;
}
div.content p{
width: 100%;
height: 50px;
border: 1px solid black;
line-height: 50px;
font-family: "微软雅黑";
color:rgb(117,111,113);
}
div.content .one{
height: 100px;
line-height: 30px;
}
input.input1{
width: 200px;
height: 30px;
margin: 20px auto;
background:rgba(117,111,113,.1);
}
div.center button{
width: 64px;
height: 34px;
font-size: 14px;
}
</style>
</head>
<body>
<div class="w">
<div class="top"></div>
<div class="center">
<input class="input1" type="text" placeholder="城市名字"><button>查询</button>
<div class="content">
<p></p>
<p></p>
<p ></p>
<p ></p>
<p></p>
<p></p>
<p></p>
<p class="one"></p>
</div>
</div>
</div>
</body>
<script>
var inputdiv=document.querySelector("input");
var btn=document.querySelector("button")
var p=document.querySelectorAll("div.content p");
var a;
btn.onclick=function (){
var cx=new XMLHttpRequest();
cx.open("GET","http://192.168.3.5/tianqi/index.php?cityname="+inputdiv.value+"&key=df0035098882d554ba70162e871f5e34")
cx.send();
cx.onreadystatechange=function (){
if(cx.readyState==4){
console.log("请求完成")
// console.log(JSON.parse(cx.responseText))
a=JSON.parse(cx.responseText);
console.log(a)
p[0].innerText="城市："+a.result.today.city;
p[1].innerText="日期："+a.result.today.date_y;
p[2].innerText="当前温度："+a.result.sk.temp;
p[3].innerText="今日天气："+a.result.today.weather;
p[4].innerText="感觉："+a.result.today.dressing_index;
p[5].innerText="晨练指数："+a.result.today.exercise_index;
p[6].innerText="今日温度："+a.result.today.temperature;
p[7].innerText="穿衣建议："+a.result.today.dressing_advice;
}
}
}
// console.log(a)
</script>
</html>
先说一下思路：由于我请求数据采用的是ajax的方式，ajax是不能直接想聚合数据申请数据的。所以这里通过服务器的php获取聚合数据里的天气的信息 再由我的页面想php申请数据
1.创建一个button 点击的时候开始数据的请求，具体步骤分为以下五部：
var btn=document.queryselector("button")获取页面的button元素，为元素添加一个点击方法
btn.onclike=function(){
var cx=new XMLHttpRequest();定义一个AJAX
cx.open("GET","http://192.168.3.5/tianqi/index.php?cityname="+inputdiv.value+"&key=df0035098882d554ba70162e871f5e34")
这里的key是从聚合数据申请的
数据装入，这里的传输方式有两种 get和post get方式会将我们数据的数据拼接到网页的url中，很不安全并且不能传输图片 视频 音乐等类型的文件。所以不推荐使用，一般都是用post 但是不是一定的 。具体还是看需求。
前后端数据传输的方式有两种ajax和form两种 submit只有在form中才有效 ajax可以实现页面不刷新的，form点击登录成功之后可以实现跳转
post的传输方式：
cx.open("[POST","http://192.168.3.5/tianqi/index.php","true")
这里的true指的是是否异步，可以不写 一般来说不写的话默认是异步。
存在异步和同步两种方式，一般代表可以多线程可以同时操作，而同步指的是请求发出以后，要上一个请求执行完成后才会执行下一个请求，会出现阻塞情况。
将数据发送出去
cx.send（） post的发送方式 cx.send(cityname="+inputdiv.value)
请求成功的话服务器会返回数据，不成功的话服务器也会将错误的代码发回，需要我们查阅聚合数据的相关文档查明失败的原因
<
4000
p>请求发送回来的数据是一大段的转码后字符串，需要我们将字符串转JSON格式的数据。就是JSON.parse的方法。
然后将我们需要的数据提取出来放到页面当中。
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.w{
width: 1000px;
height: 800px;
background: rgba(255,188,25,.1);
margin:0 auto;
}
.center{
width: 598px;
height: 550px;
border: 1px solid black;
margin: 0 auto;
text-align: center;
background-image: url(slider.jpg);
background-size: 598px 550px;
}
.top{
width: 600px;
height: 150px;
/*border: 1px solid red;*/
margin: 0 auto;
background: url(ww.jpg);
background-size: 600px 150px;
}
div.content{
width: 400px;
height: 400px;
margin: 0 auto;
margin-top: 10px;
}
div.content p{
width: 100%;
height: 50px;
border: 1px solid black;
line-height: 50px;
font-family: "微软雅黑";
color:rgb(117,111,113);
}
div.content .one{
height: 100px;
line-height: 30px;
}
input.input1{
width: 200px;
height: 30px;
margin: 20px auto;
background:rgba(117,111,113,.1);
}
div.center button{
width: 64px;
height: 34px;
font-size: 14px;
}
</style>
</head>
<body>
<div class="w">
<div class="top"></div>
<div class="center">
<input class="input1" type="text" placeholder="城市名字"><button>查询</button>
<div class="content">
<p></p>
<p></p>
<p ></p>
<p ></p>
<p></p>
<p></p>
<p></p>
<p class="one"></p>
</div>
</div>
</div>
</body>
<script>
var inputdiv=document.querySelector("input");
var btn=document.querySelector("button")
var p=document.querySelectorAll("div.content p");
var a;
btn.onclick=function (){
var cx=new XMLHttpRequest();
cx.open("GET","http://192.168.3.5/tianqi/index.php?cityname="+inputdiv.value+"&key=df0035098882d554ba70162e871f5e34")
cx.send();
cx.onreadystatechange=function (){
if(cx.readyState==4){
console.log("请求完成")
// console.log(JSON.parse(cx.responseText))
a=JSON.parse(cx.responseText);
console.log(a)
p[0].innerText="城市："+a.result.today.city;
p[1].innerText="日期："+a.result.today.date_y;
p[2].innerText="当前温度："+a.result.sk.temp;
p[3].innerText="今日天气："+a.result.today.weather;
p[4].innerText="感觉："+a.result.today.dressing_index;
p[5].innerText="晨练指数："+a.result.today.exercise_index;
p[6].innerText="今日温度："+a.result.today.temperature;
p[7].innerText="穿衣建议："+a.result.today.dressing_advice;
}
}
}
// console.log(a)
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 局部刷新缓存（新闻、天气预报 需要实时更新的）
- 【用C#读取sina天气预报到wap页面】
- 用C#读取sina天气预报到wap页面
- ASP.NET的实时天气及24小时天气预报(C#)
- ASP.NET的实时天气及24小时天气预报(C#)
- 根据IP显示天气预报代码：只显示成一行，可在页面调用JS即可
- 实战系列之天气预报实时采集
- [C#]实时天气及24小时天气预报
- 如何实现页面时间实时动态更新（局部更新）
- ASP.NET的实时天气及24小时天气预报(C#) [转]
- ASP.NET的实时天气及24小时天气预报(C#)
- 用C#读取sina天气预报到wap页面
- ASP.NET的实时天气及24小时天气预报(C#)
- ASP.NET的实时天气及24小时天气预报(C#)
- ASP.NET的实时天气及24小时天气预报(C#)
- 实战系列之天气预报实时采集
- 实时天气及24小时天气预报
- ASP.NET的实时天气及24小时天气预报(C#)
- 静态页面无刷新添加回复,实时更新静态网页
- 页面显示天气预报的方法