1. #1
    Membre du Club
    Homme Profil pro
    Développeur informatique
    Inscrit en
    février 2009
    Messages
    67
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : février 2009
    Messages : 67
    Points : 43
    Points
    43

    Par défaut Post data d'un formulaire Angular 4 en PHP

    Bonjour,

    Je suis entrain de créer une petite application qui permet de récupérer les données depuis un serveur et après les modifier ou ajouter d'autres entrée avec les technologies (Angular4, PHP, Mysql)

    1. Pour obtenir les données j'ai un fichier getClients.php
    Code PHP : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <?php
    header('Access-Control-Allow-Origin:*');
    include('connection.php');
    $statement = $pdo->prepare( "select * from clients");
    $statement->execute();
    $results= $statement->fetchAll(PDO::FETCH_ASSOC);
     
    $json = json_encode($results);
     
    echo $json;
    ?>
    et ça marche très bien coté Angular j'arrive à récupérer mes données et les afficher, mon problème est: je n'arrive pas à envoyer données au serveur et je pense que le problème vient de PHP, le fichier utilisé pour la méthode POST est postClients.php:

    Code PHP : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    <?php
    header('Access-Control-Allow-Origin:*');
    header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
    echo "Data envoyées";
     
    $data = json_decode(file_get_contents('php://input'));
    echo $data;
    ?>
    et j'ai essayé encore var_dump ($_POST) et ça ne marche pas.

    mes fichier Angular sont:

    1. clients.service.ts
    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
    import { Injectable } from '@angular/core';
    import {Http, Headers} from '@angular/http';
    import 'rxjs/Rx';
     
     
    @Injectable 
    export class ClientsService {
     
      constructor(private http: Http) {}
     
      // obtenir les client du serveur
      getClients() {
        return this.http.get('http://localhost/testPhp/getClients.php');
      }
     
      // form submit to serveur
      postClient(client: any) {
        const headers = new Headers({'Content-Type': 'application/json'});
        console.log('Client object values from form: ');
        console.log(client);
        return this.http.post('http://localhost/testPhp/postClients.php', client, {headers: headers});
      }
    }
    et dans app.component.ts:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    onSubmit(form: NgForm) {
            this.submitted = true;
     
           this.clienteService.postClient(form.value).subscribe(
                (formContents) => console.log('Form contents in app component sended ' + formContents),
                (error) => console.log('Erreur de ' + error)
            );
     
            this.signupForm.reset();
        }
    et avec le console je vérifie bien que mes données sont envoyées au service clients.service.ts :

    avec var_dump($_POST) dans mon fichier postClients.php je n'ai pas d'erreur mais j'ai rien coté serveur
    avec
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    $data = json_decode(file_get_contents('php://input'));
    echo $data;
    j'ai une erreur 500 :

    Merci à vous si vous pouvez me dire comment je peux régler ce problème

    Gr

  2. #2
    Membre expérimenté

    Homme Profil pro
    Développeur multimédia
    Inscrit en
    juillet 2004
    Messages
    978
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur multimédia
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : juillet 2004
    Messages : 978
    Points : 1 708
    Points
    1 708
    Billets dans le blog
    1

    Par défaut

    J'ai pas tout regardé ton code mais la première erreur relevé est que tu POST a PHP pas un formulaire en tant que content type mais un JSON .
    Change ton content type par :
    Dans postClient
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     
    headers: { 
    const headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded'});

  3. #3
    Membre du Club
    Homme Profil pro
    Développeur informatique
    Inscrit en
    février 2009
    Messages
    67
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : février 2009
    Messages : 67
    Points : 43
    Points
    43

    Par défaut

    merci headmax,
    J'ai changé mon code dans mon tables.service.ts :
    Code Javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    postTableContent(contents: any[]) {
          const formData: FormData = new FormData();
          formData.append('data', JSON.stringify(contents));
          const headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded'});
          console.log('form data \n' + JSON.stringify(contents));
     
          return this.http.post('http://localhost/silaboBackend/postData.php',
              formData
              , {headers: headers}
          );
      }

    et j'ai toujours rien coté serveur avec
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    $data = file_get_contents("php://input");
    var_dump ($data);
    var_dump ($_POST)
    je ne vois pas comment récupérer les données coté serveur?

  4. #4
    Membre expérimenté

    Homme Profil pro
    Développeur multimédia
    Inscrit en
    juillet 2004
    Messages
    978
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur multimédia
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : juillet 2004
    Messages : 978
    Points : 1 708
    Points
    1 708
    Billets dans le blog
    1

    Par défaut

    Salut est tu sur que le POST vers postClients.php est bien exécuté depuis angular? vérifie si tu as bien un POST F12 (réseaux) sur ton navigateur. Tu utilise un controler ou un services dans angular?

  5. #5
    Membre du Club
    Homme Profil pro
    Développeur informatique
    Inscrit en
    février 2009
    Messages
    67
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : février 2009
    Messages : 67
    Points : 43
    Points
    43

    Par défaut

    Merci headmax,

    J'utilise un service:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
    postTableContent(contents: any[]) {
          const formData: FormData = new FormData();
          formData.append('data', JSON.stringify(contents));
          const headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded'});
          return this.http.post('http://localhost/silaboBackend/postData.php',
              formData
              , {headers: headers}
          )
              .map(res => res.json());
      }
    dans reseaux j'ai bien:
    status method File Domain Cause Type Transfer Size
    200 Post postData.php localhost xhr 356 B 54

    et dans mon fichier table.ts la methode onSubmit:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    onSubmit(form: NgForm) {
            this.tableContentsS.postTableContent(form.value)
                .subscribe(
                    (formContents) => console.log('Form Contents sended correctly'),
                    (error) => console.log(error)
                );
            // print form values to the console
            // console.log(JSON.stringify(form.value));
            this.signupForm.reset();
            this.viewForm = false;
        }
    j'ai cherché par tout pour un example claire avec la submission d'un formulaire Angular vers php sur internet et j'ai rien trouvé

    Merci pour ton aide parce que je suis vraiment bloqué

    Gr

  6. #6
    Membre expérimenté

    Homme Profil pro
    Développeur multimédia
    Inscrit en
    juillet 2004
    Messages
    978
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur multimédia
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : juillet 2004
    Messages : 978
    Points : 1 708
    Points
    1 708
    Billets dans le blog
    1

    Par défaut

    Salut je vois que tu stringify contents est tu sur de ce que retourne contents? car PHP attends un POST de données brutes non "stringifier" un tableau des inputs et select ... nommé en fonction de leur attribut name="nom"
    Citation Envoyé par ghatfan99 Voir le message
    formData.append('data', JSON.stringify(contents));

  7. #7
    Membre du Club
    Homme Profil pro
    Développeur informatique
    Inscrit en
    février 2009
    Messages
    67
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : février 2009
    Messages : 67
    Points : 43
    Points
    43

    Par défaut

    j'ai remplacé le
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
     formData.append('data', JSON.stringify(contents));
    par
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
     formData.append('data', contents);
    et ça donne rien coté serveur réponse vide,
    le
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
     console.log('form data \n' + contents);
    dans le service donne:
    form data
    [object Object]

    Merci

  8. #8
    Expert confirmé Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    juin 2010
    Messages
    2 467
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 29
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : juin 2010
    Messages : 2 467
    Points : 4 967
    Points
    4 967

    Par défaut

    Peut-être qu’un var_dump($_REQUEST) pourrait donner quelques indices, notamment la taille de la requête, pour vérifier que le serveur reçoit bien les données.

    Quelle est ta version de PHP ? Quel est ton niveau error_reporting ?
    La FAQ JavaScript – Les cours JavaScript
    Un article du MDN n’a pas de version française ? Je peux peut-être le traduire, envoyez-moi un MP

    La touche F12 : l’outil indispensable à tout développeur JavaScript !

  9. #9
    Membre expérimenté

    Homme Profil pro
    Développeur multimédia
    Inscrit en
    juillet 2004
    Messages
    978
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur multimédia
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : juillet 2004
    Messages : 978
    Points : 1 708
    Points
    1 708
    Billets dans le blog
    1

    Par défaut

    Salut , je rajouterais qu'il faut vérifier les logs Apaches pour plus de précision, mais moins de convivialité .

    Si tu es sous linux :
    Code ssh : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     
    sudo tail -n 30 /var/log/apache2/access.log
    sudo tail -n 30 /var/log/apache2/error.log

  10. #10
    Expert confirmé Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    juin 2010
    Messages
    2 467
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 29
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : juin 2010
    Messages : 2 467
    Points : 4 967
    Points
    4 967

    Par défaut

    Merci headmax, c’est le genre de truc que j’oublie tout le temps

    Je rajoute un exemple de chemin pour WAMPServer, car j’ai encore la mauvaise habitude de développer sous Windows
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    C:\wampserver3\bin\apache\apache2.4.23\logs\
    La FAQ JavaScript – Les cours JavaScript
    Un article du MDN n’a pas de version française ? Je peux peut-être le traduire, envoyez-moi un MP

    La touche F12 : l’outil indispensable à tout développeur JavaScript !

Discussions similaires

  1. Réponses: 4
    Dernier message: 14/04/2014, 10h24
  2. [ASP .NET2] Post data sur un formulaire
    Par prez dans le forum ASP.NET
    Réponses: 8
    Dernier message: 17/08/2007, 10h59
  3. Réponses: 8
    Dernier message: 07/10/2006, 00h03
  4. Comment supprimer les post data
    Par jeff_! dans le forum Formulaires
    Réponses: 4
    Dernier message: 03/08/2006, 10h55
  5. Réponses: 1
    Dernier message: 15/05/2006, 18h05

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo