Yo uso una clase API
basada en JQuery
para trabajar con todo lo relacionado con la api
. Dependiendo de la api
a usar el token
tendra un funcionamiento distinto, en mi caso mi API
usa el token mediante un Header
de la petición HTTP
var api; // Variable api global para todos los .js
class Api {
// Se usa el constructor para crear nuestra api con la url correcta
constructor(host, port, protocol, token) {
this.host = host;
this.port = port;
this.protocol = protocol;
this.token = token;
this.baseUrl = protocol + host + ":" + port + "/";
this.result = undefined;
this.req = undefined;
};
// Creamos las funciones GET, POST y les asignamos un succes CallOut para recuperar los datos de la peticion
Get(req, async) {
this.req = req;
//Creamos una peticion ajax usando jQuery, aqui deberias de crear la petición usando los parámetros que necessites para tu API
$.ajax({ async: async, type:'get', url: this.baseUrl + req, headers: {
"token": this.token
}, success: successCallOut, error: function(xhr,status,error){
console.log("-----------Error Api GET " + this.baseUrl + req + "------------------");
console.log("Status: " + status);
console.log("Error :" + error);
console.log(xhr);
console.log("---------------End Error----------------");
this.result = "error";
}});
if(!async){
while (this.result == undefined) {}
return this.result;
}
};
GetSync(req){
return this.Get(req, false);
};
GetAsync(req){
return this.Get(req, true);
};
Post(req, body, bodyType, async) {
this.req = req;
$.ajax({ async: async, type:'post', url: this.baseUrl + req, data: body, contentType: bodyType, headers: {
"token": this.token
}, success: successCallOut, error: function(xhr,status,error){
console.log("-----------Error Api POST " + api.baseUrl + req + "------------------");
console.log("Body: \"" + bodyType + "\" " + body);
console.log("Status: " + status);
console.log("Error: " + error);
console.log(xhr);
console.log("---------------End Error----------------");
this.result = "error";
}});
if(!async){
while (this.result == undefined) {}
return this.result;
}
}
PostJson(req, body, async){
return this.Post(req, body, "application/json", async);
}
PostJsonSync(req, body){
return this.Post(req, body, "application/json", false);
}
PostJsonAsync(req, body){
return this.Post(req, body, "application/json", true);
}
SetToken(req){
$.ajax({ async: false, type:'get', url: this.baseUrl + req,
success: tokenCallOut, error: function(xhr,status,error){
console.log("-----------Error Api GET " + this.baseUrl + req + "------------------");
console.log("Status: " + status);
console.log("Error :" + error);
console.log(xhr);
console.log("---------------End Error----------------");
this.token = "error";
}});
}
};
function tokenCallOut(data){
console.log("API TOKEN SUCCESS");
api.token = data;
}
// Aqui es donde trabajaremos con los resultados de la petición, por ejemplo tu haces la peticion a /productos y la redirijes a la funcion ProcesarProductos(), mi ejemplo es /news/last
function successCallOut(data){
console.log("API GET/POST SUCCESS");
api.result = data;
switch (api.req){
case "auth":
alert(data['token']);
break;
case "handle":
alert(data);
break;
case "news/last":
ShowLastNews();
break;
}
};
function ShowLastNews() {
//Recuperamos el resultado de la peticion
var news = api.result;
//Mostramos el resultado de la petición
console.log(news);
//Aqui és donde tienes que hacer los GetElementById() y assignarles el contenido de la petición
}
Más información de AJAX
con JQuery
http://librosweb.es/libro/fundamentos_jquery/capitulo_7/metodos_ajax_de_jquery.html
Para trabajar con esta clase és muy fácil solo necessitas llamar a la funcion GET
de la clase
<script type="text/javascript">
window.onload = IndexLoadCode;
function IndexLoadCode() {
api = new Api('localhost','3000','http://','');
api.SetToken('auth?user=main');
api.GetSync('news/last');
}
</script>
Lo cual devuelve el siguiente resultado

en mi caso como la peticion que devuelve la api ya la devuelve como JSON me llega directamente el objeto como JSON y no necessito el JSON.Parse()

Para añadir el contenido a los elementos és así de simple
$(#id).html(api.result.contenido);
También lo puedes añadir creando elementos DOM
Crear elementos del DOM con jQuery
Para añadir css
https://www.w3schools.com/jquery/jquery_css.asp
https://www.w3schools.com/jquery/html_addclass.asp
Para cambiar la imagen usa attr
https://www.w3schools.com/jquery/html_attr.asp
$(#img).attr('src',api.result.src);
Información extra de como trabajar con JSON
Recorrer JSON con JQuery
¿Como puedo recorrer un array de json y obtener sus valores para mostrarlos en la vista?
Espero no haberme dejado nada y que te sirva de ayuda!