Demo: https://arquitecturaibm.com/demo/call-rest-api-demo/index.html
Code HTML
<!DOCTYPE html> <html> <head> <title>reqres jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="hello.js"></script> </head> <body> <ul> <div id="reqres-id"></div> <div id="reqres-email"></div> <div id="reqres-first_name"></div> <div id="reqres-last_name"></div> <div id="reqres-avatar"></div> </ul> </body> </html>
Code JQuery
$(document).ready(function() {
$.ajax({
url: "https://reqres.in/api/users/2"
}).then(function(response_data) {
/*trama response*/
/*
{
"data": {
"id": 2,
"email": "janet.weaver@reqres.in",
"first_name": "Janet",
"last_name": "Weaver",
"avatar": "https://reqres.in/img/faces/2-image.jpg"
},
"support": {
"url": "https://reqres.in/#support-heading",
"text": "To keep ReqRes free, contributions towards server costs are appreciated!"
}
}
*/
$('#reqres-id').append(response_data.data.id);
$('#reqres-email').append(response_data.data.email);
$('#reqres-first_name').append(response_data.data.first_name);
$('#reqres-last_name').append(response_data.data.last_name);
$('#reqres-avatar').append(response_data.data.avatar);
});
});
