本文仅供参考。
本文主要针对初学者使用API数据不知道如何调用,那么用JQ来读取和返回是醉为简单的。本文主要以天行数据和聚合数据为例子,因为他们都提供了免费的API接口。大家可以自己去申请。
API数据大多数返回的数据类型为json,那么我们先看两组返回的数据。
1:天行数据的返回数据。拿抖音热点榜举例:
{ "code": 200, "msg": "success", "newslist": [ { "hotindex": 11552765, "label": 5, "word": "郭聪明暂停唱歌接受治疗" }, { "hotindex": 8354588, "label": 0, "word": "5年5诉离婚男方将提上诉" }, { "hotindex": 6483092, "label": 1, "word": "国足醉新身价出炉" } ] }
可以看到我们需要的数据在:newslist这个数组中,然后数据中又包括了一个或者多个对象。
2:再看看聚合数据的返回。举个例子为身份证查询。
{ "resultcode":"200", "reason":"成功的返回", "result":{ "area":"湖北省武汉市黄陂区", "sex":"男", "birthday":"1992年01月20日", "verify":"" }, "error_code":0}
可以看到我们需要的数据是在:result中,他包括了一个对象。没有数组。
一个是数组,一个是对象。 这是他们醉大的区别。
接下来我们写JS请求和返回。
$.ajax({ url:'http://apis.juhe.cn/idcard/index', type:'get', dataType:'jsonp', //注意聚合数据这里要用JSONP才能正常返回 data:{ //传递参数 cardno:'420116199201203716', //传递参数,可以通过前端获取,方法如下 dtype:'json', key:'76ca6507bea4自己申请的KEY' }, success:function(info){ console.log(info); $("#result").append(info.result.sex+info.result.area+info.result.birthday); // 这是聚合数据直接输出的 }, error:function(error,Msgerror){ console.log(Msgerror); alert("错误"); } })
假如是天行数据的数组,要如何输出?
$("#TJ").click(function() { //数据提交 var url="http://api.tianapi.com/txapi/star/index"; var key="49fed76b6a"; var urlb=$("input#test").val(); //获取到INPUT输入值 $.ajax({ url: url, type: 'POST', dataType: 'json', //这里用JSON,和上面聚合数据JSONP不同。 data:{ //传递参数 astro:urlb, key:key, }, //成功后返回数据 success:function(date){ var i=0; $.each(date.newslist, function(idx,obj) { $("#result").append("<div class='dy'>"+"<div class='title'>"+obj.type+"</div>"+"<div class='desc'>"+obj.content+"</div>"+"</div>"); }); }, error:function(error){ alert(error); }, //成功后返回数据结束 }); }); })
显示数据的几种方式:
**种:直接输出想要的。
success:function(info){
console.log(info);
$("#result").append(info.result.sex+info.result.area+info.result.birthday);
},
第二种:循环输出键和键值。
success:function(res){
console.log(res); //请求成功后执行的代码
for (var a in res) {
$("#result").append(a+": "+res[a]+"<br/>");
};
},
第三种:循环输出某一个键值的数组
success:function(date){
var i=0;
$.each(date.newslist, function(idx,obj) {
$("#result").append("<div class='dy'>"+"<div class='title'>"+obj.title+"</div>"+"<div class='desc'>"+obj.mcontent+"</div>"+"<div class='desc'>"+obj.fcontent+"</div>"+"<div class='desc'>"+obj.mcontent1+"</div>"+"<div class='desc'>"+obj.fcontent1+"</div></div>");
});
},
大家好,这里是黑马视觉,今天我们来聊聊在深圳建一个网站需要多少钱?龙华网站建设需要多少钱?从所周知,...
在深圳有很多外贸公司,他们已经不满足于通过其他平台来引流,于是他们都需要建设一个自己自己的外贸网站,...
*近在维护一台服务器的时候发现这台服务器CPU一直在99%到100%。服务器上运行的网站不多,也才3个.一开始怀...
安装好宝塔面板之后,我们进行安全扫描,会发现至少扫描出十几个风险。如果有钱,就直接企业版,一键进行修...