在JavaScript中使用JSON http请求

Question

我目前正在编写一个编码项目，它需要从我认为是JSON Http请求（尽管我不确定）中提取图像，标题，缩略图等，然后将它们添加到一个网页，然后将被CSS样式化。我使用JSON，jQuery，AJAX等方面的经验极少。我无法弄清楚如何接收我提供的字符串，并将其转换为可添加到我的html页面的可用JavaScript对象。

我应该从这个请求拉的URL可以找到here。

当我去，我看到下面的那个网址：

{"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导致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的参数。虽然我不确定要传递什么“数据”和“回调”。

使一个长期的问题，短期，可能有人给我如何采取从所提供的链接（S）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); 
});