在JavaScript中使用JSON http请求

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

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

当我转到该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"}

{"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的末尾有一个URL，它将导致。当我访问该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"}

{"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的部分：缺少的手册。在我的书中，它说使用函数$.getJSONurl，data，callback；我假设我会添加上面发布的url作为url的参数。不过，我不确定传递什么数据和回调

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

请注意，我对编程和StackOverflow都是新手。我意识到这里有严格的指导方针，关于如何正确地提问。如果我的问题有任何不合适的地方，请告诉我。非常感谢您的任何帮助

如果您使用的是$.getJSON，则无需做任何事情即可将JSON字符串转换为可用数据，它会自动为您执行此操作，这就是$.get和$.getJSON之间的区别

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

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

回调参数是对返回的对象执行某些操作的函数，该对象将由$.getJSON为您解析。例如：

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

---

数据是您需要发送到API的任何参数。如果没有参数，您可以省略它。回调是对返回的数据执行某些操作的函数。@epascarello$.getJSON会自动执行该操作。这不会发生：XMLHttpRequest无法加载http://ign-apis.herokuapp.com/articles?startIndex=30&count=5. 请求的资源上不存在“Access Control Allow Origin”标头。因此，不允许访问源“null”。除非你的应用程序在那个域名上，否则我能不能用JSONP来做这个？我感谢你的回应！JSONP需要API服务器上的支持。大多数API都没有实现它。非常感谢Barmar！