Retour Fetch vide

**taosikua** · 07/02/2020, 09h42

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 :

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

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 HTML :

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

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 HTML :

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
<!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 !

**SpaceFrog** · 07/02/2020, 09h57

et transform.php ??

**taosikua** · 07/02/2020, 10h01

Salut !!

Voila pour transform.php

Code html :

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
<?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

**SpaceFrog** · 07/02/2020, 10h12

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

Code :

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

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

Sans rien d'autre ..

**taosikua** · 07/02/2020, 10h14

Ah, ca ma donné quelque chose

Code :

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

1
2
3
4
5
 
array(1) {
  ["json"]=>
  string(2) "{}"
}

Je comprends d'ailleurs pas bien ce que signifie le 'string(2)'

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

**SpaceFrog** · 07/02/2020, 10h18

Code :

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

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

**taosikua** · 07/02/2020, 10h19

Ca ca m'rends que

Code :

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

1
2
 
string(2) "{}"

:p

**SpaceFrog** · 07/02/2020, 10h23

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

Code :

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

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

**taosikua** · 07/02/2020, 10h25

Yep , en effet , j'ai inséré ton console.log et j'recois bien un formdata vide :/

**SpaceFrog** · 07/02/2020, 10h33

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 ?

**taosikua** · 07/02/2020, 10h39

Si je console.log(divparent);

dans ma console j'ai mon html , comme ca

Code html :

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

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>

**SpaceFrog** · 07/02/2020, 10h55

donc du code HTML ...

que pense tu q'un JSON.stringify fasse sur du code HTML ?

**taosikua** · 07/02/2020, 11h07

Ok , ok , laisse moi 10 minutes

J'pense avoir compris !! J'reviens avec du code :p !

**SpaceFrog** · 07/02/2020, 11h11

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

**taosikua** · 07/02/2020, 11h14

Bon , avec quelque chose comme ca

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
 
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 :

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

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

**SpaceFrog** · 07/02/2020, 11h20

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

**taosikua** · 07/02/2020, 11h31

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 !

**SpaceFrog** · 07/02/2020, 11h47

En effet JSON.stringify, comme son nome l'indique transforme un objet json en un string json

Code :

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

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

**taosikua** · 07/02/2020, 13h26

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

Au plaisir

Retour Fetch vide

JavaScript

Discussions similaires

Partager

Partager