本文仅供参考。

本文主要针对初学者使用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>");                    
                });                              
                },