Getirme: POST json verileri

Getirme kullanarak bir JSON nesnesi POST çalışıyorum .

Ne anlayabiliyorum, örneğin, istek gövdesine dizgi nesneyi eklemek gerekir:

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) })

Jsfiddle'ın json echo'unu kullanırken {a: 1, b: 2}geri gönderdiğim nesneyi görmeyi beklerdim ( ), ancak bu gerçekleşmez - krom devtools, JSON'u isteğin bir parçası olarak göstermez, yani gönderilmez.

ES2017 ile async/awaitdestek , bu nasıl olduğunu POSTbir JSON yük:

(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);
})();

ES2017'yi kullanamıyor musunuz? @ Vp_art'ın vaatleri kullanarak verdiği cevaba bakınız

Ancak soru, uzun süredir sabit olan bir krom hatasının neden olduğu bir sorun istiyor .
Orijinal cevap aşağıdadır.

chrome devtools, JSON'u isteğin bir parçası olarak göstermiyor

Buradaki gerçek sorun ve Chrome 46'da düzeltilen krom cihazlarında bir hata .

Bu kod iyi çalışıyor - JSON'u doğru şekilde GÖSTERİYOR, sadece görülemiyor.

Geri gönderdiğim nesneyi görmeyi beklerdim

bu çalışmıyor çünkü JSfiddle'ın yankısı için doğru format bu değil .

Doğru kod geçerli:

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 ) ) })

JSON yüklerini kabul eden uç noktalar için orijinal kod doğrudur

Sorununuzun yalnızca isteği jsfiddleişleyebileceğini düşünüyorum form-urlencoded.

Ancak json isteği yapmanın doğru yolu json, bir vücut olarak doğru geçmek :

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));

Arama motorlarından, getirme ile json olmayan veri gönderme için bu konuda sona erdi, bu yüzden bunu ekleyeceğini düşündüm.

For olmayan json form verilerini kullanmak gerekmez. Content-TypeÜstbilgiyi yalnızca application/x-www-form-urlencodedbir dize olarak ayarlayabilir ve kullanabilirsiniz:

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'
});

Bu bodydizeyi oluşturmanın alternatif bir yolu , daha önce yaptığım gibi yazmak yerine, kütüphaneleri kullanmaktır. Örneğin, stringifyişlev query-stringveya qspaketlerden. Yani bunu kullanarak şöyle görünecektir:

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
});

Bazı zamanlar harcadıktan sonra, ters yük jsFiddle, yükü oluşturmaya çalışıyor - bir etkisi var.

Lütfen return response.json();yanıtın yanıt olmadığı bir yere dikkat edin (dikkat) - söz veriyorum.

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 ve& Chrome> 42

Tamamen json REST API kullanıyorsanız fetch () etrafında birçok iyileştirme ile ince bir sarmalayıcı oluşturduk:

// 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);
});

Kullanmak için değişken apive 4 yöntem var:

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

Ve bir asyncfonksiyon içinde :

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

JQuery ile örnek:

$('.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');
});

Bu ile ilgilidir Content-Type. Diğer tartışmalardan ve bu sorunun yanıtlarından fark etmiş olabileceğiniz gibi, bazı insanlar bunu ayarlayarak çözebildiler Content-Type: 'application/json'. Ne yazık ki benim durumumda işe yaramadı, POST isteğim sunucu tarafında hala boştu.

Ancak, jQuery's ile denerseniz $.post()ve çalışıyorsa, bunun nedeni büyük olasılıkla Content-Type: 'x-www-form-urlencoded'yerine jQuery kullanmaktır 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'}
})

Aynı sorun vardı - bodybir istemciden bir sunucuya hayır gönderildi.

Content-TypeBaşlık eklemek benim için çözdü:

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 => {
   ...
})

En iyi cevap PHP7 için çalışmıyor, çünkü yanlış kodlama var, ancak diğer cevaplarla doğru kodlamayı anlayabilirim. Bu kod aynı zamanda, örneğin PHP forumlarıyla uğraşırken muhtemelen istediğiniz kimlik doğrulama çerezlerini de gönderir:

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);
    });
}

Birisi için yararlı olabilir:

Form verilerimin isteğim için gönderilmemesi sorununu yaşıyordum

Benim durumumda, soruna ve yanlış İçerik Türü'ne neden olan aşağıdaki başlıkların bir birleşimi oldu.

Bu nedenle, bu iki üstbilgiyi istekle gönderiyordum ve çalışan üstbilgileri kaldırdığımda form verilerini göndermiyordu.

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

Ayrıca diğer yanıtlar İçerik Türü başlığının doğru olması gerektiğini gösterir.

İsteğim için doğru İçerik Türü başlığı şuydu:

"Content-Type": "application / x-www-form-urlencoded; karakter kümesi = UTF-8"

Sonuç olarak, form verileriniz İsteğe eklenmiyorsa, muhtemelen üstbilgileriniz olabilir. Başlıklarınızı en aza indirmeye çalışın ve ardından sorununuzun çözülüp çözülmediğini görmek için bunları tek tek eklemeyi deneyin.

Bence, JSON nesnesini bir dizeye ayrıştırmaya ihtiyacımız yok, uzak sunucu isteklerine json kabul ederse, sadece çalıştırın:

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

Kıvrılma isteği gibi

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

Uzak hizmetin gövde olarak bir json dosyasını kabul etmemesi durumunda, bir dataForm gönderin:

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
});

Kıvrılma isteği gibi

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

JSON yükünüz diziler ve iç içe nesneler içeriyorsa, URLSearchParams jQuery'nin param()yöntemini kullanırdım.

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

Sunucunuz için, bu standart bir HTML gibi görünecek <form>varlık POSTed.