Cache avec contenu variable ?

O
ortolojf
WRInaute accro
Bonjour

J'ai remis ma notation à étoiles, avec le CMP Sirdata.

J'ai un problème avec le cache html.

Il semblerait que je doive mettre l'affichage de la notation à étoiles, en Javascript.

Pour l'instant, le PHP en amont pilote la lecture de la table MySQL VOTES et affiche en Javascript.

Il n'y a pas de PHP quand le cache est actif.

Donc le code Javascript devrait tout faire : lecture bdd et affic.

Je tiens à garder ma bdd telle quelle.

Comment lire ma bdd en Javascript ?

Merci beaucoup de votre aide.
 
O
ortolojf
WRInaute accro
Excusez-moi

Pour lire une table MySQL à partir de Javascript, y a-t-il une autre solution que l'Ajax ou le fetch ?

C'est-à-dire, aspiration d'un script php ?

Merci beaucoup.
 
rick38
rick38
WRInaute passionné
Je ne vois pas comment il y aurait un autre moyen, non.

Imaginons accéder à la base par javascript, le port TCP 3306 (par exemple, par défaut pour MySQL), serait bloqué par les firewalls, il faut tout faire transiter par la connexion web, donc appeler un fichier PHP par l'ajax.
 
O
ortolojf
WRInaute accro
Bonjour rick38

J'ai fini par mettre au point.

star_data.php a le header 'application/json'.

Je ne sais pas quel content-type mettre pour cette requête post.

Le résultat est correctement reçu dans data sous forme d'object, je crois qu'il déjà parsé ( façon JSON.parse().

Le fetch est asynchrone, donc array_star_read = undefined.

A l'intérieur du fetch, je déclencherai les deux fonctions javascript : affic_liens_etoiles(data) et json_ld_etoiles(data), qui alimenteront les variables javascript contenant les interfaces de la notation à étoiles, et du snippet json.

Tout est asynchrone.

J'ai un peu de mal à me mettre aux promise en Javascript. ;)

Merci beaucoup rick38 pour ton aide.

JavaScript: 
<script>
function read_star_data(arrayRequest) {
    var url = new URL(window.location.protocol + '//' + window.location.hostname + '/php/config/star_data.php');
    myHeaders = new Headers({'Content-Type':'application/x-www-form-urlencoded'});
    var myInit = {
        method: 'POST',
        headers: myHeaders,
        body: arrayRequest.join('&'),
        mode: 'cors'};
        fetch(url, myInit)
            .then(function(response) {
                return response.json()
            })
                .then(function(data) {
                    console.log('data = ' + Object.entries(data));
                    return Object.entries(data);
            })
            .catch(function(error) {
                    console.log('read error = ' + error);
                return null;
            })
}
    var arrayParameters = new Array('STAR_COOKIE=' + encodeURIComponent(''), 'star=' + encodeURIComponent(0), 'PAGE=' + encodeURIComponent('racinexx'));
    console.log('arrayParameters = ' + arrayParameters);
    array_star_read = new Array();
    array_star_read = read_star_data(arrayParameters);
    console.log('array_star_read = ' + array_star_read);
</script>
 
O
ortolojf
WRInaute accro
Bonjour rick38

Je fais tout en Javascript pour mon snippet à étoiles et mon ld_json.

j'ai l'objet JSON contenant les variables/valeurs, le problème est de faire l'échange chaîne de caractères <=> contenu html.

Les chaînes de caractères seront produites par ces deux fonctions : json_ld_etoiles(data) et affic_liens_etoiles(data), et affichées de manière séparée.

J'aurais besoin de savoir comment traduire une string, ou object, ou json, ou array, en dom html.

Merci beaucoup de ton aide.

Amicalement.
 
O
ortolojf
WRInaute accro
Bon

Voilà ce que j'obtiens pour le snippet json_ld :

JavaScript: 
json_ld = "{\"script\": \"application/ld+json\",\"@context\": \"https://schema.org/\",\"@type\": \"Game\",\"aggregateRating\": {\"@type\": \"AggregateRating\",\"itemReviewed\": \"Vendredi 4 Décembre 2020<br>Courses passées\",\"ratingValue\": \"3.5\",\"worstRating\": \"1\",\"bestRating\": \"7\",\"ratingCount\": \"0\"}}"

A l'affichage, je prendrai le premier item pour le script.

Le reste est-il du texte pur ?

Merci beaucoup.
 
O
ortolojf
WRInaute accro
Bonjour

Et le html de la notation à étoiles, ( enrobage, sans l'interface qui n'est pas encore écrite ) :

JavaScript: 
json_ld = "<div id=\"staring_form\"><div><span>3 Décembre 2020<br>PARIS VINCENNES<br>- Prix Bourigny</span><p><span class=\"sous_titre\">0</span> Vote&nbsp;&nbsp;&nbsp;<br></div><div id=\"message_interface\"></div></div>"

Comment je vais afficher celà en Javascript ?

Je dois construire le DOM avec des createElement(), etc... ?

C'est possible, mais c'est du code propriétaire. ;)

Amicalement.
 
O
ortolojf
WRInaute accro
Bonjour

Pour parcourir un object, dans le but de reconstruire le DOM de manière récursive.

Merci beaucoup.


JavaScript: 
function recursiveMapObject(obj, callback) {
  Object.keys(obj).forEach(key) {
    if (typeof obj[key] === "object") obj[key] = recursiveMapObject(obj[key], callback);
    else callback(obj[key], key, obj);
  });
  return obj;
}
 
O
ortolojf
WRInaute accro
Bonjour

Voilà ce que j'obtiens ( en object ) pour le snippet json :

Où est l'erreur ?

JavaScript: 
{
'script' : 'application/ld+json' {
      '@context' : 'https://schema.org/',
      '@type' : 'Game',
       'aggregateRating' {
          '@type' : 'AggregateRating',
          'itemReviewed' : 'Vendredi 4 Décembre 2020<br>Courses passées',
          'ratingValue' : 3.5,
          'worstRating' : '1',
           'bestRating' : '7',
          'ratingCount' : '0'
     }
}
 
O
ortolojf
WRInaute accro
Pardon

J'ai pu corriger l'erreur :

JavaScript: 
[
   {"script" : "application/ld+json"}, 
   {"@context" : "https://schema.org/",
      "@type" : "Game","aggregateRating" : {
         "@type" : "AggregateRating",
        "itemReviewed" : "4 Décembre 2020<br>PARIS VINCENNES<br>- Prix Walpurga",
        "ratingValue" : "3.5",
        "worstRating" : "1",
        "bestRating" : "7",
        "ratingCount" : "0"
   }
 }
]

Le bogue est que la déclaration {"script" : "application/ld+json"} n'est pas père du reste, mais frère.

Comment hiérarchiser correctement cet object ?

Merci beaucoup pour vos réponses.

Respectueusement.
 
O
ortolojf
WRInaute accro
Excusez-moi

En suivant la méthode dans Google Developers, voici :

Très longuement et douloureusement.

Cà marche.

Me faudrait enrichir ce snippet.

Bien à vous.

Amicalement.


HTML: 
<script type="application/ld+json">
{
    "@context" : "https://schema.org/",
    "@type" : "Game","aggregateRating" : {
        "@type" : "AggregateRating",
        "itemReviewed" : "Page d'Accueil",
        "ratingValue" : "3.2",
        "worstRating" : "1",
        "bestRating" : "7",
        "ratingCount" : "5"
    }
}
</script>
 
O
ortolojf
WRInaute accro
Là , par contre ...

C'est l'objet json ne contenant pas encore l'interface de notation à étoiles.

Rien à faire pour valider ce truc.


HTML: 
{
        "div" : [
                "attrs" : {
                        "id" : "staring_form"
                },
                "div" : {
                        "span" : {
                                "attrs" : {
                                        "id" : "staring_form",
                                        "text" : "Page d'Accueil"
                                }
                        }
                },
                "div" : {
                        "p"
                        },
                        "div" : {
                                "span" : {
                                        "attrs" : {
                                                "class" : "sous_titre",
                                                "text" : "5 Votes&nbsp;&nbsp;&nbsp;"
                                        }
                                }
                        },
                        "div" : {
                                "span" : {
                                        "attrs" : {
                                                "text" : "3.2"
                                        }
                                }
                        },
                        "div" : {
                                "attrs" : {
                                        "text" : " / "
                                }
                        },
                        "div" : {
                                "span" : {
                                        "attrs" : {
                                                "text" : "7"
                                        }
                                }
                        },
                        "div" : {
                                "br"
                        },
                        "div" : {
                                "attrs" : {
                                        "id" : "message_interface"
                                }
                        },
                        "attrs" : {
                                "text" : "br",
                                "text" : "br"
                        }
        ]
}
 
O
ortolojf
WRInaute accro
Ou de ouf

Validé.

Mais comment simplifier ?

J'ai des "div" comme keys répétitifs, et à cause de celà je suis obligé de les enrober dans des { }.

Voilà :

HTML: 
{
        "div" : [
                {
                        "attrs" : {
                                "id" : "staring_form"
                        },
                        "div" : {
                                "span" : {
                                        "attrs" : {
                                                "id" : "staring_form",
                                                "text" : "Page d'Accueil"
                                        }
                                }
                        }
                },
                {
                        "div" : {
                                "attrs" : {
                                        "text" : "p"
                                }
                        }
                },
                {
                        "div" : {
                                "span" : {
                                        "attrs" : {
                                                "class" : "sous_titre",
                                                "text" : "5 Votes&nbsp;&nbsp;&nbsp;"
                                        }
                                }
                        }
                },
                {
                        "div" : {
                                "span" : {
                                        "attrs" : {
                                                "text" : "3.2"
                                        }
                                }
                        }
                },
                {
                        "div" : {
                                "attrs" : {
                                        "text" : " / "
                                }
                        }
                },
                {
                        "div" : {
                                "span" : {
                                        "attrs" : {
                                                "text" : "7"
                                        }
                                }
                        }
                },
                {
                        "div" : {
                                "attrs" : {
                                        "text" : "br"
                                }
                        }
                },
                {
                        "div" : {
                                "attrs" : {
                                        "id" : "message_interface"
                                }
                        },
                        "attrs" : {
                                "text" : "<br><br>"
                        }
                }
        ]
}
 
O
ortolojf
WRInaute accro
Rebonjour

Cette fois-ci avec un codage plus fiable des balises html.

Mais comment représenter les relations père-fils ?

Je suis obligé de mettre des clés ( "key1" et "key2" ), pour descendre dans l'arborescence.

Comment simplifier ce fichier json ?

Merci beaucoup.


JSON: 
{
        "tag" : "div",
        "id" : "staring_form",
        "key1"    : [
                {
                        "tag" : "div",
                        "key2" : [
                                {
                                        "tag" : "span",
                                        "id" : "staring_form",
                                        "text" : "Page d'Accueil"
                                },
                                {
                                        "tag" : "p"
                                },
                                {
                                        "tag" : "span",
                                        "cls" : "sous_titre",
                                        "text" : "5 Votes&nbsp;&nbsp;&nbsp;"
                                },
                                {
                                        "tag" : "span",
                                        "text" : 3.2
                                },
                                {
                                        "text" : " / "
                                },
                                {
                                        "tag" : "span",
                                        "text" : 7
                                },
                                {
                                        "tag" : "br"
                                },
                                {
                                        "tag" : "div",
                                        "id" : "message_interface"
                                }
                        ]
                },
                {
                        "tag" : "br"
                },
                {
                        "tag" : "br"
                }
        ]
}
 
O
ortolojf
WRInaute accro
Bonjour

Je n'obtiens que des entiers dans treatment_object(value, key, obj).

Je teste seulement la récursivité pour l'instant.

C'est une fonction callback appelée récursivement par recursiveMapObject(obj, callback).

Les données en entrée sont correctes, et sont lues sous forme d'objet json.

J'ai vérifié la syntaxe du json.

Comment lire cet objet JSON, et produire du html avec ?

Le format du json est dans le message précédent.

Merci beaucoup de votre aide.

Amicalement.


JavaScript: 
<script>
 function stripslashes(str) {
        return str.replace(/\\"/g, '"');
}
 function isEmpty(str) {
    return (!str || 0 === str.length);
}
/*********************************************************/
/**    TREATMENT_OBJECT FUNCTION JSON            **/
/**        JSON => HTML                **/
/*********************************************************/
function treatment_object(value, key, obj) {
    console.log('obj[ ' + key + ' ] = ' + value);
    return value;
    var array_tags_bloc = new Array('div', 'ul', 'li', 'form');
    var array_tags_inline = new Array('input', 'button', 'span', 'p', 'br');
    var array_attrs = new Array('id', 'cls', 'key', 'method', 'action', 'type', 'name', 'value', 'aria-label', 'text');
    if(array_tags_bloc.indexOf(value) !== -1)
        obj = document.createElement(value);
    else if(array_tags_inline.indexOf(value) !== -1)
        obj = document.createElement(value);
    else if(array_attrs.indexOf(key) !== -1)
        obj.setAttribute(key, value);
    return obj;
}
function recursiveMapObject(obj, callback) {
    Object.keys(obj).map(function(value, key, obj) {
        if (typeof value === 'object') {
            obj[key] = recursiveMapObject(value, callback);
        } else {
            callback(value, key, obj);
        }
    });
    return obj;
}
function read_star_data(arrayRequest) {
    var url = new URL(window.location.protocol + '//' + window.location.hostname + '/php/config/star_data.php');
    var json_d = null;
    var json_etoiles = null;
    myHeaders = new Headers({'Content-Type':'application/x-www-form-urlencoded; charset=utf8'});
    var myInit = {
        method: 'POST',
        headers: myHeaders,
        body: arrayRequest.join('&'),
        mode: 'cors'};
        fetch(url, myInit)
            .then(function(response) {
                return response.json()
            })
                .then(function(data) {
                    json_etoiles = affic_liens_etoiles(data);
                    json_ld = recursiveMapObject(json_etoiles, treatment_object);
                    console.log('json_ld = ' + json_ld);
                    return json_etoiles;
            })
            .catch(function(error) {
                    console.log('read error = ' + error);
                return null;
            })
}
    var arrayParameters = new Array('STAR_COOKIE=' + encodeURIComponent('" . $STAR_COOKIE . "'), 'star=' + encodeURIComponent(" . $tmp_star . "), 'PAGE=' + encodeURIComponent('" . $PAGE . "'));
        console.log('arrayParameters = ' + arrayParameters);
    read_star_data(arrayParameters);
</script>
 
Vous devez vous connecter ou vous inscrire pour répondre ici.
1.fr
Discussions similaires
S
Contenu de site tronqué dans le cache de Google
Réponses
3
Affichages
2K
Gestion génique
G
C
Contenu cache, backlink et autre festivité. help svp
Réponses
6
Affichages
1K
cedric_g
C
E
Contenu google différent de ma page réelle ? Cache ?
Réponses
8
Affichages
3K
elitost
E
D
Google mes en cache mes menu/barre navig mes pas mon contenu
Réponses
2
Affichages
3K
daffsteam
D
T
Réglages CSS dans vos plugins de cache pour optimiser le CLS
Réponses
3
Affichages
1K
tibiz
T
WebRankInfo
Google supprime l'accès à la version en cache (et la commande cache:URL)
Réponses
3
Affichages
3K
emualliug
E
F
Problèmes de performances avec le cache et le rendu sur mon site Web
Réponses
29
Affichages
3K
flexi2202
F
T
Cache de Google : version en texte seul
Réponses
2
Affichages
983
Tibo_18
T
O
Stratégie de cache PWA : timestamp ?
Réponses
10
Affichages
2K
ortolojf
O
S
Cache Google sans police de caractères
Réponses
1
Affichages
861
Marie-Aude
Marie-Aude
S
Outil pour déterminer délai mise en cache navigateur
Réponses
5
Affichages
1K
Madrileño
Madrileño
F
problème avec la mise en cache des images de mon site
Réponses
9
Affichages
3K
flexi2202
F
O
Javascript API cache query non url ?
Réponses
8
Affichages
2K
ortolojf
O
O
Cache Etag nginx et PHP ?
Réponses
27
Affichages
4K
ortolojf
O
O
Fetch quelles techniques de cache ?
Réponses
5
Affichages
2K
ortolojf
O
D
Supprimer la version en cache de dizaines de PDF
Réponses
5
Affichages
3K
duqpie
D
E
Light House et cache Varnish chez Gandi
Réponses
0
Affichages
1K
Ehplodor
E
Cenwen-Isabelle
Quel impact sur le SEO en cas de blocage du cache Google ?
Réponses
10
Affichages
3K
Cenwen-Isabelle
Cenwen-Isabelle
O
Quelle config cache pour mariaDB ?
Réponses
2
Affichages
2K
ortolojf
O
phonyclic
WordPress Lignes restantes après changement de plugin de cache
Réponses
3
Affichages
3K
emualliug
E
Haut