Med Java

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== JQuery fetch example ======

This example is using jquery to fetch data from a remote server.
See also examples [[java-script:fetch-using-async-await|using Java Script async/await]], or [[java-script:ajax-fetch|AJAX style]].

<code javascript 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>

</code>