Cache avec contenu variable ?

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par ortolojf, 2 Décembre 2020.

  1. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 485
    J'aime reçus:
    28
    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.
     
  2. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 485
    J'aime reçus:
    28
    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.
     
  3. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 801
    J'aime reçus:
    273
    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.
     
  4. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 485
    J'aime reçus:
    28
    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.

    Code:
    
    <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>
    
    
     
  5. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 485
    J'aime reçus:
    28
    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.
     
  6. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 485
    J'aime reçus:
    28
    Bon

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

    Code:
    
    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.
     
  7. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 485
    J'aime reçus:
    28
    Bonjour

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

    Code:
    
    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.
     
  8. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 485
    J'aime reçus:
    28
    Bonjour

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

    Merci beaucoup.


    Code:
    
    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;
    }
    
    
     
  9. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 485
    J'aime reçus:
    28
    Bonjour

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

    Où est l'erreur ?

    Code:
    
    {
    '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'
         }
    }
    
    
     
  10. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 485
    J'aime reçus:
    28
    Pardon

    J'ai pu corriger l'erreur :

    Code:
    
    [
       {"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.
     
  11. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 485
    J'aime reçus:
    28
    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>
    
    
     
  12. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 485
    J'aime reçus:
    28
    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"
                            }
            ]
    }
    
    
     
  13. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 485
    J'aime reçus:
    28
    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>"
                            }
                    }
            ]
    }
     
    
     
  14. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 485
    J'aime reçus:
    28
    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.


    Code:
    
    {
            "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"
                    }
            ]
    }
    
    
     
  15. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 485
    J'aime reçus:
    28
    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.


    Code:
    
    <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>
    
    
    
    
    
    
    
    
    
    
     
Chargement...
Similar Threads - Cache contenu variable Forum Date
Le contenu « caché » par un accordéon a-t-il autant de poids SEO que du texte « normal » ? Référencement Google 6 Janvier 2021
Tests nov. 2018 : plusieurs liens vers même page, liens JS, contenu caché Techniques avancées de référencement 29 Novembre 2018
Contenu caché site internet Référencement Google 27 Mai 2018
Contenu caché pénalisé par Google ? Référencement Google 15 Juin 2016
Contenu caché version mobile d'un site Référencement Google 17 Octobre 2014
Mod phpBB pour cacher du contenu aux invités ? Administration d'un site Web 1 Novembre 2011
Contenu de site tronqué dans le cache de Google Crawl et indexation Google, sitemaps 22 Avril 2011
Site à cacher dans l'historique de navigation Administration d'un site Web 5 Octobre 2021
Javascript API cache query non url ? Développement d'un site Web ou d'une appli mobile 18 Août 2021
Cache Etag nginx et PHP ? Administration d'un site Web 7 Août 2021