如何创建Github Repo查看器？

Question

我正在创建一个Web应用程序，在那里我想用JQuery创建一个Github Repo查看器& Ajax。基本上，我想要这样做

1. 附加一个“点击”事件处理程序的按钮。
2. 抓斗从文本
3. 在用户名的用户名，创建GitHub的API URL，并将其存储在一个名为APIUrl
4. 使用AJAX功能调用API的变量。
5. 循环访问数据并将数据附加到带有结果标识的div。
6. 使用空函数从结果div中清除以前的数据。

这里是我的代码：

var username, 

    APIUrl = "https://api.github.com/users/", 

    theApiUrl; 

$('#submit').on("click", function(eventHandler) { 

    username = $("#username").val(); 
    eventHandler.preventDefault(); 
    theApiUrl = APIUrl + username; 

    $.getJSON(theApiUrl, function(pico) { 

    document.getElementById("img").src = pico.avatar_url; 
    console.log(pico); 

    }) 
}) 

我可以理解，如果任何人能帮助我。

Answer 1

我不知道有多少来自回购的数据要撤回，但这应该足以让您在jQuery中开始使用它。

在第一次GET调用的回复中，您可以通过response.repos_url或您的案例获得回购网址，pico.repos_url。所以你所要做的就是做另一个GET，循环遍历结果，并追加你想要的视图。

的Javascript：

var username, 

APIUrl = "https://api.github.com/users/", 

theApiUrl; 

$('#submit').on("click", function(eventHandler){ 

username = $("#username").val(); 
eventHandler.preventDefault(); 
theApiUrl = APIUrl + username; 

    $.getJSON(theApiUrl, function(pico){ 

     document.getElementById("img").src = pico.avatar_url; 

     $.getJSON(pico.repos_url, function(repos){ 
      //console.log(repos); 
      for (var i = 0; i < repos.length; i++) { 
      $("#repos").append("<div>Name: " + repos[i].name + "<br />Description: " + repos[i].description + "<br/><br />"); 
      } 

     }); 
    }); 
}); 

HTML：

<input id="username"> 
<button id="submit">submit</button> 
<br /> <br /> 
<img id="img"> 
<br /> 
<div id="repos"></div> 

这里是一个小提琴：https://jsfiddle.net/bnrnk827/