IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Question récupération de données


Sujet :

JavaScript

  1. #1
    Membre du Club
    Homme Profil pro
    Directeur technique
    Inscrit en
    Septembre 2011
    Messages
    91
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vendée (Pays de la Loire)

    Informations professionnelles :
    Activité : Directeur technique
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Septembre 2011
    Messages : 91
    Points : 50
    Points
    50
    Par défaut Question récupération de données
    Bonjour,

    J'utilise le code suivant pour afficher une infobulle contenant deux tabulations "Général" et "Streetview".
    Je cherche à récupérer les données d'un fichier XML et non pas celles codées en dur au début du code mais je ne sais pas trop comment faire.

    Une aide serait la bienvenue.

    Le code :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    <html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps JavaScript API v3 Example: Common Loader</title> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript" src="utils.js"></script> 
      <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css"/>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
     
    <script type="text/javascript">
     
     
    // Set the Map variable
    var map;
    var tMarker = [{
        'locNr': "Location 1",
        'lat': 45.767299,
        'lon': 4.834329,
        'city': 'Lyon',
        'zip': 69,
        'land': "Fance",
        'info': '<b>Lyon<\/b><br>la suite du texte...'
    },
    {
        'locNr': "Location 2",
        'lat': 48.856667,
        'lon': 2.350987,
        'city': 'Paris',
        'zip': 75,
        'land': "Fance",
        'info': '<b>Paris<\/b><br>la suite du texte...'
    },
    {
        'locNr': "Location 3",
        'lat': 44.837368,
        'lon': -0.576144,
        'city': 'Bordeaux',
        'zip': 33,
        'land': "Fance",
        'info': '<b>Bordeaux<\/b><br>la suite du texte...'
    },
    {
        'locNr': "Location 4",
        'lat': 43.297612,
        'lon': 5.381042,
        'city': 'Marseille',
        'zip': 13,
        'land': "Fance",
        'info': '<b>Marseille<\/b><br>la suite du texte...'
    }];
    function initialize() {
        var myOptions = {
            zoom: 6,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var infoWindow = new google.maps.InfoWindow;
        map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
        // Set the center of the map
        var pos = new google.maps.LatLng(46.80, 1.75);
        map.setCenter(pos);
        setMarkers(map, tMarker)
    };
    function setMarkers(map, tMarker) {
        for (var i in tMarker) {
            var lat = tMarker[i].lat;
            var lng = tMarker[i].lon;
            var locNr = tMarker[i].locNr;
            var city = tMarker[i].city;
            var zip = tMarker[i].zip;
            var land = tMarker[i].land;
            var info = tMarker[i].info;
     
    		var latlngset = new google.maps.LatLng(lat, lng);
            var oMarkOpt = {
                position: latlngset,
                map: map,
                title: city
            };
            var marker = new google.maps.Marker(oMarkOpt);
            var contentInfoWindow = ['<div id="InfoText">', '<div class ="tabs">', '<ul>', '<li><a href="#tab1">General</a></li>', '<li><a href="#tab2" id="SV">Street View</a></li>', '</ul>', '<div id="tab1">', '<h3><b>' + locNr + '</h3></b>', '<p>' + city + '<BR>' + land + '<BR>' + zip + '<BR>' + info + '</p>', '</div>', '<div id="tab2">', '<div id="pano"></div>', '</div>'].join('');
            var infoWindowOptions = {
                content: contentInfoWindow,
                position: latlngset
            };
            var infowindow = new google.maps.InfoWindow(infoWindowOptions);
            setEventMarker(marker, infowindow);
        } // For
    };
     
     
     
     
     
     
     
    function setEventMarker(marker, infowindow) {
        google.maps.event.addListener(marker, "click", function () {
            infowindow.open(this.getMap(), this);
        });
        var panoramaOptions = {
            position: marker.position
        };
        google.maps.event.addListener(infowindow, 'domready', function () {
            $(".tabs").tabs();
            $('#SV').click(function () {
                var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"), panoramaOptions);
                map.setStreetView(panorama);
            });
        });
    };
    // Initializes the Google Map
    google.maps.event.addDomListener(window, 'load', initialize);
     
    </script> 
    <style>
    #infotext {
      font-size:12px;
      width:480px;
      height:380px;
    }
    .tabs {
      width:450px;
      height:350px;
    }
    #pano {
      width:350px;
      height: 250px;
    }
    </style>
    </head> 
    <body> 
      <div id="map_canvas" style="width:100%; height:100%"></div>
      <!-- <div id='pano' style='position: absolute: top: 40px; left: 2px; width: 380px; height:290px;'></div> --> 
    </body> 
    </html>
    Et les données que je cherche à modifier :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    var tMarker = [{
        'locNr': "Location 1",
        'lat': 45.767299,
        'lon': 4.834329,
        'city': 'Lyon',
        'zip': 69,
        'land': "Fance",
        'info': '<b>Lyon<\/b><br>la suite du texte...'
    },
    {
        'locNr': "Location 2",
        'lat': 48.856667,
        'lon': 2.350987,
        'city': 'Paris',
        'zip': 75,
        'land': "Fance",
        'info': '<b>Paris<\/b><br>la suite du texte...'
    },
    {
        'locNr': "Location 3",
        'lat': 44.837368,
        'lon': -0.576144,
        'city': 'Bordeaux',
        'zip': 33,
        'land': "Fance",
        'info': '<b>Bordeaux<\/b><br>la suite du texte...'
    },
    {
        'locNr': "Location 4",
        'lat': 43.297612,
        'lon': 5.381042,
        'city': 'Marseille',
        'zip': 13,
        'land': "Fance",
        'info': '<b>Marseille<\/b><br>la suite du texte...'
    }];
    Les données sont accessibles depuis un fichier XML ou bien depuis une base de données MySQL.

  2. #2
    Membre habitué
    Profil pro
    Inscrit en
    Septembre 2007
    Messages
    125
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2007
    Messages : 125
    Points : 149
    Points
    149
    Par défaut
    En gros, tu veux accéder à un XML stocké sur le serveur depuis ton code javascript exécuté côté client, et stocker le tout dans un objet JS, c'est bien ça ?

    Si tel est le cas, je pourrais t'expliquer mais je vais simplement t'aider en te fournissant la recherche google à effectuer

    https://www.google.fr/#q=javascript+parse+xml

  3. #3
    Membre du Club
    Homme Profil pro
    Directeur technique
    Inscrit en
    Septembre 2011
    Messages
    91
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vendée (Pays de la Loire)

    Informations professionnelles :
    Activité : Directeur technique
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Septembre 2011
    Messages : 91
    Points : 50
    Points
    50
    Par défaut Accès données depuis base MySQL
    En fait je ne souhaite pas accéder au fichier XML mais plutôt aux données stockées dans la base MySQL.

  4. #4
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 093
    Points : 6 754
    Points
    6 754
    Par défaut
    Bonjour Samuel,

    je ne vois aucun XML dans le code que tu as donné. Il va falloir être plus précis. D'où vient ce XML ? Comment est-il servi ?
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  5. #5
    Membre du Club
    Homme Profil pro
    Directeur technique
    Inscrit en
    Septembre 2011
    Messages
    91
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vendée (Pays de la Loire)

    Informations professionnelles :
    Activité : Directeur technique
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Septembre 2011
    Messages : 91
    Points : 50
    Points
    50
    Par défaut Fichier XML
    Bonjour,

    Comme indiqué lors de mon premier post, je cherche à remplacer les données en début de code (Coordonnées) par des données issues d'une base MySQL.

    Pour cela, je génère un fichier XML à l'aide du code suivant :
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    <?php
        if(!$dbconn = mysql_connect('localhost', 'root', '')) {
           echo "Echec de la connexion MySQL au serveur 'localhost'.";
           exit;
        }
        if (!mysql_select_db('configuration')) {
           echo "Echec de la connexion à la base 'configuration'";
           exit;
        }
     
        $table_id = 'client';
        $query = "SELECT * FROM $table_id";
        $dbresult = mysql_query($query, $dbconn);
     
    // create a new XML document
     
    $doc = new DomDocument('1.0' , 'UTF-8');
     
     
    // create root node
     
    $root = $doc->createElement('root');
     
    $root = $doc->appendChild($root);
     
     
    while($row = mysql_fetch_assoc($dbresult)) {   //--> Une ligne à la fois
     
     
     
      $occ = $doc->createElement($table_id);       //--> Un noed a chaque ligne
     
      $occ = $root->appendChild($occ);
     
     
     
      foreach ($row as $fieldname => $fieldvalue) {   //--> Ajout d'un noeud fils pour chaque champ
     
     
     
        $child = $doc->createElement($fieldname);    //--> Nom du child et sa valeur a ajouter
     
        $child = $occ->appendChild($child);
     
        $value = $doc->createTextNode($fieldvalue);
     
        $value = $child->appendChild($value);
     
      }
     
     
     
    }
     
    $xml_string = $doc->saveXML();
    file_put_contents ('test.xml', $xml_string);
     
        ?>

    Ce code fonctionne correctement et me génère un fichier "test.xml".
    Mais comment faire pour lier ce fichier au script Javascript, est ce que je dois le parser ?


    Merci d'avance.

  6. #6
    Membre habitué
    Profil pro
    Inscrit en
    Septembre 2007
    Messages
    125
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2007
    Messages : 125
    Points : 149
    Points
    149
    Par défaut
    Je trouve ton raisonnement pour le moins curieux.

    Si je comprend bien, tu as les données qu'il te faut sur une bdd et pour les récupérer tu appelle un script php qui récupère ces données et qui crée un fichier XML sur ton serveur. Ensuite tu veux récupérer ce fichier pour le parser et le mettre dans un objet javascript.

    C'est beaucoup de complication pour pas grand chose.

    Question 1 : Est-ce que tu as besoin de modifier ton objet tmarker après l'éxecution de la page ?
    Question 2 : As-tu besoin de conserver ton fichier XML sur ton serveur pour une autre application que pour ce script ?


    If (Reponse 1 == NON && Reponse 2 == NON)
    Nul besoin de XML, de ton script php ou de quoique ce soit d'autre. Tout ce dont tu as besoin est une connexion à la bdd, stocker tes reponses dans une/des variables, et echo ces variables dans ta page html.

    If(Reponse 1 == OUI)
    Tout est dans ma première réponse quelques posts plus haut.

  7. #7
    Membre du Club
    Homme Profil pro
    Directeur technique
    Inscrit en
    Septembre 2011
    Messages
    91
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vendée (Pays de la Loire)

    Informations professionnelles :
    Activité : Directeur technique
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Septembre 2011
    Messages : 91
    Points : 50
    Points
    50
    Par défaut Fichier XML et variables
    Je cherche bien à récupérer des variables dans une base de données puis les injecter dans le code Javascript du premier post pour afficher une carte.
    Je n'ai pas besoin de conserver les variables tmarker en dehors du script mais je ne sais pas comment me connecter à une base de données en Javascript.
    Si je ne me trompe pas c'est impossible, c'est pour çà que je crée un fichier XML pour ensuite pouvoir le lire dans le code Javascript.

    Mais si il y a plus simple, je suis preneur de la solution.....

    Merci encore pour votre aide.

  8. #8
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 093
    Points : 6 754
    Points
    6 754
    Par défaut
    Ok.

    Tu as le choix du format pour faire passer les infos entre ta base de données et le JavaScript de ta page. Tu as choisi XML, mais tu aurais pu tout aussi bien prendre CSV, JSON, etc.

    Actuellement voilà comment je vois les choses :
    • Un script PHP génère le fichier XML, je ne sais pas à quel moment.
    • Quand un client demande la page HTML dont tu as donné le code, il reçoit des données JS statiques.
    • Tu voudrais que le client reçoive les données du XML à la place des données statiques.

    C'est bien ça ?

    Si c'est bien ça voilà, dans les grandes lignes, comment tu dois faire :
    1. Utilise Ajax pour obtenir le fichier XML sur la page du client.
    2. Utilise la propriété responseXML de ton objet Ajax
    3. Tu peux alors parser le XML. Plus d'infos. Ce lien va t'orienter vers l'utilisation de XPath, mais tu peux aussi utiliser querySelector et querySelectorAll qui sont, à mon avis, bien plus pratiques.


    Concrètement, responseXML est un raccourci où une partie du travail a été faite pour toi : c'est le résultat du parsing de responseText avec un objet DOMParser. Si le parsing échoue, responseXML sera null et tu devras utiliser responseText à la place.

    Le parsing peut échouer pour plusieurs raisons, entre autres :
    • Le serveur n'envoie pas le bon Content-Type. Tu peux arranger ça en ajoutant req.overrideMimeType('text/xml'); juste après l'appel à req.open('GET', 'test.xml');.
    • Le XML est mal formé. Dans ce cas, le DOMParser baisse les bras, et il faut utiliser d'autres moyens pour analyser le XML, par exemple des RegExps.


    Remarque un petit peu hors sujet : je ne suis pas vraiment un partisan du XML. Pour moi, Ajax aurait dû s'appeler Ajaw, pour Asynchronous JavaScript And Whatever-you-want.
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  9. #9
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Bonjour,
    j'ai du mal à comprendre pourquoi tu n'utilises pas le PHP pour insérer les données directement dans la partie SCRIPT de ta page.
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    echo "var tMarker=", json_encode( $tResult), ";\n"; // par exemple

  10. #10
    Membre du Club
    Homme Profil pro
    Directeur technique
    Inscrit en
    Septembre 2011
    Messages
    91
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vendée (Pays de la Loire)

    Informations professionnelles :
    Activité : Directeur technique
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Septembre 2011
    Messages : 91
    Points : 50
    Points
    50
    Par défaut Récupération de données
    Bonsoir,

    En réponse à Watilin.

    Oui c'est tout à fait çà.
    Les données sont pour l'instant statiques et je souhaite les rendre dynamiques (données dans la base MySQL).
    Comme indiqué, j'ai réussi à générer un fichier XML lors de l'inscription d'un nouveau client.
    Lors de cette inscription, les données sont copiées dans la base MySQL puis le fichier XML est généré.

    Je cherche donc à inclure les données de ce fichier XML dans le code Javascript de la page HTML donnée dans le premier post.

    J'ai également essayé avec un fichier texte contenant les données de la base en format JSON.

    Dans les 2 cas, je ne sais pour l'instant pas encore comment intégrer ces données dans le code Javascript.


    En réponse à NoSmoking.

    Est ce que tu pourrais m'en dire plus ? Que contient par exemple la variable $tResult....?


    Dans tout les cas, je dois d'abord récupérer les données de la base MySQL ?
    Est ce que je peux rajouter ce code PHP dans le fichier HTML avant le code Javascript ?

    Beaucoup de questions qui vous sembleront peut être futiles mais en tout cas merci pour votre aide.

  11. #11
    Membre du Club
    Homme Profil pro
    Directeur technique
    Inscrit en
    Septembre 2011
    Messages
    91
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vendée (Pays de la Loire)

    Informations professionnelles :
    Activité : Directeur technique
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Septembre 2011
    Messages : 91
    Points : 50
    Points
    50
    Par défaut Complément JSON
    Voici ce que j'obtiens lorsque j'essaie d'extraire les données de ma base MySQL au format JSON :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    [["1","Marie-Hélène PROUST","Pigemolle","85490 BENET","46.388161","-0.575875","PC Fixe","ADSL","Oui"],["2","Samuel PATARIN","11, Rue de l'Aumônerie","85490 BENET","46.369358","-0.585604","PC Portable","ADSL","Non"]]
    Mais il doit me manquer quelquechose ?
    Comment extraire les données une à une par exemple le nom et prénom du client ?

  12. #12
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 093
    Points : 6 754
    Points
    6 754
    Par défaut
    Citation Envoyé par patarins Voir le message
    Mais il doit me manquer quelquechose ?

    Je dirais qu'il manque les noms des colonnes de ta table. Peux-tu nous montrer comment tu obtiens ce JSON ?
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  13. #13
    Membre du Club
    Homme Profil pro
    Directeur technique
    Inscrit en
    Septembre 2011
    Messages
    91
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vendée (Pays de la Loire)

    Informations professionnelles :
    Activité : Directeur technique
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Septembre 2011
    Messages : 91
    Points : 50
    Points
    50
    Par défaut JSON
    J'obtient le JSON de la manière suivante :
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    header( 'content-type: text/html; charset=utf-8' );
    function utf8($n) {
            return (utf8_encode($n));
    }
    function jsonRemoveUnicodeSequences($struct) {
       return preg_replace("/\\\\u([a-f0-9]{4})/e", "iconv('UCS-4LE','UTF-8',pack('V', hexdec('U$1')))", json_encode($struct));
    }
    if(!$dbconn = mysql_connect('localhost', 'root', '')) {
           echo "Echec de la connexion MySQL au serveur 'localhost'.";
           exit;
    }
    if (!mysql_select_db('configuration')) {
           echo "Echec de la connexion à la base 'configuration'";
           exit;
    }
    $table_id = 'client';
    $query = "SELECT * FROM $table_id";
    $dbresult = mysql_query($query, $dbconn);
    mysql_set_charset( 'utf8' );
    $json = array();
    $i=0;
    if(mysql_num_rows($dbresult))
        {while($row=mysql_fetch_row($dbresult)){
            $json[]=array_map("utf8",$row); //traîtement utf8 appliquée à chaque ligne
            $i++;
        }
    }
    $json1 = jsonRemoveUnicodeSequences($json);
    file_put_contents ('test.txt', $json1);
    echo $json1;

  14. #14
    Membre du Club
    Homme Profil pro
    Directeur technique
    Inscrit en
    Septembre 2011
    Messages
    91
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vendée (Pays de la Loire)

    Informations professionnelles :
    Activité : Directeur technique
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Septembre 2011
    Messages : 91
    Points : 50
    Points
    50
    Par défaut JSON
    J'ai modifié la création du fichier au format JSON de la manière suivante :
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    <?php
     
    function jsonRemoveUnicodeSequences($struct) {
       return preg_replace("/\\\\u([a-f0-9]{4})/e", "iconv('UCS-4LE','UTF-8',pack('V', hexdec('U$1')))", json_encode($struct));
    }
     
    function utf8($n) {
            return (utf8_encode($n));
            }
     
    	    //Create Database connection
        $db = mysql_connect("localhost","root","");
    	    if (!$db) {
    	        die('Could not connect to db: ' . mysql_error());
    	    }
     
    	    //Select the Database
    	    mysql_select_db("configuration",$db);
     
    	    //Replace * in the query with the column names.
    	    $result = mysql_query("select * from client", $db); 
     
    	    //Create an array
    	    $json = array();
     
    	    //while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
     
    while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
            $json[]=array_map("utf8",$row); //traîtement utf8 appliquée à chaque ligne
            	$row_array['Nom'] = $row['Nom'];
    			$row_array['Adresse'] = $row['Adresse'];
    	        $row_array['Ville'] = $row['Ville'];
    	        $row_array['Latitude'] = $row['Latitude'];
    	        $row_array['Longitude'] = $row['Longitude'];
    	        $row_array['Informatique'] = $row['Informatique'];
    	        $row_array['Internet'] = $row['Internet'];
                $row_array['Service'] = $row['Service'];
     
    	        //push the values in the array
    	       // array_push($json,$row_array);
     
     
    	    }
     
    $json1 = jsonRemoveUnicodeSequences($json);
    file_put_contents ('test.txt', $json1);
     
    echo $json1;
     
    	?>

    J'obtiens maintenant le résultat suivant :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    [{"id":"1","Nom":"Marie-Hélène PROUST","Adresse":"Pigemolle","Ville":"85490 BENET","Latitude":"46.388161","Longitude":"-0.575875","Informatique":"PC Fixe","Internet":"ADSL","Service":"Oui"},{"id":"2","Nom":"Samuel PATARIN","Adresse":"11, Rue de l'Aumônerie","Ville":"85490 BENET","Latitude":"46.369358","Longitude":"-0.585604","Informatique":"PC Portable","Internet":"ADSL","Service":"Non"}]
    Ce qui est beaucoup mieux.

    Mais maintenant comment l'inclure dans mon code Javascript ?

  15. #15
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 093
    Points : 6 754
    Points
    6 754
    Par défaut
    Ok, simple adaptation du code qui générait le XML.

    Parlons un peu de ce header que tu envoies.
    Code PHP : Sélectionner tout - Visualiser dans une fenêtre à part
    header( 'content-type: text/html; charset=utf-8' );
    C'est peut-être un simple oubli de ta part, mais voilà, actuellement, tu envoies du JSON en le déclarant comme du HTML. Ce n'est pas vraiment grave, mais comme les navigateurs ont cette vilaine manie de vouloir interpréter et afficher les fichiers HTML, l'utilisateur peut voir apparaître du code JSON sur son écran et ne pas comprendre ; il vaut mieux éviter ça. Tu peux le déclarer en tant que texte pur (text/plain) ou mieux : avec le type application/json.




    Remarque un peu hors sujet :
    Code PHP : Sélectionner tout - Visualiser dans une fenêtre à part
    $table_id = 'client';
    Ça ressemble à une déclaration de constante à mes yeux. Tu devrais peut-être faire comme ça :
    Code PHP : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    define('TABLE_ID', 'client');
    ...
    $query = 'SELECT * FROM ' . TABLE_ID;
    Je ne vais pas m'étaler sur les avantages bien connus de l'emploi des constantes – clarté du code, réduction du risque d'erreurs, etc.




    Je ne comprends pas vraiment pourquoi tu es parti en croisade contre les séquences unicodes '\uxxxx' avec cette fonction jsonRemoveUnicodeSequences que je trouve horriblement compliquée.

    Ces séquences font partie du langage JavaScript, et sont naturellement interprétées sous tous les navigateurs. Pour t'en convaincre, ouvre la console JavaScript de ton navigateur (touche F12) et tape '\u00E9' suivi de la touche Entrée.
    JSON étant un sous-ensemble de JavaScript, il supporte ces séquences lui aussi.

    PHP se propose généreusement de prendre en charge les caractères non ASCII dans json_encode pour t'épargner les problèmes d'encodage. Et toi, tu remets le couvert avec tout un tas de traitements dans le but de défaire ce qui a été fait

    Peut-être que tu as eu des problèmes d'encodage et que tu as trouvé ça comme moyen de corriger le problème. C'est peut-être aussi pour ça que tu utilises mysql_set_charset. Je ne me suis jamais servi de cette fonction, mais je pense qu'il faut que tu l'appelles avant de faire des requêtes ; le mieux étant, sans doute, de l'appeler juste après mysql_connect.

    Une requête SET NAMES UTF8 sera peut-être nécessaire aussi. Fais des essais.




    Ton script est encore trop compliqué à mon goût Tu es obligé de gérer un par un les noms de colonnes.
    Code PHP : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    		...
    		$row_array['Nom'] = $row['Nom'];
    		$row_array['Adresse'] = $row['Adresse'];
    		$row_array['Ville'] = $row['Ville'];
    		$row_array['Latitude'] = $row['Latitude'];
    		$row_array['Longitude'] = $row['Longitude'];
    		$row_array['Informatique'] = $row['Informatique'];
    		$row_array['Internet'] = $row['Internet'];
    		$row_array['Service'] = $row['Service'];
    		...
    Sous tous les points de vue, ce sera plus efficace si tu sélectionnes uniquement les colonnes désirées dans ta requête SQL, et que tu les gères toutes à la fois, simplement en utilisant mysql_fetch_assoc.

    Code PHP : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <?php
     
    header('Content-Type: application/json; charset=utf-8');
     
    // ... connexion à la base
     
    // ... gestion du charset
     
    $data = mysql_query('SELECT
       `Nom`,
       `Adresse`,
       `Ville`,
       `Latitude`,
       `Longitude`,
       `Informatique`,
       `Internet`,
       `Service`
       FROM ' . TABLE_ID);
     
    $table = [];
    while ($row = mysql_fetch_assoc($data)) {
       $table[] = $row;
    }
    echo json_encode($table);
     
    ?>




    Maintenant, comment faire pour utiliser ce JSON en JavaScript ? La solution la plus simple, c'est NoSmocking qui l'a donnée : fais un echo du code JSON produit, entre deux balises <script>. Bien sûr ça ne tient pas tout seul, il faut mettre un peu de scotch : ne pas oublier de mettre des guillemets, utiliser JSON.parse, affecter le tout à une variable. Tu te sens d'attaque ? Sinon pas de souci, je te donnerai le code.

    Ce qui m'ennuie avec cette solution, c'est qu'on demande à PHP de générer du code JS. Source de confusion, beaucoup de débutants se perdent à un moment ou un autre à cause d'un mélange de guillemets ou une confusion des concepts. Les messages d'erreur ne sont pas faciles à comprendre, car parfois l'erreur vient de l'autre langage.

    Pour cette raison, il vaut mieux que tu gardes ton script PHP qui génère du JSON, le cantonner à ce rôle, et l'appeler avec une requête Ajax. Cette fois, tu récupères directement responseText et tu la traites avec JSON.parse. Je vais te laisser l'exercice également, mais là encore, pas de soucis si ça te paraît trop dur, je te donnerai un code qui marche. On n'est pas là pour te faire souffrir non plus
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  16. #16
    Membre du Club
    Homme Profil pro
    Directeur technique
    Inscrit en
    Septembre 2011
    Messages
    91
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vendée (Pays de la Loire)

    Informations professionnelles :
    Activité : Directeur technique
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Septembre 2011
    Messages : 91
    Points : 50
    Points
    50
    Par défaut JSON et données (Suite)
    Bonsoir,

    Tout d'abord merci pour votre aide qui m'est bien précieuse.
    Suivant vos conseils, j'ai modifié le code qui est maintenant le suivant :
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    <?php
     
    header('Content-Type: application/json; charset=utf-8');
     
     
    //Create Database connection
        $db = mysql_connect("localhost","root","");
    	    if (!$db) {
    	        die('Could not connect to db: ' . mysql_error());
    	    }
     
    		mysql_set_charset( 'utf8' );
     
    	    //Select the Database
    	    mysql_select_db("configuration",$db);
     define('TABLE_ID', 'client');
    $data = mysql_query('SELECT
       `id`,
       `Nom`,
       `Adresse`,
       `Ville`,
       `Latitude`,
       `Longitude`,
       `Informatique`,
       `Internet`,
       `Service`
       FROM ' . TABLE_ID);
     
     
    while ($row = mysql_fetch_assoc($data)) {
       $table[] = $row;
    }
    echo json_encode($table);
     
    ?>

    Le résultat est le suivant :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    [{"id":"1","Nom":"Marie-H\u00e9l\u00e8ne PROUST","Adresse":"Pigemolle","Ville":"85490 BENET","Latitude":"46.388161","Longitude":"-0.575875","Informatique":"PC Fixe","Internet":"ADSL","Service":"Oui"},{"id":"2","Nom":"Samuel PATARIN","Adresse":"11, Rue de l'Aum\u00f4nerie","Ville":"85490 BENET","Latitude":"46.369358","Longitude":"-0.585604","Informatique":"PC Portable","Internet":"ADSL","Service":"Non"}]
    Comme vous me l'avez conseillé, je ne tient donc pas compte des caractères de type \u00e9\ et consorts.
    J'ai vérifier que le texte apparaissait correctement dans la console Javascript du navigateur.

    Pour ce qui est de la suite c'est effectivement un peu difficile pour moi.

    J'ai trouvé le code suivant pour lancer une requête AJAX et vérifié que le fichier PHP était bien appelé.


    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    <script language="JavaScript">
     
    	function createInstance()
    	{
            var req = null;
    		if (window.XMLHttpRequest)
    		{
     			req = new XMLHttpRequest();
    		} 
    		else if (window.ActiveXObject) 
    		{
    			try {
    				req = new ActiveXObject("Msxml2.XMLHTTP");
    			} catch (e)
    			{
    				try {
    					req = new ActiveXObject("Microsoft.XMLHTTP");
    				} catch (e) 
    				{
    					alert("XHR not created");
    				}
    			}
    	        }
            return req;
    	};
     
    	function storing(data, element)
    	{
    		element.innerHTML = data;
    	}
     
    	function submitForm(element)
    	{ 
    		var req =  createInstance();
     
    		req.onreadystatechange = function()
    		{ 
    			if(req.readyState == 4)
    			{
    				if(req.status == 200)
    				{
    					storing(req.responseText, element);	
    				}	
    				else	
    				{
    					alert("Error: returned status code " + req.status + " " + req.statusText);
    				}	
    			} 
    		}; 
    		req.open("GET", "json_mysql_2.php", true); 
    		req.send(null); 
    	} 
     
     
     
     
    </script>
    Qu'est ce que je dois modifier pour récupérer les données JSON du fichier PHP ?
    Lorsque je lance ce code j'obtiens le résultat suivant :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    [{"id":"1","Nom":"Marie-H\u00e9l\u00e8ne PROUST","Adresse":"Pigemolle","Ville":"85490 BENET","Latitude":"46.388161","Longitude":"-0.575875","Informatique":"PC Fixe","Internet":"ADSL","Service":"Oui"},{"id":"2","Nom":"Samuel PATARIN","Adresse":"11, Rue de l'Aum\u00f4nerie","Ville":"85490 BENET","Latitude":"46.369358","Longitude":"-0.585604","Informatique":"PC Portable","Internet":"ADSL","Service":"Non"}]
    Est-il toujours normal que je recoive les caractères \u00e9\ et consorts ?

    Encore merci pour votre aide.

  17. #17
    Membre habitué
    Profil pro
    Inscrit en
    Septembre 2007
    Messages
    125
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2007
    Messages : 125
    Points : 149
    Points
    149
    Par défaut
    Les caractères uXXX sont des caractère spéciaux (par exemple ë, $ ou ù).

    Pour transformer une chaine de caractère représentant une structure Json en objet il existe la fonction :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    var resParsed = JSON.parse( res );
    window.alert(resParsed['longitude']);

  18. #18
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 093
    Points : 6 754
    Points
    6 754
    Par défaut
    Bon alors d'abord, c'est attentionné de vouloir se soucier du plus grand nombre, mais il faut savoir que XMLHttpRequest marche sous IE depuis IE7, ce qui est déjà pas mal préhistorique à mon avis.
    S'encombrer avec des try-catch pour tenter d'instancier des ActiveX, c'est faire des efforts pour rendre son site compatible avec IE6. Je ne dis pas que c'est mal ! Mais dans ce cas, il faut être cohérent, et faire en sorte que le reste du site soit également compatible. Sois juste conscient de ça.
    Sinon, c'est courtois de prévoir un gentil petit message pour indiquer à l'utilisateur que son navigateur n'est pas pris en charge, et pourquoi pas l'inviter à le mettre à jour ou en installer un autre.




    Est-il toujours normal que je recoive les caractères \u00e9\ et consorts ?
    C'est tout à fait normal car, si j'ai bien lu ton code, tu affectes directement le responseText que tu as reçu au innerHTML de ton élément. Sans utiliser JSON.parse donc. Regarde la réponse de Kaari Kosaku

    Un petit conseil pour l'avenir : là c'est toi qui contrôles comment le JSON est généré, donc pas de souci. Mais sache que si tu reçois du JSON mal formé, JSON.parse lance une exception. Dans les cas où tu n'es pas sûr de recevoir du JSON bien formé, il faut prévoir un try-catch :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    var json;
    try {
       json = JSON.parse(req.responseText);
    } catch (err) {
       ...
    }
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  19. #19
    Membre du Club
    Homme Profil pro
    Directeur technique
    Inscrit en
    Septembre 2011
    Messages
    91
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vendée (Pays de la Loire)

    Informations professionnelles :
    Activité : Directeur technique
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Septembre 2011
    Messages : 91
    Points : 50
    Points
    50
    Par défaut JSON et AJAX
    Merci pour vos réponses mais je patauge un peu.....

    Par exemple je ne sais pas où placer le code
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    var resParsed = JSON.parse( res );
    .

    D'avance merci pour votre réponse.

  20. #20
    Membre du Club
    Homme Profil pro
    Directeur technique
    Inscrit en
    Septembre 2011
    Messages
    91
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vendée (Pays de la Loire)

    Informations professionnelles :
    Activité : Directeur technique
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Septembre 2011
    Messages : 91
    Points : 50
    Points
    50
    Par défaut JSON et données (Suite)
    J'ai récupéré et essayer le code suivant :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     
    	<script language="JavaScript">
     
    	function submitForm()
    	{ 
    		var req = null; 
     
    		document.ajax.dyn.value="Started...";
     
    		if (window.XMLHttpRequest)
    		{
     			req = new XMLHttpRequest();
     
    		} 
    		else if (window.ActiveXObject) 
    		{
    			try {
    				req = new ActiveXObject("Msxml2.XMLHTTP");
    			} catch (e)
    			{
    				try {
    					req = new ActiveXObject("Microsoft.XMLHTTP");
    				} catch (e) {}
    			}
            	}
     
     
    		req.onreadystatechange = function()
    		{ 
    			document.ajax.dyn.value="Wait server...";
    			if(req.readyState == 4)
    			{
    				if(req.status == 200)
    				{
    					document.ajax.dyn.value=req.responseText;
    					var resParsed = JSON.parse(req.responseText);
    				window.alert(resParsed['Nom']);
    				}	
    				else	
    				{
    					document.ajax.dyn.value="Error: returned status code " + req.status + " " + req.statusText;
    				}	
    			} 
    		}; 
    		req.open("GET", "json_mysql_2.php", true); 
    		req.send(null); 
    	} 
    	</script>
    	<title>Ajax get small example</title></head>
     
    	<body>
    	<FORM name="ajax" method="POST" action="">
    		<p>
    		<INPUT type="BUTTON" value="Envoyer"  ONCLICK="submitForm()">
    		</p>
    		<p>
    		Reçu: <input type="text" name="dyn" size="32" value="">
    		</p>
    	</FORM>
    	</body>
    </html>
    Mais lorsque je clique sur le bouton, j'obtiens une fenêtre blanche avec rien à l'intérieur. Si j'enlève ['Nom'] j'obtient une fenêtre blanche avec [object Object],[object Object].

    Une idée ?

+ Répondre à la discussion
Cette discussion est résolue.
Page 1 sur 2 12 DernièreDernière

Discussions similaires

  1. [RegEx] question simple sur la récupération de données d'un div
    Par kenny49 dans le forum Langage
    Réponses: 1
    Dernier message: 18/04/2007, 14h55
  2. Réponses: 2
    Dernier message: 20/02/2004, 09h47
  3. [ DB2] => [ORACLE] Récupération de données
    Par LeDid dans le forum DB2
    Réponses: 3
    Dernier message: 25/06/2003, 18h10
  4. Réponses: 13
    Dernier message: 20/03/2003, 09h11
  5. [XMLRAD] récupération de donnée
    Par Mitch79 dans le forum XMLRAD
    Réponses: 7
    Dernier message: 30/01/2003, 16h36

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo