javascript - 在 JavaScript 中使用 JSON http 请求

Question

我目前正在开发一个编码项目，该项目需要从我认为是 JSON Http 请求(尽管我不确定)中提取图像、标题、缩略图等并将它们添加到网页中，然后将它们添加到网页中使用 CSS 设计样式。我使用 JSON、jQuery、AJAX 等的经验很少。我不知道如何获取我提供的字符串并将其转换为可用的 JavaScript 对象，然后将其添加到我的 html 页面中。

可以找到我应该从中提取此请求的 URL here .

当我访问该 URL 时，我会看到以下内容:

{"welcome_message":"Hi there! Good luck!","endpoints":["/videos","/articles"],"supportedParameters":{"startIndex":"The index of the first record to return in the response. Used for pagination. Min is 0, max is 300","count":"The number of records to return in the response. Min is 1, max is 20."},"sampleRequest":"http://ign-apis.herokuapp.com/articles?startIndex=30\u0026count=5"}

如果您注意到此 JSON 末尾有一个 URL，它指向 here 。当我访问该 URL 时，我会看到以下内容:

{"count":5,"startIndex":30,"data":[{"thumbnails":[{"url":"http://assets1.ignimgs.com/2016/11/07/akumajpg-f485c3_compact.jpg","size":"compact","width":306,"height":172},{"url":"http://assets1.ignimgs.com/2016/11/07/akumajpg-f485c3_medium.jpg","size":"medium","width":466,"height":262},{"url":"http://assets1.ignimgs.com/2016/11/07/akumajpg-f485c3_large.jpg","size":"large","width":626,"height":352}],"metadata":{"headline":"Opinion: Despite Low Sales, Street Fighter 5 Isn’t Going Anywhere","networks":["ign"],"state":"published","slug":"opinion-despite-low-sales-street-fighter-5-isnat-going-anywhere","subHeadline":"Call off the funeral, folks.","publishDate":"2017-02-08T19:00:52+0000","articleType":"article"},"tags":["feature","capcom","fighting","game","pc"]},{"thumbnails":[{"url":"http://assets1.ignimgs.com/2017/02/07/gamingawardsannouncement-ign-blogroll-lisahause-1486502878639_compact.jpg","size":"compact","width":306,"height":172},{"url":"http://assets1.ignimgs.com/2017/02/07/gamingawardsannouncement-ign-blogroll-lisahause-1486502878639_medium.jpg","size":"medium","width":466,"height":262},{"url":"http://assets1.ignimgs.com/2017/02/07/gamingawardsannouncement-ign-blogroll-lisahause-1486502878639_large.jpg","size":"large","width":626,"height":352}],"metadata":{"headline":"SXSW Gaming Awards Voting Ends Soon","networks":["ign"],"state":"published","slug":"sxsw-gaming-awards-voting-ends-soon-2","publishDate":"2017-02-08T19:00:25+0000","articleType":"article","subHeadline":"The 2017 SXSW Gaming Awards are open to public voting until February 10th.\r\n"},"tags":["blogroll-promoted-ad","sxsw"]},{"thumbnails":[{"url":"http://assets1.ignimgs.com/2017/02/08/daily-deals-blogrollsackboy-1486574960774_compact.png","size":"compact","width":306,"height":172},{"url":"http://assets1.ignimgs.com/2017/02/08/daily-deals-blogrollsackboy-1486574960774_medium.png","size":"medium","width":466,"height":262},{"url":"http://assets1.ignimgs.com/2017/02/08/daily-deals-blogrollsackboy-1486574960774_large.png","size":"large","width":626,"height":352}],"metadata":{"headline":"Daily Deals: Get LittleBigPlanet 3 for Free with a Discounted PlayStation Plus 1-Year Membership!","networks":["ign"],"state":"published","slug":"daily-deals-get-littlebigplanet-3-for-free-with-a-discounted-playstation-plus-1-year-membership","subHeadline":"How can you say no to joining PS Plus (or extending your current membership) when that cute, smiling Sackboy is waiting for you?","publishDate":"2017-02-08T18:00:23+0000","articleType":"article"},"tags":["daily-deals"]},{"thumbnails":[{"url":"http://assets1.ignimgs.com/2017/02/08/davidsyd-1280-1486576588705_compact.jpg","size":"compact","width":306,"height":172},{"url":"http://assets1.ignimgs.com/2017/02/08/davidsyd-1280-1486576588705_medium.jpg","size":"medium","width":466,"height":262},{"url":"http://assets1.ignimgs.com/2017/02/08/davidsyd-1280-1486576588705_large.jpg","size":"large","width":626,"height":352}],"metadata":{"headline":"Legion Review","networks":["ign"],"state":"published","slug":"legion-series-premiere-review","publishDate":"2017-02-08T17:57:01+0000","articleType":"article","subHeadline":"The premiere episode of FX’s new series Legion, debuting Wednesday night, offers up a whole new take on the X-Men world."},"tags":[]},{"thumbnails":[{"url":"http://assets1.ignimgs.com/2016/12/12/theoa-blogroll-1481576018102_compact.jpg","size":"compact","width":306,"height":172},{"url":"http://assets1.ignimgs.com/2016/12/12/theoa-blogroll-1481576018102_medium.jpg","size":"medium","width":466,"height":262},{"url":"http://assets1.ignimgs.com/2016/12/12/theoa-blogroll-1481576018102_large.jpg","size":"large","width":626,"height":352}],"metadata":{"headline":"Netflix Renews The OA for Season 2 and Love for Season 3","networks":["ign"],"state":"published","slug":"netflix-renews-the-oa-for-season-2-and-love-for-season-3","subHeadline":"The streaming services continues to order more original content. ","publishDate":"2017-02-08T17:28:12+0000","articleType":"article"},"tags":["news","brit-marling","company","drama","jason-isaacs"]}]}

我做了一些研究，让我认为这些是 JSON Http 请求。我面临的问题是，我不确定如何将它们转换为可以在网页中使用的可用 JavaScript 对象。为了尝试自己解决这个问题，我在 Lynda.com 上观看了“JavaScript 和 JSON”，以及“JavaScript 和 AJAX”，试图找出如何处理这些内容，但没有取得任何有意义的成果。我采取的下一步是阅读“JavaScript 和 jQuery:缺失的手册”中有关 JSON 的部分。在我的书中，它说使用函数 $.getJSON(url, data, callback);我假设我会添加上面发布的 url 作为 url 的参数。但我不确定要传递什么“数据”和“回调”。

为了长话短说，有人可以给我一个示例，说明如何从提供的链接中获取 JSON 字符串并将信息转换为我可以排列和设计样式的可用对象吗？

请注意，我对编程和 StackOverflow 都是新手。我意识到这里有关于如何正确提问的严格准则。如果我的问题有任何不恰当的地方，请告诉我。非常感谢任何和所有的帮助!

Answer 1

如果您使用 $.getJSON，则无需执行任何操作即可将 JSON 字符串转换为可用数据，它会自动为您完成此操作(这就是 $.get 和 $.getJSON)。

但是，您将无法直接从 Javascript 调用 API，因为同域规则禁止对不同域进行 AJAX 调用。您需要在自己的服务器上提供执行调用的代理；您可以使用Simple PHP Proxy为此。

data 参数是一个对象，其中包含您需要发送到 API 的任何参数。它是可选的，如果不需要，您可以将其省略。

callback 参数是您的函数，它对返回的对象执行某些操作(该对象已由 $.getJSON 为您解析)。例如:

$.getJSON(url, function(result) {
    alert(result.welcome_message);
});