JSON Flickr API。位置的 JSON 中的 Parsererror 和 Unexpected token

Question

我正在尝试使用 Flickr API，但遇到了问题。正在检索数据，然后可以在网络中查看。 问题是，在检索到 JSON 数据后，它会失败并且出现错误。

请求失败：解析器错误，语法错误：JSON 中的意外标记 j 在位置 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);

        });
    }

Answer 1

您正在查看的 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>