如何从URL获取JSON对象

Question

我很新于网页开发。

当我输入这个链接时

https://api.locu.com/v1_0/venue/search/?name=jimmy%20johns&api_key=b1f51f4ae241770f72fca5924d045733c4135412

在我的浏览器中输入，我可以看到JSON对象。

我需要做什么才能在我的javascript中使用这个JSON对象？我已经尝试使用JQuery的$.getJSON但没有成功。

编辑

使用JSONP可行！将&jsonp=readJSON&?callback=?附加到URL后，我得到了想要的JSON。感谢所有提供有用信息的答案。

$.getJSON( "https://api.locu.com/v1_0/venue/search/?name=jimmy%20johns&api_key=b1f51f4ae241770f72fca5924d045733c4135412&jsonp=readJSON&?callback=?", function() {
        console.log( "success" );
    })

    function readJSON(response){
      console.log (response);
    }

- user1072264

---

您可以使用Ajax和服务器来获取并读取该文件。 - Spencer Wieczorek

你会将这个变成ajax请求，然后将其传递到回调函数中。从那里开始，你就可以进行赋值了。 - Fallenreaper

当你尝试使用$.getJSON()时，你的浏览器控制台是否出现了有关不允许跨域请求的错误？（例如 No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'your page here' is therefore not allowed access.） - nnnnnn

该API没有响应CORS头，但它允许JSONP，您需要相应地设置$.getJSON选项。 - Patrick Evans

这里有一个 SitePoint 的教程 https://www.sitepoint.com/ajaxjquery-getjson-simple-example/，还有一个在 GitHub 上的 https://gist.github.com/zuch/3720842。 - Rachel Gallen

使用JSONP成功了！ - user1072264

Answer 1

问题是，您服务文件的域名(api.locu.com)是否与此域名相同？我想它不是。在这种情况下，您有两个选择：

• 您的后端可以代理来自该站点的请求
• 如果API支持，您必须使用JSONP对象

- fodma1

Answer 2

不直接从网页浏览器内部进行请求，需要使用代理：另一个服务器代表您发出请求并返回结果。

为什么不行？

网页浏览器在安全方面非常严格。保护用户免受恶意活动的策略之一是限制您的Javascript可以向哪些域名发出HTTP请求。

从您的域名（源）到另一个域名的HTTP请求称为跨域请求。这些默认情况下是被禁止的，除非收到的HTTP响应包括头文件Access-Control-Allow-Origin，否则您将无法读取响应正文。

那怎么办？

通过使用代理作为中介。代理不是网页浏览器，它不关心Access-Control-Allow-Origin，并且将读取响应。

有许多代理可供使用。其中一个简单的代理是YQL（Yahoo查询语言）。以下是一篇使用jQuery的相关文章：http://ajaxian.com/archives/using-yql-as-a-proxy-for-cross-domain-ajax

- salezica

---

在这种情况下，API 允许 JSONP 响应，因此他们可以在浏览器中执行它，而无需先获取代理。 - Patrick Evans

@PatrickEvans 很好的发现！我会把答案留在这里，因为它提供了一个解释和一个更一般性的问题解决方案。你能写出自己的答案，使用特定的JSON-P方法吗？我知道可以用jQuery轻松完成，但我已经很久没有这样做了。 - salezica

我建议你在回答中再添加一个关于JSONP的部分，大多数API只需要一个format=json和callback=functionName请求参数。 - Patrick Evans

在这种情况下，只需将&callback=?添加到URL的末尾即可让$.getJSON()正常工作。 - nnnnnn

Answer 3

这应该可以让你理解，如果你正在使用JQuery...但你也可以使用其他东西。

var url = "https://api.locu.com/v1_0/venue/search/?name=jimmy%20johns&api_key=b1f51f4ae241770f72fca5924d045733c4135412";
var result;
var settings = {
  success: function(data){
    result = data;
    //do anything else related to this data here as you need it fetched, and is not linear.
  }
}
$.ajax(url, settings);

现在，我注意到你使用了getJSON，这几乎是完全相同的。但是我没有看到你使用成功函数，所以如果你按照你的方式做，你尝试过了吗：

$.getJSON(url, function(data){
  result = data;
});

我可能错了，但你说：“没有运气”，所以我对你使用 $.getJSON 的尝试有限的理解。

- Fallenreaper

---

是的，但他或她对Web开发还很新，可能不知道如何检查控制台中的错误。如先前的评论所示，由于跨域请求，Ajax请求将无法工作。但根据帕特里克的评论，该API支持JSON-P... - nnnnnn

我们在这里不是为了说“这就是如何打开您的Web控制台”，而是为了回答问题...尽管听起来很严厉，但OP应该通过任何简单的在线Web / JavaScript教程获得基本理解。 - Fallenreaper

作为经验丰富的网络开发人员，我们知道这里的实际问题是跨域请求。 - nnnnnn

这是一个选项。我以前从未使用过locu，作为一个外部用户，将会利用jsonp。我没有得到足够的信息来知道它们是外部资源还是内部资源，所以我不想草率下结论。 - Fallenreaper

我更喜欢直接得出疯狂的结论。（但说真的，在这种情况下，我已经测试过使用和不使用json-p，所以我知道它与json-p一起正常工作。我没有发布答案，因为如果slezica按照Patrick的建议更新了他们的答案，那将全面涵盖它...） - nnnnnn

Answer 4

我不太清楚你的问题，但我认为你可以使用一个叫做 Ajax 的调用，类似于：

$.ajax({                       
     url: "https://api.locu.com/v1_0/venue/search/?name=jimmy%20johns&api_key=b1f51f4ae241770f72fca5924d045733c4135412",
     type: 'get',
     cache: false,
     success: function (response) {
         console.log(response);
     }
});

- Samuel sanchez lopez

---

这基本上就是 $.getJSON 所做的事情。如果它不起作用，那么这也无济于事，所以帮助不大。 - Barmar