bytes.cat

La wiki d'FP d'informàtica

Eines de l'usuari

Eines del lloc


cordova

Diferències

Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.

Enllaç a la visualització de la comparació

Ambdós costats versió prèvia Revisió prèvia
Següent revisió
Revisió prèvia
cordova [2025/11/06 19:00]
enric_mieza_sanchez [Inicialitzacions HTML]
cordova [2025/12/04 17:52] (actual)
enric_mieza_sanchez [AJAX amb jQuery]
Línia 278: Línia 278:
 </WRAP> </WRAP>
  
-==== AJAX amb jQuery ====+==== Exemple AJAX amb API Musicbrainz.org ====
 Aquestes mateixes les podem demanar des d'un document/aplicació HTML+JS amb crides asíncrones, el que solem conèixer per AJAX. Utilitzarem [[http://api.jquery.com/jquery.ajax/|AJAX amb jQuery]] que ens ajudarà a simplificar el codi. Els exemples estan a la mateixa documentació, però us poso aquí un d'essencial per fer la crida i que ens retorni un objecte JSON de la API de musicbrainz.org : Aquestes mateixes les podem demanar des d'un document/aplicació HTML+JS amb crides asíncrones, el que solem conèixer per AJAX. Utilitzarem [[http://api.jquery.com/jquery.ajax/|AJAX amb jQuery]] que ens ajudarà a simplificar el codi. Els exemples estan a la mateixa documentació, però us poso aquí un d'essencial per fer la crida i que ens retorni un objecte JSON de la API de musicbrainz.org :
  
 +<tabbox JavaScript>
 +<code javascript>
 +fetch('https://musicbrainz.org/ws/2/artist?query=queen&fmt=json')
 +  .then(response => {
 +      if (!response.ok) {
 +          throw new Error('Error de xarxa.');
 +      }
 +      return response.json();
 +  })
 +  .then(data => {
 +    // iterem pels diversos elements de l'array artists
 +    for( const artist of data.artists ) {
 +      console.log(`${artist.name} (${artist.disambiguation}`)
 +      // pintar l'HTML necessari...
 +    }
 +  })
 +  .catch(error => {
 +    console.error('Error en obtenir les notícies:', error);
 +  });
 +</code>
 +<tabbox jQuery>
 <code javascript> <code javascript>
 $.ajax({ $.ajax({
Línia 286: Línia 307:
   url: "https://musicbrainz.org/ws/2/artist?query=queen",   url: "https://musicbrainz.org/ws/2/artist?query=queen",
   dataType: "json",   // necessitem això pq ens retorni un objecte JSON   dataType: "json",   // necessitem això pq ens retorni un objecte JSON
-}).done(function (msg) { +}).done(function (data) { 
-  for(let item in msg.artists) { +  for(let item in data.artists) { 
-    console.log(msg.artists[item])+    var artista = data.aritsts[item].name; 
-    // aquí caldría fer mes coses, of course...+    var descripcio = data.aritsts[item].disambiguation; 
 +    console.log(`${artista} (${descripcio}`) 
 +    // aquí caldria pintar l'HTML necessari
     // ...     // ...
   };   };
Línia 296: Línia 319:
 }); });
 </code> </code>
 +</tabbox>
  
 Cal tenir en compte que les URLs a les que cridis amb AJAX han de tenir habilitada la capçalera de CORS (Cross-Origin Resource Sharing). Les APIs solen tenir-ho habilitat. Totes les APIs públiques ho tenen activat. Cal tenir en compte que les URLs a les que cridis amb AJAX han de tenir habilitada la capçalera de CORS (Cross-Origin Resource Sharing). Les APIs solen tenir-ho habilitat. Totes les APIs públiques ho tenen activat.
cordova.1762455648.txt.gz · Darrera modificació: 2025/11/06 19:00 per enric_mieza_sanchez