Bonjour,

D'abord pour me présenter, je suis un "développeur" autodidacte senior par l’age (55 ans) mais très junior par l’ancienneté puisque j’ai du me mettre au développement web seulement depuis à peine 5 ans. J’arrive à me débrouiller avec PHP et javascript dans le sens où j’arrive toujours à trouver une solution à ce que l’on me demande
D’un naturel curieux je viens de suivre la formation sur REACT sur le site et pour mettre en pratique avec un exemple qui ne soit pas trop mâché j’ai voulu refaire un annuaire que j’avais réaliser auparavant. Rien de bien compliqué normalement.

Mais je rencontre un problème avec fetch que je n’arrive pas à comprendre ni à solutionner c’est pourquoi je sollicite un peu d’aide si vous avez un peu de temps.

Mon fichier App.jsx :

export function App() {

    const [lesMagasins, setLesMagasins] = useState(null);

    const RecupereMagasinsListe = async () => {
        const Reponse = await fetch('/ajax/ListeMagasins.ajax.php');
        console.log(Reponse);
        const Data = await Reponse.json();
        setLesMagasins(Data);
    }

    useEffect(() => {
        RecupereMagasinsListe();
      }, []);

  return (
    <div className='bg-slate-200 m-4 p-4'>
        <h1 className='mt-8 py-2 text-center text-4xl text-white bg-blue-400'>Annuaire du réseau HC</h1>
        <div>{lesMagasins && lesMagasins.message}</div>
    </div>
  )
}

Mon fichier ListeMagasins.ajax.php :
<?php

    $Retour = ['message' =>'Pas de magasins'];

    echo json_encode($Retour);

Ce que je veux

Pour faire simple mon appel fetch va recourir à une page php qui devra récupérer la liste des magasins (BDD mySQL) et qui retourne le résultat au moyen de json_encode.
Comme j'ai des problèmes j'ai simplifié au max le code pour limiter des problème annexes. Et pout le moment je cherche juste à avoir en retour un json "basique".
J'espère donc obtenir mon entête avec en dessous "pas de magasins"

Ce que j'obtiens

En mode développement (Vite) cela ne fonctionne pas, j'ai seulement l'entête.
Par contre en console le message d’erreur :

(Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data )

Pourtant le retour du fichier PHP est le même dans ce projet que dans celui en seul PHP-javascript et qui fonctionne très bien.
Le pire si je puis dire c'est que quand je fait un build et copie le contenu de dist dans mon site local test.local (crée pour l'occasion) j’ai bien le résultat escompté.
En l’occurrence l’info « pas de magasins» sous l’entête.
Quelqu’un à t-il une idée, une piste ou une solution pour que je puisse avoir le retour du fetch quand je suis en dev ? Parce que si je dois build puis copier dans test.locla pour voir si tout fonction ça va être l’enfer.
J’espère ne pas avoir été trop long, sinon promis je serai plus direct à l’avenir.

1 réponse


Hello,
dans ton script php essaie de mettre :

<?php
header('Content-Type: application/json; charset=utf-8');

$data = ['aze'=>'data'];

echo json_encode($data);

Si tu as un warning ou un var_dump avant cela peux poser probleme.