Récupérer: POST json data

J'essaye de POSTER un objet JSON à l'aide de la récupération .

D'après ce que je peux comprendre, je dois attacher un objet stratifié au corps de la demande, par exemple:

fetch("/echo/json/",
{
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    method: "POST",
    body: JSON.stringify({a: 1, b: 2})
})
.then(function(res){ console.log(res) })
.catch(function(res){ console.log(res) })

Lorsque j'utilise l'écho json de jsfiddle, je m'attendrais à voir l'objet que j'ai envoyé ( {a: 1, b: 2}), mais cela ne se produit pas - chrome devtools n'affiche même pas le JSON dans le cadre de la demande, ce qui signifie qu'il n'est pas envoyé.

Avec le async/awaitsupport ES2017 , voici comment utiliser POSTune charge utile JSON:

(async () => {
  const rawResponse = await fetch('https://httpbin.org/post', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({a: 1, b: 'Textual content'})
  });
  const content = await rawResponse.json();

  console.log(content);
})();

Vous ne pouvez pas utiliser ES2017? Voir la réponse de @ vp_art en utilisant des promesses

La question demande cependant un problème causé par un bug de chrome corrigé depuis longtemps.
La réponse originale suit.

chrome devtools n'affiche même pas le JSON dans le cadre de la demande

C'est le vrai problème ici , et c'est un bogue avec chrome devtools , corrigé dans Chrome 46.

Ce code fonctionne bien - il POSTE correctement le JSON, il ne peut tout simplement pas être vu.

Je m'attends à voir l'objet que j'ai renvoyé

cela ne fonctionne pas car ce n'est pas le format correct pour l'écho de JSfiddle .

Le bon code est:

var payload = {
    a: 1,
    b: 2
};

var data = new FormData();
data.append( "json", JSON.stringify( payload ) );

fetch("/echo/json/",
{
    method: "POST",
    body: data
})
.then(function(res){ return res.json(); })
.then(function(data){ alert( JSON.stringify( data ) ) })

Pour les points finaux acceptant les charges utiles JSON, le code d'origine est correct

Je pense que votre problème est de jsfiddlepouvoir traiter la form-urlencodeddemande uniquement.

Mais la bonne façon de faire une demande json est de passer correctement en jsontant que corps:

fetch('https://httpbin.org/post', {
  method: 'post',
  headers: {
    'Accept': 'application/json, text/plain, */*',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({a: 7, str: 'Some string: &=&'})
}).then(res=>res.json())
  .then(res => console.log(res));

Depuis les moteurs de recherche, je me suis retrouvé sur ce sujet pour les données de publication non json avec fetch, alors j'ai pensé l'ajouter.

Pour les non-json, vous n'avez pas besoin d'utiliser les données du formulaire. Vous pouvez simplement définir l'en- Content-Typetête application/x-www-form-urlencodedet utiliser une chaîne:

fetch('url here', {
    method: 'POST',
    headers: {'Content-Type':'application/x-www-form-urlencoded'}, // this line is important, if this content-type is not set it wont work
    body: 'foo=bar&blah=1'
});

Une autre façon de construire cette bodychaîne, plutôt que de la taper comme je l'ai fait ci-dessus, est d'utiliser des bibliothèques. Par exemple la stringifyfonction from query-stringou qspackages. Donc, en utilisant cela, cela ressemblerait à:

import queryString from 'query-string'; // import the queryString class

fetch('url here', {
    method: 'POST',
    headers: {'Content-Type':'application/x-www-form-urlencoded'}, // this line is important, if this content-type is not set it wont work
    body: queryString.stringify({for:'bar', blah:1}) //use the stringify object of the queryString class
});

Après avoir passé quelques temps, inverser l'ingénierie jsFiddle, essayer de générer de la charge utile - il y a un effet.

Veuillez prendre soin (attention) en ligne return response.json();lorsque la réponse n'est pas une réponse - c'est une promesse.

var json = {
    json: JSON.stringify({
        a: 1,
        b: 2
    }),
    delay: 3
};

fetch('/echo/json/', {
    method: 'post',
    headers: {
        'Accept': 'application/json, text/plain, */*',
        'Content-Type': 'application/json'
    },
    body: 'json=' + encodeURIComponent(JSON.stringify(json.json)) + '&delay=' + json.delay
})
.then(function (response) {
    return response.json();
})
.then(function (result) {
    alert(result);
})
.catch (function (error) {
    console.log('Request failed', error);
});

jsFiddle: http://jsfiddle.net/egxt6cpz/46/ && Firefox> 39 && Chrome> 42

J'ai créé un wrapper fin autour de fetch () avec de nombreuses améliorations si vous utilisez une API REST purement json:

// Small library to improve on fetch() usage
const api = function(method, url, data, headers = {}){
  return fetch(url, {
    method: method.toUpperCase(),
    body: JSON.stringify(data),  // send it as stringified json
    credentials: api.credentials,  // to keep the session on the request
    headers: Object.assign({}, api.headers, headers)  // extend the headers
  }).then(res => res.ok ? res.json() : Promise.reject(res));
};

// Defaults that can be globally overwritten
api.credentials = 'include';
api.headers = {
  'csrf-token': window.csrf || '',    // only if globally set, otherwise ignored
  'Accept': 'application/json',       // receive json
  'Content-Type': 'application/json'  // send json
};

// Convenient methods
['get', 'post', 'put', 'delete'].forEach(method => {
  api[method] = api.bind(null, method);
});

Pour l'utiliser, vous avez la variable apiet 4 méthodes:

api.get('/todo').then(all => { /* ... */ });

Et au sein d'une asyncfonction:

const all = await api.get('/todo');
// ...

Exemple avec jQuery:

$('.like').on('click', async e => {
  const id = 123;  // Get it however it is better suited

  await api.put(`/like/${id}`, { like: true });

  // Whatever:
  $(e.target).addClass('active dislike').removeClass('like');
});

Ceci est lié à Content-Type. Comme vous l'avez peut-être remarqué lors d'autres discussions et réponses à cette question, certaines personnes ont pu la résoudre en définissant Content-Type: 'application/json'. Malheureusement dans mon cas cela n'a pas fonctionné, ma requête POST était toujours vide côté serveur.

Cependant, si vous essayez avec jQuery $.post()et que cela fonctionne, la raison est probablement que jQuery utilise Content-Type: 'x-www-form-urlencoded'au lieu de application/json.

data = Object.keys(data).map(key => encodeURIComponent(key) + '=' + encodeURIComponent(data[key])).join('&')
fetch('/api/', {
    method: 'post', 
    credentials: "include", 
    body: data, 
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})

Eu le même problème - non body été envoyé d'un client à un serveur.

L'ajout d'un en- Content-Typetête l'a résolu pour moi:

var headers = new Headers();

headers.append('Accept', 'application/json'); // This one is enough for GET requests
headers.append('Content-Type', 'application/json'); // This one sends body

return fetch('/some/endpoint', {
    method: 'POST',
    mode: 'same-origin',
    credentials: 'include',
    redirect: 'follow',
    headers: headers,
    body: JSON.stringify({
        name: 'John',
        surname: 'Doe'
    }),
}).then(resp => {
    ...
}).catch(err => {
   ...
})

La première réponse ne fonctionne pas pour PHP7, car son encodage est incorrect, mais je pourrais trouver le bon encodage avec les autres réponses. Ce code envoie également des cookies d'authentification, que vous souhaiterez probablement lorsque vous traitez, par exemple, avec des forums PHP:

julia = function(juliacode) {
    fetch('julia.php', {
        method: "POST",
        credentials: "include", // send cookies
        headers: {
            'Accept': 'application/json, text/plain, */*',
            //'Content-Type': 'application/json'
            "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8" // otherwise $_POST is empty
        },
        body: "juliacode=" + encodeURIComponent(juliacode)
    })
    .then(function(response) {
        return response.json(); // .text();
    })
    .then(function(myJson) {
        console.log(myJson);
    });
}

Cela pourrait être utile à quelqu'un:

J'avais le problème que les données du formulaire n'étaient pas envoyées pour ma demande

Dans mon cas, c'était une combinaison des en-têtes suivants qui causaient également le problème et le mauvais type de contenu.

J'envoyais donc ces deux en-têtes avec la demande et ce n'était pas l'envoi des données de formulaire lorsque j'ai supprimé les en-têtes qui fonctionnaient.

"X-Prototype-Version" : "1.6.1",
"X-Requested-With" : "XMLHttpRequest"

De même, comme d'autres réponses suggèrent que l'en-tête Content-Type doit être correct.

Pour ma demande, l'en-tête de type de contenu correct était:

"Content-Type": "application / x-www-form-urlencoded; charset = UTF-8"

Donc, en fin de compte, si vos données de formulaire ne sont pas jointes à la demande, cela pourrait potentiellement être vos en-têtes. Essayez de réduire au minimum vos en-têtes, puis essayez de les ajouter un par un pour voir si votre problème est résolu.

Je pense que, nous n'avons pas besoin d'analyser l'objet JSON dans une chaîne, si le serveur distant accepte json dans leur demande, exécutez simplement:

const request = await fetch ('/echo/json', {
  headers: {
    'Content-type': 'application/json'
  },
  method: 'POST',
  body: { a: 1, b: 2 }
});

Tels que la demande de boucle

curl -v -X POST -H 'Content-Type: application/json' -d '@data.json' '/echo/json'

Dans le cas où le serveur distant n'accepte pas un fichier json comme corps, envoyez simplement un dataForm:

const data =  new FormData ();
data.append ('a', 1);
data.append ('b', 2);

const request = await fetch ('/echo/form', {
  headers: {
    'Content-type': 'application/x-www-form-urlencoded'
  },
  method: 'POST',
  body: data
});

Tels que la demande de boucle

curl -v -X POST -H 'Content-type: application/x-www-form-urlencoded' -d '@data.txt' '/echo/form'

Si votre charge utile JSON contient des tableaux et des objets imbriqués, j'utiliserais URLSearchParams la param()méthode de jQuery .

fetch('/somewhere', {
  method: 'POST',
  body: new URLSearchParams($.param(payload))
})

Pour votre serveur, cela ressemblera à un HTML standard en <form>cours d' POSTédition.