JSON Flickr API。位置 JSON 中的解析器错误和意外标记

JSON Flickr API. Parsererror and Unexpected token in JSON at position

我正在尝试使用 Flickr API,但遇到了一些问题。正在检索数据,然后可以在网络中查看。 问题是,在 JSON 数据被检索后,它失败了,我得到了错误。

Request failed: parsererror, SyntaxError: Unexpected token j in JSON at position 0

谁能看出哪里出了问题以及如何解决?谢谢。

function callToFlickr(){

        console.log('callToFlickr has started');

        var apiQueryStringUrl = "https://api.flickr.com/services/rest/?";
        $.getJSON( apiQueryStringUrl,
        {
            method: "flickr.photos.search",
            api_key: "6ef79f17371106eac95281f7b051492c",
            lat: "26.335100",
            lon: "17.228331",
            format: "json"
        } )

        .done( function ( data ) {
            console.log('Data... '+data);

            // $.each(data.photos, function(i,photo){
            //     $("<img/>").attr("src", photo.id).prependTo("#results");
            //         if ( i == 10 ) 
            //             return false;
            })

        .fail( function ( jqxhr, textStatus, error ) {
            var err = textStatus + ", " + error;
            console.log( "Request failed: " + err);

        });
    }

您正在查看的 API 希望您将要评估的 URL 用作 src<script> 标记,以便它可以调用一个函数,jsonFlickrApi 与数据。这意味着它实际上是一个 JSONP 响应,但我们不要争论语义。

这就是为什么,如果您查看回复的文本,它看起来像:

jsonFlickrApi({...})

您得到的错误表明位置 0 的字符是 j 并且与您得到的响应相匹配。那不是 JSON,所以你会得到一个错误。


相反,将属性 nojsoncallback 添加到您的查询字符串中,这样它将为您提供原始数据 JSON。像这样:

{
    method: "flickr.photos.search",
    api_key: "MY_API_KEY",
    lat: "26.335100",
    lon: "17.228331",
    format: "json",
    /*******************/
    nojsoncallback: true
    /*******************/
}

在此处查看文档:Callback Function

你可以看到它在这里工作:

function callToFlickr() {

  console.log('callToFlickr has started');

  var apiQueryStringUrl = "https://api.flickr.com/services/rest/?";
  $.getJSON(apiQueryStringUrl, {
      method: "flickr.photos.search",
      api_key: "6ef79f17371106eac95281f7b051492c",
      lat: "26.335100",
      lon: "17.228331",
      format: "json",
      /*******************/
      nojsoncallback: true
      /*******************/
    })

    .done(function(data) {
      console.log('Data... ' + data);
      console.log('Data... ' + JSON.stringify(data));

      // $.each(data.photos, function(i,photo){
      //     $("<img/>").attr("src", photo.id).prependTo("#results");
      //         if ( i == 10 ) 
      //             return false;
    })

    .fail(function(jqxhr, textStatus, error) {
      var err = textStatus + ", " + error;
      console.log("Request failed: " + err);

    });
}

callToFlickr();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


如果您更愿意坚持使用 JSONP 方法(我不会),jQuery .ajax 支持 JSONP 响应,请参阅 jQuery - Working with JSONP,语法如下:

function callToFlickr() {
  $.ajax({
      url: "https://api.flickr.com/services/rest/?",
      dataType: "jsonp",
      jsonp: "jsoncallback",
      data: {
        method: "flickr.photos.search",
        api_key: "6ef79f17371106eac95281f7b051492c",
        lat: "26.335100",
        lon: "17.228331",
        format: "json"
      }
    })
    .done(function(data) {
      console.log('Data... ' + data);
    })
    .fail(function(jqxhr, textStatus, error) {
      var err = textStatus + ", " + error;
      console.log("Request failed: " + err);
    });
}
callToFlickr();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>