Petfinder API和jQuery [英] Petfinder api and jquery

问题描述

我正在使用jquery来拉取petfinder api，但是我对此并不陌生.我遇到了问题，因为页面上没有任何显示.这是链接，您可以看到有数据

I am using jquery to pull petfinder api but i am new to this. I am having issues as nothing is showing up on the page. Here is the link and you can see there is data

http://api.petfinder.com/pet.getRandom?key=b6ba5a567c1e4f543b3c8a4b7ae0cf76&shelterid=KY305&output=full&format=json

这是我在js文件中提供的代码.您会看到我只是试图添加描述，并尝试仅对ID为1的大尺寸照片进行拍照.

Here is the code i have in the js file. You can see i ma just trying to add the description and trying for photo on just one the large size photos with ID 1 .

很抱歉遇到这样的新手问题.不知道为什么它没有显示.这是我的测试网站

Sorry for such a newbie question. Not sure why it is not showing . Here is my test site

http://www.wpcreations.net/matt/petsearch.html

管理员/用户-确定问题后，我将删除实时链接和密钥.谢谢你.

admins / users - I will remove the live links and key once i figure out the issue. Thank you.

$(document).ready(function(){

    var petfinderAPI = "http://api.petfinder.com/pet.getRandom?format=json&key=b6ba5a567c1e4f543b3c8a4b7ae0cf76&callback?";

    var petfinderOPT ={

        animal:"dog",
        shelterid:"KY305",
        output:"basic",
        //format:"json"

    };


    function displayInfo(data){

        var infoHTML = '<ul>';
        $.each(data.pet,function(i, pets){
        infoHTML += '<p> ' +  pets.description + ' <p>';
        //infoHTML += '<img src = " ' + photo.options.media.photos.photo + '"></a><li>';
        });
        infoHTML += '</ul>';

        $('#petfinderInfo').html(infoHTML);

        }

    $.getJSON(petfinderAPI,petfinderOPT,displayInfo)
  .done(function(petApiData) { alert('Data retrieved!'); })
  .error(function(err) { alert('Error retrieving data!'); 
});


}); //end ready function

这是Pet finder API文档的摘录-跨域支持(JSONP)

Here is a snippet from pet finder api doc - Cross-Domain Support (JSONP)

Petfinder API支持JSONP，用于跨域JavaScript请求.发出任何JSON格式的请求时，可以添加callback参数以表示这是JSONP请求. callback参数的值应该是唯一的字符串.

The Petfinder API supports JSONP for cross-domain JavaScript requests. When making any request that is in JSON format, the callback parameter may be added to denote that this is a JSONP request. The value for the callback parameter should be a unique string.

以下是使用jQuery的JSONP请求的基本示例.这里的回调=?需要查询字符串参数来指定它是JSONP调用. jQuery将替换'?'在查询字符串中具有唯一的时间戳值(即'jQuery110206092635430395603_1391456463806').

Below is a basic example of a JSONP request, using jQuery. Here the callback=? query string parameter is required to specify that it is a JSONP call. jQuery will replace the '?' within the query string with a unique time-stamped value (i.e. 'jQuery110206092635430395603_1391456463806').

$.getJSON('http://api.petfinder.com/my.method?format=json&key=12345&callback=?')
  .done(function(petApiData) { alert('Data retrieved!'; })
  .error(function(err) { alert('Error retrieving data!'); 
});

这里是petfinder api的链接.我不确定您是否必须加入网站 https://www.petfinder .com/developers/api-docs#request-format

Here is link to petfinder api . I am not sure if you have to join site or not https://www.petfinder.com/developers/api-docs#request-format

推荐答案

谢谢，但是我发现了什么地方出了问题，并使用了ajax来提取信息.您可以关闭此答案，但这是一些代码

Thank you but i have figured out what was wrong and used ajax to pull the info. You can close this answer but here is some of the code

<script type="text/javascript">
$(document).ready(function(){
    var url = 'http://api.petfinder.com/pet.getRandom?key=longkeygoeshere&shelterid=KY305&output=full&format=json';
    $.ajax({
        type : 'GET',
        data : {},
        url : url+'&callback=?' ,
        dataType: 'json',
        success : function(data) {              
            // stores result
            var result = '';

            var petfinder = data.petfinder;
            var infoHTML = '<ul>';
            infoHTML += '<li>';
            infoHTML += '<strong>Description</strong><br>';
            infoHTML += petfinder.pet.description['$t'];
            infoHTML += '</li>';

            infoHTML += '</li>';

            infoHTML += '</ul>';
            // return infoHTML;
            $('#petfinderInfo').html(infoHTML);

            // $('#petfinderInfo').html(petfinder.pet.description['$t']);
            // 
            console.log(petfinder);
        },
        error : function(request,error)
        {
            alert("Request: "+JSON.stringify(request));
        }
    });
});

</script>

这篇关于Petfinder API和jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！