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

Version imprimable

2 pièce(s) jointe(s)

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:

var jsonData = $.parseJSON(data);

j'ai le message :

Citation:

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 :
Pièce jointe 532652

et dans la réponse :
Pièce jointe 532649

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

Code:

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:

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);

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:

jsonData = data.responseJSON;

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

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, });

2 pièce(s) jointe(s)

Affichage correcte

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 :
Pièce jointe 532708

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.
Pièce jointe 532712

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:

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:

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 8O, 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 :(

LA solution

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

le script du fichier twig

Code:

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

le fichier JS avec l'ajax

Code:

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:

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);
 
    }