在JavaScript

时间:2017-03-09 01:36:55

标签: javascript jquery html json ajax

我目前正致力于一个编码项目,需要从我认为的JSON Http请求中提取图像,标题,缩略图等(虽然我不确定)并将它们添加到网页,然后将使用CSS设置样式。我使用JSON,jQuery,AJAX等的经验很少。我无法弄清楚如何使用我提供的字符串并将其转换为可以添加到我的html页面的可用JavaScript对象

我可以找到我应该提取此请求的网址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对象。为了尝试解决这个问题,我自己看了" JavaScript和JSON"在Lynda.com上,以及" JavaScript和AJAX"试图弄清楚如何处理这些,并没有带来任何有意义的成果。我采取的下一步是阅读关于JSON的部分" JavaScript和jQuery:The Missing Manual"。在我的书中它说使用函数$ .getJSON(url,data,callback);我假设我将上面发布的url添加为url的参数。我不确定要传递什么"数据"和#34;回调"虽然。

要简短地提一个问题,有人可以举例说明如何从提供的链接中获取JSON字符串,并将信息转换为可以安排和设置的可用对象吗?

请注意,我对编程和StackOverflow都不熟悉。我意识到有关于如何在这里正确提问的严格指导。如果我的问题不合适,请告诉我。非常感谢任何和所有的帮助!

1 个答案:

答案 0 :(得分:1)

如果您正在使用$.getJSON,则无需执行任何操作即可将JSON字符串转换为可用数据,它会自动为您执行此操作(这是区别之间的区别) $.get$.getJSON)。

但是,由于禁止对不同域进行AJAX调用的相同域规则,您无法直接从Javascript调用API。您需要在自己的服务器上提供执行呼叫的代理服务器;您可以使用Simple PHP Proxy进行此操作。

data参数是一个对象,包含您需要发送到API的所有参数。它是可选的,如果不需要,你可以把它留下来。

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

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