如何使用jsonp获取数据？答案

【问题标题】：How to get data using jsonp?如何使用jsonp获取数据？
【发布时间】：2012-12-24 22:29:54
【问题描述】：

我正在尝试从 http://www.ikea.com/us/en/catalog/products/10176292 获取一些文本使用 jsonp。

为了测试它是否有效，这就是我所做的

$.getJSON("http://www.ikea.com/us/en/catalog/products/10176292?format=json&jsoncallback=?",function(data) {
$('h1').text(data.modified);
});

这不起作用，因此它可能无效，但我在 google 上找到的所有 jsonp 文档都使用 twitter 或 flickr API 作为示例。我很确定宜家没有 API，所以这些方法对我没有帮助。

但这确实有效并从 flickr 返回文本

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=25053835@N03&format=json&jsoncallback=?",function(data) {
$('h1').text(data.title);
});

我正在尝试这个，因为我看到了这个示例http://www.foxycart.com/whos-using-foxy/case-studies/modernash，它似乎可以与 jsonp 从 ikea 获取文本数据一起使用。我不需要任何复杂的东西，只需要能够检索一些简单的文本。

有人可以指点我正确的方向或提供一些提示吗？

谢谢

【问题讨论】：

That URL doesn't return JSON，更不用说 JSONP了。您不能只是神奇地附加一些查询参数并期望返回 JSON(P)；服务器必须实际支持它。
我试过了，URL 本身给出了 301 Moved Permanently 并重定向到 HTML 的页面。它也不会发送任何CORS headers，所以你会点击same origin policy。
我有点猜想它不会像那样工作，但我很好奇你们认为这个开发人员是如何做到的？我正在尝试这个，因为我看到了他的例子，他可以使用他的书签购物车从宜家使用 JSONP 提取数据并使用它foxycart.com/whos-using-foxy/case-studies/modernash
其实我找到了the cross domain info。无论如何，我看不到对宜家本身的任何要求。看起来服务器端发生了一些事情（可能是 curl、解析、返回 JSON），然后正常获取数据。

标签： javascript jquery json jsonp

【解决方案1】：

宜家的链接不是 JSON，因此您无法从中提取。宜家似乎没有公共 API。因此，您将无法从他们那里获取任何数据以供使用。

对于 Flickr，您走在正确的轨道上。这是你可以做到的。

$.ajax({
    dataType: 'jsonp',
    url: 'http://api.flickr.com/services/feeds/photos_public.gne?id=25053835@N03&format=json&jsoncallback=?',
    success: function(data){
        console.log(data);
    } 
});

如果你想得到标题，你会做 data.title 等等。

【讨论】：

我知道宜家没有 API，但我很好奇这个开发者是怎么做到的？ foxycart.com/whos-using-foxy/case-studies/modernash 使用他的书签购物车，他能够从宜家网站上提取数据并将其发送到购物车。这不违反同源政策吗？

【解决方案2】：

您可以使用 ajax 补充您的 getJSON（请参阅此处的官方文档 - http://api.jquery.com/jQuery.getJSON/），然后声明 JSONP 非常容易。

    $.ajax({
      dataType: "jsonp",
      url: 'http://api.flickr.com/services/feeds/photos_public.gne?id=25053835@N03&format=json&jsoncallback=?',
      data: data,
      success: function( data ) {
            $('h1').text(data.modified);
       });

编辑：@Matt Ball 是对的。在您使用类似上面的 ajax 调用之前，您需要确保您使用的 URL 返回实际的 json。您应该能够导航到所需的 URL 并查看原始 JSON。然后上面的所有函数都会做相应的获取和解析。

【讨论】：

我知道宜家没有 API，但我很好奇这个开发者是怎么做到的？ foxycart.com/whos-using-foxy/case-studies/modernash 通过他的书签购物车，他能够从宜家网站上提取数据并将其发送到购物车。这不违反同源政策吗？
因此，在查看您的示例站点后，他们特别说“API。JSONP 购物车交互。用户同步。Webhooks。”由于 IKEA 似乎没有 API，而且您的 URL 不是真正的 JSON，因此 FoxyCart 的人似乎没有使用 json，可能正在使用自定义 webhook/脚本。所以我想回答你的问题，如果没有要获取的 JSON，你就无法获取 JSON。这个家伙 (github.com/moritzh/ikea-data) 写了一个 gem 来从 IKEA 获取东西，但它比一些简单的 jQuery 更高级。我建议对 AJAX、REST 和基本的 http 请求进行一些研究。

【解决方案3】：

在我看来，他们只是从网站上抓取数据。所有产品信息都存储在 html 中，他们将其添加到自己的购物车中的对象中。

由于您将图像拖到他们的书签中，我查看了图像中存储的数据@http://www.ikea.com/us/en/catalog/products/20011408/#/80193735：

<img id="productImg" src="/us/en/images/products/lack-side-table__0115088_PE268302_S4.JPG" border="0" alt="LACK Side table IKEA The high-gloss surfaces reflect light and give a vibrant look. Easy to assemble. Low weight; easy to move." title="LACK Side table - high gloss red, 21 5/8x21 5/8 &quot; - IKEA" width="500" height="500" class="mn_global_shadow ui-draggable" style="width: 244px; display: inline-block; height: 244px; left: 0px; top: 0px;">

在标题中，我们得到名称、饰面、颜色和尺寸。
价格和数量保存在整个网站上似乎是标准的 id/class 中。

除了我没有看过之外，它是如何工作的，但它似乎并不太复杂。希望这会有所帮助。

【讨论】：

【解决方案4】：

您可能需要提供一些自定义标题。 Wireshark 是你的朋友

【讨论】：