如何让 JSONP 与 jQuery 一起工作?

Posted

技术标签:

【中文标题】如何让 JSONP 与 jQuery 一起工作?【英文标题】:How to get JSONP to work with jQuery? 【发布时间】:2013-06-30 02:53:24 【问题描述】:

我正在尝试从 Flickr API 获取一些 JSONP 来使用:

http://jsfiddle.net/SRc98/

$.getScript('http://api.flickr.com/services/feeds/photos_public.gne?format=json&tags=cats', function(data, textStatus, jqxhr) 
    alert(data);
);

警报给出undefined,控制台显示:

Uncaught ReferenceError: jsonFlickrFeed is not defined

Flickr API 响应有问题还是有办法让它正常工作?

http://api.flickr.com/services/feeds/photos_public.gne?format=json&tags=cats

【问题讨论】:

因为您的问题与 JSONP(而不是 JSON)有关..请看我的回答..它可能会有所帮助 【参考方案1】:

尝试使用jQuery.getJSON() 代替:

$.getJSON('http://api.flickr.com/services/feeds/photos_public.gne?format=json&tags=cats&jsoncallback=?', function(data, textStatus, jqxhr) 
    alert(data);
);

你可以看到Online API Documentation Demo

编辑:

此处添加了现场演示

// Set the flicker api url here
var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";

// Set the tag display options
var options = 
  tags: "cats",
  format: "json"
;

// Get json format data using $.getJSON()
$.getJSON(flickerAPI, options)
  .done(OnApiCallSuccess)
  .fail(OnApiCallError);

// Api call success callback function
function OnApiCallSuccess(data) 
  $.each(data.items, function(i, item) 
    $("<img>").attr("src", item.media.m).appendTo("#images");

    // Load only the first 6 images for demo
    if (i === 6) return false;
  );


// Api call error callback function
function OnApiCallError(jqxhr, textStatus, error) 
  var err = textStatus + ", " + error;
  console.log("Request Failed: " + err);
img 
  height: 100px;
  float: left;
  padding: 0 10px 10px 0;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="images"></div>

【讨论】:

【参考方案2】:

JQuery 的 getScript 将数据参数硬编码为 null,并自动评估检索到的脚本。 我认为文档是错误的。好消息是您可能只是想评估脚本,根本不需要回调。

对于您的情况:- 从您的 URL 检索的脚本确实正在评估,但目前没有 function jsonFlickrFeed().so 的定义,这就是显示未定义错误的原因。 您需要包含一些有其定义的 JS 文件。

【讨论】:

以上是关于如何让 JSONP 与 jQuery 一起工作?的主要内容,如果未能解决你的问题,请参考以下文章

如何让 jquery.couch.app.js 与 IE8 一起工作

如何将 jsonp 与 angular-ui 日历一起使用

无法让 JSONP 与 WCF 数据服务一起使用

如何将 jquery-ui 与 nodejs 一起使用?

让 jQuery 自动完成功能与 PHP 源一起工作

在这个例子中,让 jQuery/Ajax 与 CodeIgniter 一起工作的最佳方法是啥?