Question

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

<!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的新手，所以我真的很困惑为什么响应被包装在函数中并且控制台日志不起作用。任何帮助，将不胜感激。

Answer 1

您可以使用多种方式，但两种最方便的方式是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);
}

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

注意 - ＆gt; JSONP采用要在其上发送响应的回调函数的名称。

Answer 2

JSONP是一种将您的请求放入脚本标记URL（允许任何域）的技术，并且您在该URL中传入一个参数，该参数指示您希望返回的结果脚本的函数名称调用并传递你的数据。在这种情况下，您似乎指定回调函数名为getResults。

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

因此，您需要了解的第一件事是，您要求数据的服务器是否支持JSONP，如果是，请确保您确切了解它将如何格式化响应以及它如何预期回调要指定的函数（常见约定是使用callback=xxx URL参数，但不一定要这样做。

如果您想要数据的服务器不支持JSONP，那么您根本无法使用JSONP从中获取数据。如果它不支持某些其他跨域请求策略，那么您无法通过浏览器网页从中获取数据，并且必须从浏览器以外的其他内容（如其他服务器）执行请求。

Answer 3

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

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

否则，您无法从浏览器中获取json数据。

Answer 4

来自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);

使用JSONP从另一台服务器获取JSON数据

4 个答案: