Récupérer les données au format JSON

**pitchounvivi** · 22/01/2020, 10h34

Bonjour,

bon apparemment d'après mes recherches ... Ma requête AJAX,, récupère bien le json, mais n'arrive pas à le transformer. Le problème vient bien de la ligne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var jsonData = $.parseJSON(data);

j'ai le message :

SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data

Pourtant ma réponse me renvoie bien un objet json

j'ai bien dans ma console :
Nom : Ecran.png
Affichages : 2197
Taille : 63,9 Ko

et dans la réponse :
Nom : Ecran.png
Affichages : 1897
Taille : 81,0 Ko

Je comprends pas ce qui gène.
Ma requête Ajax:

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
/**
 * Requête Ajax : Permettant le controle du nom de l'automate dans l'input
 * de façon interactive
 */
function checkNameAuto() {
 
    // Recupération de l'input id=nom
    var inputName = document.getElementById('nom');
 
    // On attend que l'input perde le focus
    inputName.onblur = function (e) {
 
        //on récupère la valeur de l'input
        var name = inputName.value;
        //console.log(name);
 
 
        //$('#message-text').html("");
        //on effectue la requête ajax
        $.ajax({
            type: "GET",
            url: "/administration/table/automates/form/checkName",
            data: {
                nom: name
            },
            datatype: "json",
            success: function (data) {
 
                messageDisplay(data);
            },
            error: function (data) {
 
                messageDisplay(data);
            }
        })
 
 
        function messageDisplay(data) {
            console.log(data);
            var jsonData = $.parseJSON(data);
            //console.log(jsonData);
 
            if(jsonData.etat == 'ok') {
                $('#messages-card').removeClass("red").addClass("green");
            }
            else {
                $('#messages-card').removeClass("green").addClass("red");
            }
 
            $('#message').html(jsonData);
        }
 
    }
}

La partie de mon controller qui monte la réponse en JSON :

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
        //si l'automate existe déjà
        if ($double !== false) {
            //afficher message d'erreur
            $message = array();
            $message["etat"] = "ko";
            $message["retour"] = "Vous ne pouvez pas utiliser ce nom - Nom déjà utilisé ";
            $this->logger->error($message["retour"]);
 
 
            $resultat = json_encode($message);
            //var_dump($message);
 
            $statusCode = 409;
            $response->getBody()->write($resultat);
 
            return $response
                ->withHeader("Content-Type", "application/json")
                ->withStatus($statusCode);
        }
 
        //afficher message d'erreur
        $message = array();
        $message["etat"] = "ok";
        $message["retour"] = "Vous pouvez utiliser ce nom - Nom non utilisé ";
        $this->logger->error($message["retour"]);
 
 
        $resultat = json_encode($message);
 
 
        $statusCode= 200;
        $response->getBody()->write($resultat);
 
        return $response
            ->withHeader("Content-Type", "application/json")
            ->withStatus($statusCode);

**mathieu** · 22/01/2020, 11h43

d'après ce que vous affichez avec console.log, vous avez déjà un objet JSON donc pas besoin d'utiliser "parseJSON".
essayez juste cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

jsonData = data.responseJSON;

et pour l'appel AJAX, vous pouvez simplifier l'appel de "messageDisplay" comme cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
        $.ajax({
            type: "GET",
            url: "/administration/table/automates/form/checkName",
            data: {
                nom: name
            },
            datatype: "json",
            "success" : messageDisplay,
            "error" : messageDisplay,
        });

**pitchounvivi** · 22/01/2020, 12h54

Déjà merci pour ton intérêt.

Alors c'est effectivement ce vers quoi je m'orientais ... Ca progresse, j'ai bien ma phrase qui s'affiche ... mais sur mon écran blanc ...

De toute façon, normalement j'ai ce formulaire :
Nom : Ecranbase.png
Affichages : 1834
Taille : 50,1 Ko

Et entre l'encadré gris et le formulaire, je suis sensée avoir un message de ce type dont la couleur et le contenu varie en fonction du résultat de la requête.
Nom : Ecran.png
Affichages : 1804
Taille : 19,4 Ko

Nom : Ecran.png
Affichages : 1804
Taille : 19,4 Ko

Donc je suis pas trop mal, mais j'arrive pas à relier la réponse à la partie qui correspond dans mon fichier twig.

Le fichier twig du formulaire :

Code twig :

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
<div id="message" class="row container">
        <div class="row">
            <div class="col s10 offset-s1">
                <div class="card blue-grey darken-1">
                    <div class="card-content white-text">
                        <span class="card-title"><i class="material-icons">report_problem</i>  Attention</span>
                        <p>Les champs marqués avec une <span class="option">*</span> sont facultatifs</p>
                    </div>
                </div>
            </div>
            {% if message is defined %}
                <div  class="col s10 offset-s1">
                    {# Si c'est une erreur #}
                    {% if message.etat == "ko" %}
                    <div class="card red darken-1">
                        {% else %}
                        <div class="card green darken-1">
                            {% endif %}
                            <div class="card-content white-text">
                                <span class="card-title">Message</span>
                                {{ message.retour }}
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}
 
.... suite du formulaire ....
 
 
{% block script %}
 
    <script>
        document.querySelector('#add1').addEventListener('click', function(event) {
 
            var last = document.querySelector('#Libelle tbody tr:last-child');
            last.parentNode.appendChild(last.cloneNode(true));
 
        });
    </script>
 
    <script>
        document.querySelector('#add2').addEventListener('click', function(event) {
 
            var last = document.querySelector('#Fichier tbody tr:last-child');
            last.parentNode.appendChild(last.cloneNode(true));
 
        });
    </script>
 
    <script>
        function remplir(){
            exp =/[a-zA-Z0-9_]\.[a-z]{3,4}$/;
            exp1=/[&ïöîôâäûü\+\(\)\{\}\[\]é"'èçà=€@à$£ù%*§¤\*²;\?\!,<>^¨]/;
 
 
            var elem = document.getElementsByClassName('auto_param1');
 
            for (var i = 0; i < elem.length; i++) {
                //remplace chaque espace par "_"
                while(elem[i].value.includes(' ')){
                    elem[i].value = elem[i].value.replace(" ","_");
                }
                if (!exp.test(elem[i].value)){
                    alert('Le nom du fichier '+ (i+1) + ' est incorrect');
                }
                if (exp1.test(elem[i].value)){
                    alert('Le nom du fichier '+ (i+100) + ' est incorrect');
                }
            }
 
        }
 
 
    </script>
 
 
    <script>
        $(document).ready(function() {
            $('select').material_select();
        });
    </script>
    <script type="text/javascript" src="{{ base_url() }}/js/formChecker.js"></script>
    <script src="{{ base_url() }}/js/selectAll-None.js"></script>
    <script src="{{ base_url() }}/js/infobulle.js"></script>
    <script>
        window.onload = function() {
            sauvegardeCheck();
            typeCheck();
            eventListenerSelect();
 
        }
    </script>
 
 
 
 
    <script>
        document.querySelector('#nom').onfocus = function() {
            checkNameAuto();
        }
    </script>
 
{% endblock %}

La partie if message correspond au bandeau coloré qui doit s'afficher en fonction du résultat de la requête, mais comme à l'ouverture du formulaire, il n'y a pas encore de requête. Il est absence au début.

Ma requête Ajax actuelle :

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
/**
 * Requête Ajax : Permettant le controle du nom de l'automate dans l'input
 * de façon interactive
 */
function checkNameAuto() {
 
    // Recupération de l'input id=nom
    var inputName = document.getElementById('nom');
 
    // On attend que l'input perde le focus
    inputName.onblur = function (e) {
 
        //on récupère la valeur de l'input
        var name = inputName.value;
        //console.log(name);
 
 
        //$('#message-text').html("");
        //on effectue la requête ajax
        $.ajax({
            type: "GET",
            url: "/administration/table/automates/form/checkName",
            data: {
                nom: name
            },
            datatype: "json",
            success: function (data) {
                messageDisplay(data);
            },
            error: function (data) {
                messageDisplay(data);
            }
        })
 
 
        function messageDisplay(data) {
            //console.log(data);
            console.log(data.responseJSON);
 
            var jsonData = data.responseJSON;
 
            $('#message').html(jsonData.retour);
 
        }
 
    }
}

Elle n'est pas correcte, car à priori, elle ne fonctionne pas comme il faut quand le nom n'est pas déjà utilisé : j'ai undefined pour l'objet

, alors que si je mets un nom connu, il m'affiche bien quelque chose ...
Mais bon, la priorité est d'affiché le message d'erreur correctement

et donc il faudrait que j'arrive à lié le jsonData.retour de l'ajax à {{message.retour}} dans twig.

Mais pour l'instant ça veut pas

**pitchounvivi** · 20/02/2020, 15h43

Bon voilà ce que j'ai fini par trouver.

le script du fichier twig

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 <script>
            document.querySelector('#nom').onfocus = function() {
                checkNameAuto();
            }
        </script>

le fichier JS avec l'ajax

Code JS :

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
function checkNameAuto() {
 
    // Recupération de l'input id=nom
    var inputName = document.getElementById("nom");
 
    // On attend que l'input perde le focus
    inputName.onblur = function (e) {
 
        //on récupère la valeur de l'input
        var name = inputName.value;
        //console.log(name);
 
 
        //on effectue la requête ajax
        $.ajax({
            type: "GET",
            url: "/administration/table/automates/form/checkName",
            data: {
                nom: name
            },
            datatype: "json",
            success: messageDisplay,
            error: messageDisplay
        })
 
        //l'affichage des messages
        function messageDisplay(data) {
            //console.log(data);
            //console.log(data.responseJSON);
 
            if(data.responseJSON === undefined) {
                //affiche l'encadré
                $('#messages-card').removeClass("hide");
 
                //gère la couleur de fond de l'encadré
                $('#messages-card').removeClass("red").addClass("green");
 
                //message reçu du controller (dans le cas ou nom inconnu)
                var jsonData = data;
            }
            else {
                //affiche l'encadré
                $('#messages-card').removeClass("hide");
 
                //gère la couleur de fond de l'encadré
                $('#messages-card').removeClass("green").addClass("red");
 
                //message reçu du controller (dans le cas d'un nom connu)
                var jsonData = data.responseJSON;
            }
            //affichage du message
            $('#message-text').html(jsonData.retour);
        }
    }
}

le fichier du controller

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
59
60
61
62
63
public function ckeckNameNotDuplicated(Request $request, Response $response, $args)
    {
        //permet d'avoir un tableau des paramètres de la request
        //var_dump($request->getQueryParams());
 
        //décode le paramètre "nom" de l'url
        $name = urldecode($_GET["nom"]);
        //var_dump($name);
 
        // Recherche combien de fois le nom affiché dans le champs est présent dans la base de donnée
        $double = $this->modelAutomates->getCheckNameAutoDoublon($name);
        //var_dump($double);
 
 
        //si l'automate existe déjà
        if ($double !== false) {
            //afficher message d'erreur
            $message = array();
            $message["etat"] = "ko";
            $message["retour"] = "Vous ne pouvez pas utiliser ce nom - Nom déjà utilisé ";
            $this->logger->error($message["retour"]);
 
            //transforme la variable message en json
            $resultat = json_encode($message);
            //var_dump($message);
 
            //valeur que doit rendre la reponse de la requête http
            $statusCode = 409;
 
            //passage de l'objet json au body de la requête http
            $response->getBody()->write($resultat);
 
            //envoie de la réponse :
            // - avec dans son header l'information indispensable indiquant que le body est en json
            // - avec dans le header également la valeur du status de la requête http
            return $response
                ->withHeader("Content-Type", "application/json")
                ->withStatus($statusCode);
        }
 
        //afficher message signalant que tout est ok
        $message = array();
        $message["etat"] = "ok";
        $message["retour"] = "Vous pouvez utiliser ce nom - Nom non utilisé ";
        $this->logger->error($message["retour"]);
 
        //transforme la variable message en json
        $resultat = json_encode($message);
 
        //valeur que doit rendre la reponse de la requête http
        $statusCode= 200;
 
        //passage de l'objet json au body de la requête http
        $response->getBody()->write($resultat);
 
        //envoie de la réponse :
        // - avec dans son header l'information indispensable indiquant que le body est en json
        // - avec dans le header également la valeur du status de la requête http
        return $response
            ->withHeader("Content-Type", "application/json")
            ->withStatus($statusCode);
 
    }

Récupérer les données au format JSON [AJAX]

jQuery

Vue hybride

Discussions similaires

Partager

Partager