【新手向】一个超简单的基于jQuery ajax的天气预报Demo
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>天气</title>
</head>
<body>
<div id="app">
<h2>最新天气实况</h2>
<p>城市:<span></span></p>
<p>日期:<span></span></p>
<p>天气:<span></span></p>
<p>当前气温:<span></span></p>
<p>风向:<span></span></p>
<p>最高气温:<span></span></p>
<p>最低气温:<span></span></p>
<p>温馨提醒:<span></span></p>
<h2>未来7天天气预报</h2>
<table border="1" id="detail">
<thead>
<tr>
<th>日期</th>
<th>天气</th>
<th>当前温度</th>
<th>最高气温</th>
<th>最低气温</th>
<th>风向</th>
<th>风力</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$.ajax({
url: 'https://www.tianqiapi.com/api/?version=v1&appid=test&appsecret=test',
type: 'get',
data: {
city: "北京"
},
dataType: 'json',
error: function(resp, status) {
console.log('请求失败:', status, resp);
},
success: function(resp, status) {
var wCity = resp.city;
var wDate = resp.data[0].date;
var wWea = resp.data[0].wea;
var wTem = resp.data[0].tem;
var wWin = resp.data[0].win[0];
var wTemMax = resp.data[0].tem1;
var wTemMin = resp.data[0].tem2;
var wAirTips = resp.data[0].air_tips;
$('#app p:nth-child(2) span').html(wCity);
$('#app p:nth-child(3) span').html(wDate);
$('#app p:nth-child(4) span').html(wWea);
$('#app p:nth-child(5) span').html(wTem);
$('#app p:nth-child(6) span').html(wWin);
$('#app p:nth-child(7) span').html(wTemMax);
$('#app p:nth-child(8) span').html(wTemMin);
$('#app p:nth-child(9) span').html(wAirTips);
$("#detail tbody").empty();
for (var i = 0; i < 7; i++) {
var forword_day = "<tr><td>" +
resp.data[i].day + "</td><td>" +
resp.data[i].wea + "</td><td>" +
resp.data[i].tem + "</td><td>" +
resp.data[i].tem1 + "</td><td>" +
resp.data[i].tem2 + "</td><td>" +
resp.data[i].win[0] + "</td><td>" +
resp.data[i].win_speed + "</td>" +
"</tr>";
$("#detail tbody").append(forword_day);
}
}
})
})
</script>
</body>
</html>
【新手向】一个超简单的基于jQuery ajax的天气预报Demo的更多相关文章
- 50行代码实现的一个最简单的基于 DirectShow 的视频播放器
本文介绍一个最简单的基于 DirectShow 的视频播放器.该播放器对于初学者来说是十分有用的,它包含了使用 DirectShow 播放视频所有必备的函数. 直接贴上代码,具体代码的含义都写在注释中 ...
- 基于Jquery+Ajax+Json+存储过程 高效分页
在做后台开发中,都会有大量的列表展示,下面给大家给大家分享一套基于Jquery+Ajax+Json+存储过程高效分页列表,只需要传递几个参数即可.当然代码也有改进的地方,如果大家有更好的方法,愿留下宝 ...
- 10分钟完成一个最最简单的BLE蓝牙接收数据的DEMO
这两天在研究蓝牙,网上有关蓝牙的内容非常有限,Github上的蓝牙框架也很少很复杂,为此我特地写了一个最最简单的DEMO,实现BLE蓝牙接收数据的问题, 不需要什么特定的UUID, 不需要什么断开重连 ...
- 打造支持apk下载和html5缓存的 IIS(配合一个超简单的android APP使用)具体解释
为什么要做这个看起来不靠谱的东西呢? 由于刚学android开发,还不能非常好的熟练控制android界面的编辑和操作,所以我的一个急着要的运用就改为html5版本号了,反正这个运用也是须要从serv ...
- 基于Jquery+Ajax+Json+高效分页
摘要 分页我相信大家存储过程分页已经很熟悉了,ajax更是耳熟能详了,更别说我们的json,等等. 如果说您没用过这些东东的话,我相信看完这篇博文会对您有帮助的,,如果有任何问题不懂或者有bug没问题 ...
- 基于jquery ajax的多文件上传进度条
效果图 前端代码,基于jquery <!DOCTYPE html> <html> <head> <title>主页</title> < ...
- 【新手向】一个超简单的jquery.mCustomScrollbar滚动条插件Demo
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script> < ...
- 实用的Python(3)超简单!基于Python搭建个人“云盘”
1 简介 当我们想要从本地向云服务器上传文件时,比较常用的有pscp等工具,但避免不了每次上传都要写若干重复的代码,而笔者最近发现的一个基于Python的工具updog,可以帮助我们在服务器上搭建类似 ...
- 超简单!基于Python搭建个人“云盘”
1. 简介 当我们想要从本地向云服务器上传文件时,比较常用的有pscp等工具,但避免不了每次上传都要写若干重复的代码,而笔者最近发现的一个基于Python的工具updog,可以帮助我们在服务器上搭建类 ...
随机推荐
- get和post请求方式的区别,常见状态码的整理
get和post的区别 get和post是什么? HTTP协议中的两种发送请求的方法.get从指定的资源请求数据: post向指定的资源提交要被处理的数据. HTTP是什么? 超文本传输协议(HTTP ...
- jsp格工化日期
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%> .当后台传过来的时 ...
- mysql JOIN关键字 语法
mysql JOIN关键字 语法 作用:用于根据两个或多个表中的列之间的关系,从这些表中查询数据.大理石量具 说明:数据库中的表可通过键将彼此联系起来.主键(Primary Key)是一个列,在这个列 ...
- POJ 3111 K Best ( 二分 )
题意 : 给出 N 个物品的价值和重量,然后要求选出 K 个物品使得选出来物品的单位重量价值最大,最后输出被选物品的编号. 分析 : 很容易去想先算出每个物品的单位价值然后升序排序取前 K 个,但是 ...
- VXcode学习
1.安装中文包(chinese) 2.打开控制面板ctrl+shift+p
- 获取项目配置的常用方法(Struts/Servlet)
struts: //web.xml中: <context-param> <param-name>paramName</param-name> <param-v ...
- MySQL主主模式
mysql主主复制配置: HOSTNAME IPADDR PORT节点1:my-prod01.oracle.com 192.168.10.97 3306 节点2:my-prod02.oracle.co ...
- 织梦dedecms发布视频文章前台变成一张图片的解决方法
在发布文章的时候,有时需要插入视频的代码,如优酷.腾讯等视频,这样更能让文章变的丰富,但是在发布视频的时候,前台并不能播放视频,而是一张图片 解决这个方法其实很简单,在发布视频文章的时候,将附加选项的 ...
- 职位-CFO:CFO
ylbtech-职位-CFO:CFO 首席财务官——CFO(Chief Finance Officer)是企业治理结构发展到一个新阶段的必然产物.没有首席财务官的治理结构不是现代意义上完善的治理结构. ...
- R语言CSV文件
R语言CSV文件 在R语言中,我们可以从存储在R环境外部的文件读取数据.还可以将数据写入由操作系统存储和访问的文件. R可以读取和写入各种文件格式,如:csv,excel,xml等. 在本章中,我们将 ...