Partage
  • Partager sur Facebook
  • Partager sur Twitter

Envoyer des donnees au server avec AJAX

    11 juin 2021 à 3:23:35

    Bonjour,Bonsoir suivant l'heure chez vous,

    j'ai un petit probleme avec Ajax plus precisement je ne peux pas envoyé mes données POST

    let form = document.getElementById("form");
    let btn = document.querySelector('input[type="submit"]');
    
    function send(e){
        e.preventDefault();
        
        let formData = new FormData();
        formData.append("t",document.querySelector('#value').value);
        let val = '';
        for(let pair of formData.entries())
            {
                console.log(pair[1]) 
                val = pair[1];
            }
        fetch("https://mockbin.com/request",{
            method:"POST",
            header:{
                'Accept':'application/json',
                'Content-type':'application/json'
            },
            body: JSON.stringify({value: val})
        })
       .then(function(res){
            if(res.ok)
                {
                    return res.json();
                }
        })
        .then(function(value){
            console.log(value);
        })
        
        
    }
    btn.addEventListener("click", send);

    un ami m'avait dit que je ne peux pas envoyer du json avec form-data je vois que ce code ci-dessus marche tres bien avec l'API

    quand je fais 

    fetch("",{
            method:"POST",
            
            body:val
        })
       .then(function(res){
            if(res.ok)
                {
                    return res;
                }
        })
        .then(function(value){
            console.log(value);
        })

    Il me donne le statut 200 mais je ne vois pas le resultat de l'input

    Toujours en train de resourdre l'erreur avec

    fetch("",{
            method:"POST",
            header:{
                'Accept':'application/json',
                'Content-type':'application/json'
            },
            body: JSON.stringify({value: val})
        })
       .then(function(res){
            if(res.ok)
                {
                    return res.json();
                }
        })
       .then(function(value){
           console.log(value);
       })



    Il me donne l'erreur VM1403:1 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

    enfaite ce que je veux c'est voir les données que j'ai envoyés au server comme je fesai avec return res.json()

    Merci,de vos reponses.



    -
    Edité par Opening1 12 juin 2021 à 17:16:40

    • Partager sur Facebook
    • Partager sur Twitter
      11 juin 2021 à 22:12:17

      Salut,

      tu as mis le même code entre le 1er et le 2e code, tu dis que ça marche avec l'api mais que tu peux pas envoyer tes données, donc j'ai pas trop compris.

      tu pourrais peut-être vérifier avec un simple test, tu remplaces ton objet littéral par : {"value" : "test" } avec les doubles guillemets et console.log(res.json())

      Sinon, pour après, tu peux voir les données envoyées avec Chrome > outils de développement (sur mac : pomme+alt+i) > Network (il faut rafraichir la page pour avoir les données) > XHR > tu cliques sur une ligne > Headers

      -
      Edité par Arthur222 11 juin 2021 à 22:14:25

      • Partager sur Facebook
      • Partager sur Twitter
        12 juin 2021 à 17:19:50

        Arthur222 a écrit:

        Salut,

        tu as mis le même code entre le 1er et le 2e code, tu dis que ça marche avec l'api mais que tu peux pas envoyer tes données, donc j'ai pas trop compris.

        tu pourrais peut-être vérifier avec un simple test, tu remplaces ton objet littéral par : {"value" : "test" } avec les doubles guillemets et console.log(res.json())

        Sinon, pour après, tu peux voir les données envoyées avec Chrome > outils de développement (sur mac : pomme+alt+i) > Network (il faut rafraichir la page pour avoir les données) > XHR > tu cliques sur une ligne > Headers

        -
        Edité par Arthur222 il y a environ 19 heures

        Desolé,J'ai modifié le text

        A Noter que l'attribut action de mon post est vide , c'est pour cette raison que je n'ai pas mis d'url dans fetch()

        • Partager sur Facebook
        • Partager sur Twitter
          12 juin 2021 à 21:00:02

          l'attribut action de ton "form" tu veux dire?

          Mais pourquoi tu ne mets pas d'url à fetch? C'est une fonction qui marche avec une url comme premier paramètre.

          • enfaite ce que je veux c'est voir les données que j'ai envoyés au server comme je fesai avec return res.json()

          tu veux juste voir les données par curiosité? Tu as essayé ça, avec une url dans fetch?

          • Sinon, pour après, tu peux voir les données envoyées avec Chrome > outils de développement (sur mac : pomme+alt+i) > Network (il faut rafraichir la page pour avoir les données) > XHR > tu cliques sur une ligne > Headers
          • Partager sur Facebook
          • Partager sur Twitter
            Hier à 16:22

            Mais pourquoi tu ne mets pas d'url à fetch?

            En gros j'utilise des pointers

            dans un 1er lieu j'ai mon fichier htacess qui analyse l'url et applique le controller correspondant, avant j'avais pas besoin de passer d'url a fetch juste parceque j'en avais pas besoin, mon controller a seulement besoin de connaitre s'il y avait un element dans ma variable $_POST.

            Un extrait 

            public function executeIndex(HttpRequest $request)
                {
                    //verification des donnees
                    if($request->postDataExists('firstName')) //verifie si mon $_POST existe
                    {
                        $this->requestProcess($request);
                    }
                    $this->app->httpResponse()->page()->setVars('title','Inscription');
                }
            • Network (il faut rafraichir la page pour avoir les données) > XHR > tu cliques sur une ligne > Headers

            Je les vois bien dans l'outil network,je pense que le probleme n'est pas là,dans ma tete j'essai de trouver une solution afin de lier Ajax avec le controller,comme je fesai en pur php pour enregistrer les inputs en bdd

            • Partager sur Facebook
            • Partager sur Twitter
              Hier à 21:43

              OK, alors j'utilise pas php et les controller, mais je pense que tu peux faire un simple appel ajax vers une url spécifique (tonsite.com/appelAjax), l'appel est capté par ton router, qui va appeler ton controller, le controller retourne un array de données, qui est récupérée dans le callback d'ajax.

              Si tu fais une recherche google, tu peux trouver des exemples sur stackoverflow. Si fetch() ne fonctionne pas bien, tu peux toujours essayer la méthode $.ajax() de jquery (si tu connais pas bien, voilà un exemple dans un autre sujet). Pour parser le json automatiquement (si le controller renvoie du json) tu peux mettre :

              , dataType: "json",

              dans les paramètres ajax, ça sera la même chose que de faire JSON.parse(retourDuPhp) dans la méthode success.

              • Partager sur Facebook
              • Partager sur Twitter
                Il y a environ 4 heures

                Merci Arthur222 d'avoir pris le temps de m'aider 

                je vais essayer ce que vous avez dit je vous tiens au courant

                Bonne journée

                • Partager sur Facebook
                • Partager sur Twitter

                Envoyer des donnees au server avec AJAX

                × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                • Editeur
                • Markdown