Created
May 18, 2017 09:34
-
-
Save Papillard/54f5db01435eaccf85ed80e83e542a2b to your computer and use it in GitHub Desktop.
GET repos with AJAX
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function(){ | |
| $("#submit").on("click", function(){ | |
| // get the username from input | |
| // make a GET request to the API | |
| // inject the response in the page | |
| var userName = $("#username").val(); | |
| var apiUrl = "https://api.github.com/users/" + userName + "/repos"; | |
| $.ajax({ | |
| type: "GET", | |
| url: apiUrl, | |
| success: function(data){ | |
| // data is an array of repo Object | |
| $("#repos").empty(); | |
| data.forEach(function(repo){ | |
| var listItem = "<li>"+ repo.name + "(" + repo.language + ")" + "</li>"; | |
| $("#repos").append(listItem); | |
| }); | |
| }, | |
| error: function(error){ | |
| $("#repos").empty(); | |
| var listItem = "<li>"+ error.statusText + "</li>"; | |
| $("#repos").append(listItem); | |
| } | |
| }); | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>AJAX demo</title> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> | |
| </head> | |
| <body> | |
| <div class="container text-center"> | |
| <h1>Repos fetch</h1> | |
| <input type="text" placeholder="enter your username" id="username"> | |
| <button id="submit">Fetch repos</button> | |
| </div> | |
| <!-- Including jQuery + Bootstrap + your JS --> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment