欢迎光临怀仁市黑马视觉品牌官网,开启你的互联网营销之旅!
新闻中心 网络推广 网站建设 优化推广

用JQ来读取API数据并循环数据,举例用天行数据和聚合数据,AJAX加载

时间:2021-05-28   来源:怀仁市网站建设

本文仅供参考。

本文主要针对初学者使用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);
                 },  
    //成功后返回数据结束  
    
  });
  
  
    });
    
    })



本文标签:
新闻推荐
龙华网站建设多少钱?
龙华网站建设多少钱?

大家好,这里是黑马视觉,今天我们来聊聊在深圳建一个网站需要多少钱?龙华网站建设需要多少钱?从所周知,...

龙华外贸网站建设必需知道的四大注意事项
龙华外贸网站建设必需知道的四大注意事项

在深圳有很多外贸公司,他们已经不满足于通过其他平台来引流,于是他们都需要建设一个自己自己的外贸网站,...

jq控制视频播放和暂停以及声音
jq控制视频播放和暂停以及声音

在网站开发的过程中,我们常常需要添加一些视频来让网站内容更加丰富,比如说网页中有一个按钮,点击按钮后...

PBOOTCMS图片水印不支持jpeg格式怎么处理?
PBOOTCMS图片水印不支持jpeg格式怎么处理?

在使用PBOOT的时候,我们发现在后台开启了上传图片时给图片打上水印的功能,但是客户在上传图片的时候始终打...

在线沟通
点我即可
对话
15899750475
手机
微信扫一扫

编辑 装修 价格 托管 实力 流量 搜索引擎 服务器 标准 上线 业务

微信
Top