Retour Fetch vide

Version imprimable

Retour Fetch vide

Salut tout l'monde !

J'ai un petit soucis , je m'explique :

Ce que j'aimerais faire :

Au clique sur un bouton 'ajouter favoris' , mon script lance une fonction qui fetch vers une page PHP l'article que la personne a voulu ajouter en favoris.

Du coup , j'me suis fait un mini projet pour isolé cette fonctionnalités avant de l'implémenté.

Bref , un peu d'code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
const divparent = document.getElementById('all');
const boutonfavoris = document.getElementById('click');
 
boutonfavoris.addEventListener('click', () => {
        let data = new FormData();
        data.append("json", JSON.stringify(divparent));
        fetch("http://localhost/test/transform.php", {
                method: "POST",
                body: data
            })
            .then((res) => res.text())
            .then((data) => console.log(data))
    });

Code:

1
2
3
4
5
6
7
  <div id="all">
    <p>coucou</p>
    <p> Je suis une image de voiture</p>
    <button id="click">Ajouter au favoris</button>
  </div>
 
  <script src="script.js"></script>

Seulement quand je clique , voici le retour de mon console.log(data)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    Array
(
)
 
 
</body>
</html>

Du coup tableau vide , Qué passa? :/

Merci a tous de m'avoir lu ! :)

07/02/2020, 09h57
SpaceFrog

et transform.php ??

Salut !!

Voila pour transform.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php 
    session_start(); 
    $data = json_decode($_POST['json'],true);
?>
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <?php
        print_r($data);
    ?>
</body>
</html>

Le voici ;p

Procédons par étapes ...
Essaye
pour la page transform.php
Code:

1 2 3 4 5 6 <?php session_start(); $data = $_POST; var_dump( $data ); ?>
Sans rien d'autre ..

07/02/2020, 10h14
taosikua
Ah, ca ma donné quelque chose
Code:

1 2 3 4 5 array(1) { ["json"]=> string(2) "{}" }
Je comprends d'ailleurs pas bien ce que signifie le 'string(2)' :weird:

Edit : j'suis con , c'est "{}" qui vaut 2string :roll:

Code:

1
2
3
4
5
6
<?php 
    session_start(); 
    $data = $_POST["json"];
   var_dump( $data ); 
 
  ?>

07/02/2020, 10h19
taosikua
Ca ca m'rends que
Code:

1 2 string(2) "{}"
:p

donc tu envoies un objet json vide ...
Teste avant de faire ton fetch ...

Code:

1
2
3
4
boutonfavoris.addEventListener('click', () => {
        let data = new FormData();
        data.append("json", JSON.stringify(divparent));
       console.log( data ) ;

07/02/2020, 10h25
taosikua

Yep , en effet , j'ai inséré ton console.log et j'recois bien un formdata vide :/
07/02/2020, 10h33
SpaceFrog

tu ne reçois pas ...
tu ne mets pas ce que tu crois mettre dans ton objet coté client avant d'envoyer :

y'a quoi dans divparent ?

Si je console.log(divparent);

dans ma console j'ai mon html , comme ca

Code:

1
2
3
4
5
  <div id="all">
    <p>coucou</p>
    <p> Je suis une image de voiture</p>
    <button id="click">Ajouter au favoris</button>
  </div>

07/02/2020, 10h55
SpaceFrog

donc du code HTML ...

que pense tu q'un JSON.stringify fasse sur du code HTML ?
07/02/2020, 11h07
taosikua

Ok , ok , laisse moi 10 minutes :mouarf: J'pense avoir compris !! J'reviens avec du code :p !
07/02/2020, 11h11
SpaceFrog

Pas de souci, prends le temps de la réflexion ;)

Bon , avec quelque chose comme ca

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
 
const divparent = document.getElementById('all');
const boutonfavoris = document.getElementById('click');
 
let MyFetchArray = [];
const allchild = divparent.childNodes
 
for (let i = 0 ; i < allchild.length ; i ++) {
  if (allchild[i].innerHTML !== undefined) {
      MyFetchArray.push(allchild[i].innerHTML);
  }
}
 
console.log(MyFetchArray);
 
boutonfavoris.addEventListener('click', () => {
  let data = new FormData();
  data.append("json", JSON.stringify(MyFetchArray));
  console.log(data);
  fetch("http://localhost/test/transform.php", {
    method: "POST",
    body: data
  })
  .then((res) => res.text())
  .then((data) => console.log(data))
});

J'reçois

Code:

1
2
3
 
FormData*{}__proto__: FormData
script.js:24 string(63) "["coucou"," Je suis une image de voiture","Ajouter au favoris"]"

Du coup , ça semble être bon !
J'attends confirmation pour passé en résolu ;p

07/02/2020, 11h20
SpaceFrog

confirmation de qui ?
tout dépend de ce que tu souhaites faire ...
de ce que tu souhaites passer dans ton json ?
là en fait tu passes un array avec le contenu des balise
07/02/2020, 11h31
taosikua

Yep ! Mais normalement ca va être bon , ce que je veux faire est un truc bien plus vaste , c'est juste que j'ai tjrs des soucis pour fetch , c'est quelque chose que je maîtrise mal !

Mais en gros , j'dois fetch ce genre d'info a une page PHP qui ouvre une session , qui récup toute les info et qui les affiche , c'est en quelque sorte comme pour faire un panier de e-commerce
sauf que y aura pas de bdd , tout se fait via le fetch et des sessions pour que les utilisateurs puissent "sauvegarder" leurs favoris !

Voilou voilou la finalité du truc :p ! Mais du coup je vais passer ceci en résolu !

Pour résumé :

La méthode JSON.stringify() ne permet pas d'envoyer directement de l'html qu'on aurais récupérer en sélectionnant par exemple un ID ou quelque chose comme cela ;p

Merci jeune grenouille de l’espace , a bientôt tout l'monde !
07/02/2020, 11h47
SpaceFrog
En effet JSON.stringify, comme son nome l'indique transforme un objet json en un string json
Code:

1 2 3 4 5 myjson= { "nom": "TRUC", "prenom": "Muche"}; mystrjson= JSON.stringify (myjson); console.log ( myjson); // un objet en console console.log(mystrjson);// une chaine de caractères en console
L'objet ne passant pas l'ajax il faut le convertir en string ...
coté serveur tu convertis le string reçu avec json_decode
07/02/2020, 13h26
taosikua

Yep ! Merci beaucoup pour les précision Space !!! :)

Au plaisir :mrgreen: