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

第一步:进入官网

阿里云官网

第二步:注册

前段使用jQuery实现阿里云天气API的调用_第1张图片

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

前段使用jQuery实现阿里云天气API的调用_第2张图片
前段使用jQuery实现阿里云天气API的调用_第3张图片

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

前段使用jQuery实现阿里云天气API的调用_第4张图片

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

注意图中指定的基本信息,后面会用到,我以第三个api接口为例来进行演示,包括api地址,请求方式,返回类型,api调用所使用的认证方式以及一些请求参数(area和areaid必须选其一)。认证方式中的appcode怎么来?请看第六步。
前段使用jQuery实现阿里云天气API的调用_第5张图片

第六步:获取APPCODE

进入控制台- ->云产品与服务- ->云产品
如果你购买成功的话,阿里云会自动为你创建一个app,你只需要复制使用appcode就ok。
获取到appcode,后面要用来作为身份认证
前段使用jQuery实现阿里云天气API的调用_第6张图片

第七步:使用js实现api调用(最关键也是发现新大陆的时候)

下方是我进行测试的代码(代码有了,我相信大家知道怎么运行)

<body>
		<header>阿里云实时天气预报API接口测试header>
		<div id="data">
			<select id="city">
				<option value="101110101">西安市option>
				<option value="101111001">铜川市option>
				<option value="101110901">宝鸡市option>
				<option value="101110200">咸阳市option>
				<option value="101110501">渭南市option>
				<option value="101110801">汉中市option>
				<option value="101110701">安康市option>
				<option value="101110601">商洛市option>
				<option value="101110300">延安市option>
				<option value="101110413">榆林市option>
				<option value="101110211">兴平市option>
				<option value="101110510">韩城市option>
				<option value="101110511">华阴市option>
			select>
			<input type="button" value="查询" id="btn">
			<div id="info">div>
		div>
body>
<script src="jquery-1.12.2.js"></script>
<script>
	$(function(){
     
		$('#btn').click(function(){
     
			var area = $('#city').val();
			$.ajax({
     
				type:'POST',//这里的请求方式与前面所说的请求方式一样
				url:'https://tianqimore.market.alicloudapi.com/weather',//url就是api请求接口
				data:{
     'src':area,'type':7},//传入参数
				beforeSend:function(request){
     //向接口发送身份认证
					request.setRequestHeader("Authorization","APPCODE " + "你的appcode");//注意这里APPCODE后面有一个空格,不能删掉
				},
				dataType:'json',//请求返回数据格式
				success:function (data) {
     
					var weather = data.msg;
					var tag = '';
					$.each(weather,function(i,e){
     
						var day = e.day;
						var wea = e.wea;
						var tema = e.tema;
						var temb = e.temb;
						tag+= '
'+ '日期:'+day+''+ '
    '+ '
  • 天气:'+wea+'
  • '
    + '
  • 最高温度:'+tema+'
  • '
    + '
  • 最低温度:'+temb+'
  • '
    + '
'
+ '
'
; }) $("#info").html(tag); }, error:function(e){ alert("网络异常,请重试"); } }); }); }); </script>

这是我在浏览器中测试的结果,你可以自己建一个文本文件,把代码拷贝进去,然后将文件后缀名改为 .html,然后在浏览器中运行。
前段使用jQuery实现阿里云天气API的调用_第7张图片

第八步:加上CSS渲染

作为前端开发的我们,我想这一步我相信大家都会。

最后非常感谢大家抽空阅读这篇文章,如有不足之处,恳请批评指正,谢谢!

你可能感兴趣的:(接口,jquery)