User Tools

Site Tools


java-script:jquery-fetch

JQuery fetch example

This example is using jquery to fetch data from a remote server. See also examples using Java Script async/await, or AJAX style.

fetch-jquery-ajax.html
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 
<div id="content"></div>
 
<script>
function loadUsers() {
  $.ajax({
    url: 'https://api.github.com/users',
    method: 'GET',
    dataType: 'json',
    success: function(users) {
      var html = '';
      for (var user of users) {
        html += `<p>Login: ${user.login}</p>
                 <p>ID: ${user.id}</p>
                 <img src="${user.avatar_url}" width="50" height="50" />
                 <p>Gravatar ID: ${user.gravatar_id}</p>
                 <p>URL: <a href="${user.url}" target="_blank">${user.url}</a></p>
                 <p>Html URL: <a href="${user.html_url}" target="_blank">${user.html_url}</a></p>
                 <p>Followers Url: ${user.followers_url}</p>
                 <p>Following Url: ${user.following_url}</p>
                 <p>Gists Url: ${user.gists_url}</p>
                 <p>Starred Url: ${user.starred_url}</p>
                 <p>Subscriptions Url: ${user.subscriptions_url}</p>
                 <p>Organizations Url: ${user.organizations_url}</p>
                 <p>Repos Url: ${user.repos_url}</p>
                 <p>Events Url: ${user.events_url}</p>
                 <p>Received Events Url: ${user.received_events_url}</p>
                 <p>Type: ${user.type}</p>
                 <p>Site Admin: ${user.site_admin}</p>
                 <hr>`;
      }
      $('#content').html(html);
    },
    error: function(xhr, status, error) {
      console.error(xhr.responseText);
    }
  });
}
 
loadUsers();
 
</script>
 
</body>
</html>
java-script/jquery-fetch.txt · Last modified: 2023/08/03 16:37 by odefta