使用jQuery请求Flickr公开照片Feed时出现jsonFlickrFeed未定义错误

这个问题我之前处理过，本质是Flickr的JSONP回调规则和jQuery默认的AJAX行为不匹配导致的，下面给你拆解原因和两种可行的解决方案：

为什么会报错？ #

Flickr的公开照片Feed接口（photos_public.gne）返回JSONP格式数据时，默认会把数据包裹在jsonFlickrFeed()函数调用里。但你的jQuery AJAX请求默认会生成一个随机的回调函数名（比如错误信息里的jQuery331016421245174669186_1523107884637），并通过callback参数传给Flickr。

Flickr不识别这个callback参数，依然返回jsonFlickrFeed(data)，但你的代码里并没有定义这个全局函数，所以浏览器就抛出了ReferenceError。

解决方案一：使用Flickr默认的回调函数名 #

直接全局声明Flickr期望的jsonFlickrFeed函数，然后在AJAX请求里指定用这个固定的回调名：

const flickrApiPoint = "https://api.flickr.com/services/feeds/photos_public.gne";

// 全局定义Flickr要求的回调函数
function jsonFlickrFeed(data) {
  console.log("成功获取Flickr数据：", data);
}

try {
  $.ajax({
    url: flickrApiPoint,
    dataType: 'jsonp',
    data: { "format": "json" },
    jsonpCallback: 'jsonFlickrFeed', // 告诉jQuery使用这个固定回调名
    error: function(xhr, status, err) {
      console.error("请求失败：", err);
    }
  });
} catch (e) {
  console.log(e);
}

解决方案二：让jQuery自动适配Flickr的参数规则 #

Flickr的JSONP接口支持通过jsoncallback参数自定义回调函数名，我们可以让jQuery使用这个参数传递自动生成的回调名，这样就不需要全局定义函数了：

const flickrApiPoint = "https://api.flickr.com/services/feeds/photos_public.gne";

try {
  $.ajax({
    url: flickrApiPoint,
    dataType: 'jsonp',
    data: { "format": "json" },
    jsonp: 'jsoncallback', // 告诉jQuery用这个参数名传递回调函数名
    success: function(data) {
      console.log("成功获取Flickr数据：", data);
    },
    error: function(xhr, status, err) {
      console.error("请求失败：", err);
    }
  });
} catch (e) {
  console.log(e);
}

第二种方案更符合jQuery的使用习惯，也避免了全局函数的污染，推荐优先使用。

内容的提问来源于stack exchange，提问作者Yordan Kanchelov