前段使用jQuery实现阿里云天气API的调用

最新推荐文章于 2024-04-15 11:29:23 发布
最新推荐文章于 2024-04-15 11:29:23 发布
阅读量1.1k 收藏 5
点赞数
文章标签： 接口 jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46393254/article/details/105407070
版权

第一步：进入官网

阿里云官网

第二步：注册

在这里插入图片描述

第三步：进入云市场- ->API市场- ->天气查询

在这里插入图片描述
在这里插入图片描述

第四步：选购产品- ->结算

在这里插入图片描述

第五步：获取API调用地址以其一些请求参数（在付款页面下方有）

注意图中指定的基本信息，后面会用到，我以第三个api接口为例来进行演示，包括api地址，请求方式，返回类型，api调用所使用的认证方式以及一些请求参数（area和areaid必须选其一）。认证方式中的appcode怎么来？请看第六步。
在这里插入图片描述

第六步：获取APPCODE

进入控制台- ->云产品与服务- ->云产品
如果你购买成功的话，阿里云会自动为你创建一个app,你只需要复制使用appcode就ok。
获取到appcode，后面要用来作为身份认证
在这里插入图片描述

第七步：使用js实现api调用（最关键也是发现新大陆的时候）

下方是我进行测试的代码（代码有了，我相信大家知道怎么运行）

<body>
		<header>阿里云实时天气预报API接口测试</header>
		<div id="data">
			<select id="city">
				<option value="101110101">西安市</option>
				<option value
最低0.47元/天 解锁文章
风致﹏
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Jquery获取当前城市的天气信息
10-21
主要为大家详细介绍了Jquery获取当前城市的天气信息，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
如何使用jQuery Post方法调用OpenWeatherMap API？
04-11
在本教程中，我将展示如何使用jQuery Post方法（这是jQuery的AJAX方法）进行API调用。
jQuery调用接口获取城市天气信息
小颜颜6035的博客
08-13 2422
jQuery调用接口获取城市天气信息，代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src=
前端获取天气，及解决跨域问题
最新发布
前端小菜鸟也有人起的博客
04-15 424
前端获取天气，及解决跨域问题
jQuery获取天气预报的方法
weixin_34101229的博客
11-28 1679
2019独角兽企业重金招聘Python工程师标准>>> ...
HTML+jQuery+Vue实现天气查询网页
陈志鹏的博客
04-04 2585
HTML+jQuery+Vue实现天气查询网页 简介 页面使用了和风天气api，每天有5000免费额度。由于本人首先学会的是微信小程序，所以对jQuery的使用会类似于微信小程序。我对代码做了较为详细的注释，所以话不多说，放代码和布局方式 同一种颜色的框为同一个div下的布局 HTML代码 <html> <head> <title>天气查询</title> <!-- 引用jQuery -->
JQuery-Ajax异步请求获取天气预报（$.get）
weixin_41574976的博客
03-06 620
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JQuery-get</title> <!--武汉5天天气预报--> <script src="js/jquery.min.js">...
使用JaveScript实现阿里云天气API的调用
qq_42010726的博客
11-15 1867
JavaScript调用阿里云天气查询API实现过程 最近闲来无聊，玩了一下Hbuilder，做了一个手机APP，主要功能为调用阿里云天气API，并且在app界面展示出来。不巧阿里云只给出了cure,php,java，python等语言的调用例程，就是没有JS的实现方法，而且这方面的资料又好少，没办法，只能自己爬坑了。下面的我使用JS实现的调用方法，有需要可以参考。 先简单说一下流程，你要用人家的...
【jQuery】基于天行数据接口的天气预报
DomCode
11-13 1905
基于天行数据接口的天气预报
jQuery天气预报API查询特效代码
03-20
jQuery天气预报API查询代码是一款简单好调用的天气预报API查询代码。
JS,jquery调用天气预报api接口
01-16
jquery ajax方式获取天气预报接口数据, 解压就可以用, 包含图片资源文件, 样式比较漂亮, 下载看看吧
简单漂亮的jQuery自动定位当地天气预报代码
06-10
一款简单漂亮的绿色清爽风格的jQuery自动定位当地天气预报代码插件下载。
前端Jquery，Vue通过授权URL直传阿里云OSS
11-16
前端Jquery，Vue通过授权URL直传阿里云OSS，PUT请求方式，有很多前端不会，放这里大家自取
jQuery模仿阿里云购买服务器选择购买时间长度的代码
11-23
jQuery仿阿里云购买服务器选择时间长度,操作简单，只需点击所要选的时间段。下面给大家展示下效果图，就什么都明白了，如果大家觉得不错，请参考实现代码。 效果图如下： 代码： <!doctype html> <...
前端获取地区的天气状况
m0_55333789的博客
06-27 1750
前端获取地区的天气状况
前端天气预报功能
sun_qqq的博客
02-08 2695
平时经常百度天气情况，于是给自己的博客做了一个获取天气预报的功能
如何实现调用阿里云三方的api
liulang68的博客
04-17 1827
我本来是想上传视频了，但是阿里云这个api的收费很魔性。所以我的appcode是无法上传的，本来还想着大家直接把代码运行就可以了。你们只要改下appcode就可以了。 这个其实有免费的服务，自己找下就好了。 这个appcode码很重要，你阿里云上所有的三方api接口调用的一个appcode. 所以一定不要泄露。 import urllib, sys import ssl import urllib.request host = 'https://ali-weather.showapi.com' pat
JS,jquery调用天气api接口
热门推荐
免费天气预报接口 - 天气api
01-16 1万+
代码下载地址, 含完整资源文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>天气</title> <style> * { margin: 0px; ...
[Js/Jquery]天气接口简单使用
weixin_34186931的博客
12-23 197
写在前面 今天在群里有朋友使用一个天气api，觉得挺实用的，就记录一下。省的以后再花费功夫去找。 地址：http://www.k780.com/api，在这个网站提供了实用的几种接口，比如查询ip，天气，身份证等信息。 参数介绍 一个例子 1 &lt;!DOCTYPE html&gt; 2 &lt;html xmlns="http://www.w3.org/1999...
js 用阿里云天气api实现当地实时天气
05-30
好的，我可以帮你解决这个问题。首先，你需要获取阿里云天气API的授权，然后使用JavaScript发送HTTP请求来获取当地实时天气数据。 以下是基于jQuery的实现示例代码： ```javascript // 替换成你的阿里云天气API授权信息 const appCode = "your_app_code"; const city = "your_city"; // 发送HTTP请求获取实时天气数据 $.ajax({ url: `http://api.k780.com/?app=weather.realtime&weaid=${city}&ag=today,futureDay,lifeIndex&appkey=${appCode}&format=json`, dataType: "jsonp", success: function (result) { // 解析天气数据 const weatherInfo = result.result; const weather = `${weatherInfo.weather} ${weatherInfo.temperature}℃ ${weatherInfo.wind}`; console.log(weather); }, error: function (xhr, status, error) { console.error(`Failed to retrieve weather data: ${error}`); } }); ``` 在上面的代码中，我们使用了jQuery的`$.ajax()`方法来发送HTTP请求，设置`url`参数为阿里云天气API的请求URL，`dataType`参数为`jsonp`，以便可以跨域请求数据。请求成功后，我们解析返回的JSON数据，提取出实时天气信息，并将其打印到控制台上。 请注意，这里需要将`your_app_code`和`your_city`替换成你的阿里云天气API授权信息和所在城市ID。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值