一、免费API调用:

免费天气api接口 JS调用示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>天气API</title>
</head>
<body>
<h3>天气</h3>
<ul id="box"></ul>
<h3>小时天气</h3>
<ul id="hours"></ul>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script>
$.ajax({
type: 'GET',
url: 'https://www.tianqiapi.com/api/',
data: 'version=v1&city=济南',
dataType: 'JSON',
error: function () {
alert('网络错误');
},
success: function (res) {
$('#box').append('<li>City: ' + res.city + '</li>');
$('#box').append('<li>Weather: ' + res.data[0].wea + '</li>');
$('#box').append('<li>Tips: ' + res.data[0].air_tips + '</li>');
// 遍历数组
for (var i = 0; i < res.data[0].hours.length; i++) {
$('#hours').append('<li>' + (i + 1) + ': 时间: ' + res.data[0].hours[i].day + ' 气温: ' + res.data[0].hours[i].tem + ' </li >');
}
}
});
</script>
</body>
</html>

一、免费API调用的更多相关文章

  1. PHP免费API调用,使用(CURL)

    <?phpclass GetApiModel{//获取第三方API //获取身份证信息 //返回json /*{ "errNum": 0, "retMsg" ...

  2. 调用免费API查询全年工作日、周末、法定节假日、节假日调休补班数据

    前言 日常开发中,难免会用到判断今天是工作日.周末.法定节假日.节假日调休补班做一些业务处理,例如:仅在上班时间给用户推送消息.本文记录调用免费API查询全年工作日.周末.法定节假日.节假日调休补班数 ...

  3. 实用且免费API接口2

    之前已经整理过一些免费API,现在在知乎专栏上看到别人整理的一些实用免费API,有一些是没有重复的,因此也搬过来. 今天的内容,很适合你去做一些好玩.实用的东西出来. 先来科普个概念,开放应用程序的A ...

  4. python 使用API调用和风天气获取天气情况并保存

    第一步.注册注册免费API和阅读技术文档: 注册地址:https://console.heweather.com 注册完成后,激活登录后,新建应用 .新建key KEY名称 密钥ID 密钥 类型下载城 ...

  5. 车型识别API调用与批量分类车辆图片

    版权声明:本文为博主原创文章,转载 请注明出处 https://blog.csdn.net/sc2079/article/details/82189824 9月9日更:博客资源下载:链接: https ...

  6. Java web与web gis学习笔记(二)——百度地图API调用

    系列链接: Java web与web gis学习笔记(一)--Tomcat环境搭建 Java web与web gis学习笔记(二)--百度地图API调用 JavaWeb和WebGIS学习笔记(三)-- ...

  7. Vue.js——使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用

    概述 上一篇我们介绍了如何使用vue resource处理HTTP请求,结合服务端的REST API,就能够很容易地构建一个增删查改应用.这个应用始终遗留了一个问题,Web App在访问REST AP ...

  8. 信鸽推送 .NET (C#) 服务端 SDK rest api 调用库(v1.2)

    信鸽推送 .NET  服务端 SDK rest api 调用库-介绍 该版本是基于信鸽推送v2版本的时候封装的,先拿出来与大家分享,封装还还凑合,不依赖其他http调用件,唯一依赖json序列化dll ...

  9. xmlrpc实现bugzilla api调用(无会话保持功能,单一接口请求)

    xmlrpc实现bugzilla4   xmlrpc api调用(无会话保持功能,单一接口请求),如需会话保持,请参考我的另外一篇随笔(bugzilla4的xmlrpc接口api调用实现分享: xml ...

随机推荐

  1. python数据分析第二版:numpy

    一:Numpy # 数组和列表的效率问题,谁优谁劣 # 1.循环遍历 import numpy as np import time my_arr = np.arange(1000000) my_lis ...

  2. Python操作cx_Oracle笔记

    参考文章: http://cx-oracle.readthedocs.io/en/latest/cursor.html # 创建数据库连接 ordb = Oracle.connect("{0 ...

  3. 【java】Split函数踩坑记

    先看一段代码: String line = "openssh|7.1"; String[] pkg = line.split("|"); System.out. ...

  4. JavaScript 复杂判断的更优雅写法借鉴

    前言: 我们编写js代码时经常遇到复杂逻辑判断的情况,通常大家可以用if/else或者switch来实现多个条件判断,但这样会有个问题,随着逻辑复杂度的增加,代码中的if/else/switch会变得 ...

  5. threading包的例子和queue包的例子

    参考:https://www.cnblogs.com/tkqasn/p/5700281.html 参考:https://www.cnblogs.com/tkqasn/p/5700281.html th ...

  6. vue中怎么使用vuex

    做一个简单的vuex如何使用的介绍: 先安装: npm i vuex --save-dev 新建一个store文件夹, 在store文件夹中建一个index.js文件,在该文件中:         i ...

  7. Nginx实现反向代理与负载均衡

    1.什么是反向代理 使用nginx实现反向代理,Nginx只做请求的转发,后台有多个http服务器提供服务,nginx的功能就是把请求转发给后面的服务器,决定把请求转发给谁. 2.在一个虚拟机上创建两 ...

  8. PKU P2411 Mondriaan's Dream

    PKU P2411 Mondriaan's Dream 题目描述: Squares and rectangles fascinated the famous Dutch painter Piet Mo ...

  9. python实现处理excel单元格中的数据

    实现代码如下: # 将数据单元格(格式为:参数名=值)里的数据以键值对的形式放入字典中,返回该字典 class get_string: def cut_string(self,string): # 将 ...

  10. 所有硬币组合问题——动态规划hdu2069

    Problem Description Suppose there are 5 types of coins: 50-cent, 25-cent, 10-cent, 5-cent, and 1-cen ...