Question

我在以下链接中找到了一个关于使用jQuery / ajax / json加载图像的有趣教程和脚本：

http://johnveldboom.com/posts/38/jquery-ajax-loading-display-images-or-text-until-script-is-finished

在本教程开头还有一个链接可以在jsfiddle上查看演示。

但我想这里有一个缺失的部分是为了完全理解这是如何工作的，那就是外部文件中的json代码！？那怎么样？我需要查看一个json示例来完全理解本教程和脚本。

任何人如何能够帮助我提供更好的教程或更好的教程？关于此的教程非常少。

Answer 1

totorial中的示例脚本从github加载数据。由于JSON响应是从免费的可访问服务器加载的，您只需获取端点的URL，在浏览器地址栏中输入它就可以了。

按照您的示例，地址为

https://api.github.com/users/jveldboom

我得到了

{
  "login": "jveldboom",
  "id": 303202,
  "avatar_url": "https://avatars.githubusercontent.com/u/303202?",
  "gravatar_id": "adfc243d062a2b77e6c33b9117138793",
  "url": "https://api.github.com/users/jveldboom",
  "html_url": "https://github.com/jveldboom",
  "followers_url": "https://api.github.com/users/jveldboom/followers",
  "following_url": "https://api.github.com/users/jveldboom/following{/other_user}",
  "gists_url": "https://api.github.com/users/jveldboom/gists{/gist_id}",
  "starred_url": "https://api.github.com/users/jveldboom/starred{/owner}{/repo}",
  "subscriptions_url": "https://api.github.com/users/jveldboom/subscriptions",
  "organizations_url": "https://api.github.com/users/jveldboom/orgs",
  "repos_url": "https://api.github.com/users/jveldboom/repos",
  "events_url": "https://api.github.com/users/jveldboom/events{/privacy}",
  "received_events_url": "https://api.github.com/users/jveldboom/received_events",
  "type": "User",
  "site_admin": false,
  "name": "John Veldboom",
  "company": null,
  "blog": "johnveldboom.com",
  "location": "Waynesboro, GA",
  "email": null,
  "hireable": true,
  "bio": "",
  "public_repos": 6,
  "public_gists": 14,
  "followers": 4,
  "following": 1,
  "created_at": "2010-06-11T23:12:47Z",
  "updated_at": "2014-03-28T20:58:39Z"
}

Answer 2

请参阅http://en.wikipedia.org/wiki/JSON了解json教程

它使用jquery

的工作jsfiddle的源代码

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by jveldboom</title>

  <script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script>



  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>

  </style>



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('#save').click(function () {
    // add loading image to div
    $('#loading').html('<img src="http://preloaders.net/preloaders/287/Filling%20broken%20ring.gif"> loading...');

    // run ajax request
    $.ajax({
        type: "GET",
        dataType: "json",
        url: "https://api.github.com/users/jveldboom",
        success: function (d) {
            // replace div's content with returned data
            // $('#loading').html('<img src="'+d.avatar_url+'"><br>'+d.login);
            // setTimeout added to show loading
            setTimeout(function () {
                $('#loading').html('<img src="' + d.avatar_url + '"><br>' + d.login);
            }, 2000);
        }
    });
});
});//]]>  

</script>


</head>
<body>
  <button id="save">Load User</button>
<div id="loading"></div>

</body>


</html>

Ajax从json加载图像

2 个答案: