Bonsoir tout le monde,

J'ai un site web qui appel ses pages en require via une variable GET dans l'url, dans la page d'accueil j'ai un formulaire de connexion qui envoie un fetch post vers la page 'index.php?page=MemebrConnect' et le compte s'ouvre mais le problème je reçois pas les variables de retours codé en JSON.

Voici le code JS pour se connecter : 

const form = document.getElementById('connect_form');

form.addEventListener('submit', function(event){
   
    event.preventDefault();
    const formattedFormData = {
        email: this.email.value,
        password: this.password.value
    };
    postData(formattedFormData);
});



function postData(formattedFormData){
   
    fetch('index.php?page=MemberConnect',
        {
            headers: {
                'Accept': 'application/json', 
                'Content-Type': 'application/json'
            },
            method: 'POST',
            
            body: JSON.stringify(formattedFormData)
        }
    )
    .then(function(res) {
        if (res.ok) {
          return res.json();
        }
        else{
            console.error(res);
        }
      })
      .then(function(value) {
          console.log(value);
      });
    
}

et voici la page qui reçoit les données et renvoie un message de OK :

<?php


use Model\Frontend\MemberConnect\MemberConnectModel;

$data = json_decode(file_get_contents('php://input'), true);
if (isset($data['email']) AND isset($data['password']))
{
    $connect_manager = new MemberConnectModel;
    $connect_manager->email = $data['email'];
    $connect_manager->psw = $data['password'];
    $connect_manager->connect();
    $data_ok = 'OK';
    json_encode($data_ok);
    echo $data_ok;
}
else
{
    $data_error = 'Error';
    json_encode($data_error);
    echo $data_error;
    
}

Pourquoi je ne reçois pas les variables de retours dans la console.log ?

Voici le message d'erreur : 

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
Promise.then (asynchrone)
postData @ main.js:36
(anonyme) @ main.js:10

Remarque : la page MemberConnect est appelé par une fonction dans une class, est ce que c'est dû aux portées des variables ? par ce que quand j'appel la page dans le fetch directement en mettant son url complet sa marche bien (Controller/Frontend/MemberConnect/MemberConenct.php) !

Merci d'avance

-
Edité par Love For All 22 novembre 2021 à 13:31:15

Bonjour le message d'erreur de la requête indique que Javascript na pas réussie à parsé en JSON la réponse du serveur.

Dans ton ficher PHP tu as renvoyé un json_encode d'une chaîne de texte (pas d'un tableau associatif).

Quand tu appel la fonction json_encode en lui passant une chaîne de texte au lieu d'un tableau associatif la fonction te renvoi exactement la même chaîne de texte.

Ecrire cela:

<?php
$data_ok = 'OK';
json_encode($data_ok); // <- "OK"
echo $data_ok;

Et équivalent à écrire directement:

<?php
$data_ok = 'OK';
echo $data_ok;

Le problème c'est que du coups tu ne renvoi pas un objet JSON valide si en Javascript tu essaie d'exécuté:

JSON.parse("OK");

Tu recevras l'erreur:

Uncaught SyntaxError: Unexpected token o in JSON at position 0

Pour généré un JSON valide avec la fonction json_encode de PHP tu dois donné un tableau associatif en paramètre à la fonction du genre:

<?php
$data_ok = ["status" => "OK"];

echo json_encode($data_ok); // <- {"status": "OK"}

Qui pourras être parsé par Javascript.

-
Edité par SamuelGaborieau3 22 novembre 2021 à 12:07:29

Bonjour, Merci de modifier le titre de votre sujet pour un titre explicite de votre problématique.

Mauvais titre

Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.

Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

Pour modifier votre titre, éditez le premier message de votre sujet.

(titre originel : Besoin d'aide pour le FETCH)

Liens conseillés

• Charte de bonne conduite
• Règles générales du forum

SamuelGaborieau3 a écrit:

Bonjour le message d'erreur de la requête indique que Javascript na pas réussie à parsé en JSON la réponse du serveur.

Dans ton ficher PHP tu as renvoyé un json_encode d'une chaîne de texte (pas d'un tableau associatif).

Quand tu appel la fonction json_encode en lui passant une chaîne de texte au lieu d'un tableau associatif la fonction te renvoi exactement la même chaîne de texte.

Ecrire cela:

<?php
$data_ok = 'OK';
json_encode($data_ok); // <- "OK"
echo $data_ok;

Et équivalent à écrire directement:

<?php
$data_ok = 'OK';
echo $data_ok;

Le problème c'est que du coups tu ne renvoi pas un objet JSON valide si en Javascript tu essaie d'exécuté:

JSON.parse("OK");

Tu recevras l'erreur:

Uncaught SyntaxError: Unexpected token o in JSON at position 0

Pour généré un JSON valide avec la fonction json_encode de PHP tu dois donné un tableau associatif en paramètre à la fonction du genre:

<?php
$data_ok = ["status" => "OK"];

echo json_encode($data_ok); // <- {"status": "OK"}

Qui pourras être parsé par Javascript.

-
Edité par SamuelGaborieau3 il y a environ 1 heure

Merci pour votre réponse mon frère, j'ai essayé de modifier le code de retour juste pour tester par :

 $data_ok = ["status" => "OK"];
    echo json_encode($data_ok);

Mais toujours le même problème, voici l'erreur que j'ai : 

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 15
Promise.then (asynchrone)
postData @ main2.js:36
(anonyme) @ main2.js:10

Est ce que la page qui doit retourné le code JSON doit juste traiter la requête et retourné le code tableau retour (genre une blank page avec un echo json_encode) ? par ce que la page MemberConnect est appelé en include dans le site donc la page finale est l'index qui contient le header et le menu et le body en milieu qui inclus la page de MemberConnect, donc y'a beaucoup de code php+html est ce que sa gêne pas pour recevoir la réponse JSON ?

Quand tu traite une requête AJAX avec PHP le contenue que tu "affiche" avec echo/print où des include de fichiers sont considéré comme faisant partie du corps de la réponse si durant le traitement de la requête tu as fait des includes de contenue HTML il font partie du corps de la réponse et sont renvoyé au client (qui aura du mal à le parsé en JSON).

Lorsque tu émet une requête AJAX avec Javascript dans ton navigateur et avant que la requête soit envoyé tu peut ouvrir ta console de développement (F12 sous window où click droit -> inspecte élément)

Passer sur l'onglet réseaux où network et ensuite envoyé ta requête.

Lorsque la requête et envoyé l'onglet doit avoir tracé la requête:

L'onglet réseaux de ton navigateur devrait ressemblé à cela après que tu es envoyé ta requête, là ou tu pourras voir le status de la requête et l'endroit où elle et partie.

A noté que si tu as une page web un peut complexe que tu charge beaucoup de fichiers CSS et JAVASCRIPT qui viennent obstrué l'onglet réseaux tu doit avoir un bouton Fetch/XHR qui permet ne n'affiché que les requête AJAX envoyé par Javascript.

Tu peut cliqué sur la ligne de la requête réseaux pour affiché les détails, sur cet encadré tu peut voir les en têtes de la réponse (et aussi de la requête)

Dans ton cas tu peut déjà vérifié que l'en tête Content-Type de la réponse et bien du application/json et pas genre du text/html où du text/plain

Sinon c'est qu'il y à un problème sur les données renvoyé.

Et enfin si ça ne suffit pas à débugué la requête, tu peut aussi prévisualisé à la volé le contenue que ta renvoyé le serveur en passant sur l'onglet Réponse.

Cet onglet te permettras de vérifié que le format des données et valide.

Dans les capture d'écrans j'ai pris l'exemple d'une API qui renvoi du lorem ipsum dans un tableau JSON (Bacon Ipsum API)

dans ton cas dans l'onglet Réponse tu devrais voir une grappe JSON contenant:

{
  "status": "OK"
}

Si dans l'onglet Réponse  tu visualise une structure HTML à la place de la grappe JSON c'est très certainement à cause des includes qui ont affiché du contenue HTML qui à été introduit dans le corps de la réponse.

Dans ce cas il faudra réussir à isolé les fichiers PHP qui font le traitement AJAX des fichiers qui affiche du contenue HTML.

-
Edité par SamuelGaborieau3 22 novembre 2021 à 14:28:46

SamuelGaborieau3 a écrit:

Quand tu traite une requête AJAX avec PHP le contenue que tu "affiche" avec echo/print où des include de fichiers sont considéré comme faisant partie du corps de la réponse si durant le traitement de la requête tu as fait des includes de contenue HTML il font partie du corps de la réponse et sont renvoyé au client (qui aura du mal à le parsé en JSON).

Lorsque tu émet une requête AJAX avec Javascript dans ton navigateur et avant que la requête soit envoyé tu peut ouvrir ta console de développement (F12 sous window où click droit -> inspecte élément)

Passer sur l'onglet réseaux où network et ensuite envoyé ta requête.

Lorsque la requête et envoyé l'onglet doit avoir tracé la requête:

L'onglet réseaux de ton navigateur devrait ressemblé à cela après que tu es envoyé ta requête, là ou tu pourras voir le status de la requête et l'endroit où elle et partie.

A noté que si tu as une page web un peut complexe que tu charge beaucoup de fichiers CSS et JAVASCRIPT qui viennent obstrué l'onglet réseaux tu doit avoir un bouton Fetch/XHR qui permet ne n'affiché que les requête AJAX envoyé par Javascript.

Tu peut cliqué sur la ligne de la requête réseaux pour affiché les détails, sur cet encadré tu peut voir les en têtes de la réponse (et aussi de la requête)

Dans ton cas tu peut déjà vérifié que l'en tête Content-Type de la réponse et bien du application/json et pas genre du text/html où du text/plain

Sinon c'est qu'il y à un problème sur les données renvoyé.

Et enfin si ça ne suffit pas à débugué la requête, tu peut aussi prévisualisé à la volé le contenue que ta renvoyé le serveur en passant sur l'onglet Réponse.

Cet onglet te permettras de vérifié que le format des données et valide.

Dans les capture d'écrans j'ai pris l'exemple d'une API qui renvoi du lorem ipsum dans un tableau JSON (Bacon Ipsum API)

dans ton cas dans l'onglet Réponse tu devrais voir une grappe JSON contenant:

{
  "status": "OK"
}

Si dans l'onglet Réponse  tu visualise une structure HTML à la place de la grappe JSON c'est très certainement à cause des includes qui ont affiché du contenue HTML qui à été introduit dans le corps de la réponse.

Dans ce cas il faudra réussir à isolé les fichiers PHP qui font le traitement AJAX des fichiers qui affiche du contenue HTML.

-
Edité par SamuelGaborieau3 il y a 30 minutes

Merci beaucoup mon frère, oui c'est vraiment ça, les include bloquent le retour de la promesse, j'ai fais une fetch direct à la page et ça marche trés bien !

Donc la page PHP qui doit traiter l'AJAX doit être spécialisée pour ça et n'afficher que des variables retours pour JSON.
Merci