深圳网站建设,龙华网站建设,龙岗网站建设,布吉网站建设

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

来源:深圳黑马品牌网站设计 发布时间:2021-05-28 19:07:06

本文仅供参考。

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



隐藏内容需要登陆后查看
本文关键词:
相关文章
用JS来判断安卓或者苹果手机,来解决video标签的embed进度条问题上一篇文章
下一篇文章CSS写一个高度跟随宽度变化的DIV