2014-02-11 65 views
7

我试图从一家公司托管的网站收集JSON数据。我不在同一个域中,所以我不能访问它。从标题看来,它们似乎也不使用CORS。所以我试图使用JSONP来解析数据,但它似乎不起作用。我试过做$ .getJSON和$ .ajax,但那些抛出错误,不要调用函数。到目前为止,这是我的解决方案,并且在服务器的响应中,它仍然不会将数据包装在getResults中。使用JSONP从另一台服务器获取JSON数据

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<script type="text/javascript" src="jquery/js/jquery-1.9.0.min.js"></script> 

<script> 
function getResults(data) { 
    console.log(data[0].name); 
} 
</script> 
<script type='text/javascript' src='https://solstice.applauncher.com/external/contacts.json?callback=getResults'></script> 

我是相当新的HTML,JavaScript和jQuery的,所以我真的很困惑,为什么响应被包装在功能和控制台日志ISN没有工作。任何帮助,将不胜感激。

+0

给出的网址没有调用任何函数,只是返回数据。它不适用于JSONP调用。 – lincolnk

回答

2

JSONP是一种技术,通过该技术,您可以将请求放入脚本标记URL(允许到任何域),并在该URL中传递一个参数,该参数指示您希望生成的脚本返回打电话并传递您的数据。在这种情况下,它看起来像指定回调函数名为getResults

为了使JSONP正常工作,您发送请求的服务器必须专门支持它,因为它需要特定类型的响应格式,并且它使得来自任何浏览器的任何域都能发出请求,而不是所有站点都想要的东西启用。

因此,首先需要了解的是,如果您要求数据的服务器支持JSONP或不支持,那么请确保您完全理解它将如何格式化响应以及如何预期回调函数被指定(公约约定与callback=xxx URL参数,但它不必这样做。

如果你想要数据的服务器不支持JSONP,那么你根本无法使用JSONP从中获取数据如果它不支持其他的跨域请求策略,那么你不能通过浏览器网页从它获取数据,并且必须从浏览器以外的其他地方获取数据(比如另一个服务器)

+0

我如何知道服务器是否支持JSONP? – user3299416

+0

@ user3299416 - 您必须查看该网站API的文档以查看它支持的内容。您可能还必须以某种方式提出请求,才能知道您要求它执行JSONP。 – jfriend00

1

JSONP是服务器必须实现的方法。

如果您确定服务器接受并理解JSONP,那么您用来传递回调名称的参数可能不是callback。如果他们有一个,请看他们的文档。

否则,你根本无法从浏览器中获取json数据。

0

here活样本:

JSONP - JSON与填充,即。JavaScript对象包裹在一个回调,在我们的情况下,它jsonCallback

这是文件的内容:用于检索文件

jsonCallback(
    { 
     "sites": 
     [ 
      { 
       "siteName": "JQUERY4U", 
       "domainName": "http://www.jquery4u.com", 
       "description": "#1 jQuery Blog for your Daily News, Plugins, Tuts/Tips &amp; Code Snippets." 
      }, 
      { 
       "siteName": "BLOGOOLA", 
       "domainName": "http://www.blogoola.com", 
       "description": "Expose your blog to millions and increase your audience." 
      }, 
      { 
       "siteName": "PHPSCRIPTS4U", 
       "domainName": "http://www.phpscripts4u.com", 
       "description": "The Blog of Enthusiastic PHP Scripters" 
      } 
     ] 
    } 
); 

代码:

(function($) { 
var url = 'http://www.jquery4u.com/scripts/jquery4u-sites.json?callback=?'; 

$.ajax({ 
    type: 'GET', 
    url: url, 
    async: false, 
    jsonpCallback: 'jsonCallback', <-- callback here 
    contentType: "application/json", 
    dataType: 'jsonp', 
    success: function(json) { 
     console.dir(json.sites); 
    }, 
    error: function(e) { 
     console.log(e.message); 
    } 
}); 

})(jQuery); 
+1

我得到这个错误:'Uncaught SyntaxError:Unexpected token:' – Si8

5

您可以使用许多方法,但两个最方便的是AJAX调用或使用jQuery的getJSON()方法

使用AJAX调用

$(document).ready(function() { 
    $(".btn").click(function() { 
    $.ajax({type: "get", 
      url: "http://api.forismatic.com/api/1.0/", 
      data: {method: "getQuote",format: "jsonp",lang: "en"}, 
      dataType: "jsonp", 
      jsonp: "jsonp", 
      jsonpCallback: "myJsonMethod" 
    }); 
    }); 
}); 
function myJsonMethod(response){ 
    console.log (response); 
} 

response Object具有从API调用中的所有JSON数据的上述方法。

使用的getJSON()

$(document).ready(function() { 
    $(".btn").click(function() { 
    $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=myJsonMethod&?callback=?"); 
    }); 
}); 
function myJsonMethod(response){ 
    console.log (response); 
} 

在同样的事情发生上述方法。

注 - > JSONP取回响应函数的名称。

+0

在你的第一个例子“Using Ajax Call”中,你使用type:“POST”。 JSONP仅适用于GET请求。 JSONP就像

相关问题