Tìm nạp: POST dữ liệu json

Tôi đang cố gắng để gửi một đối tượng JSON bằng cách tìm nạp .

Từ những gì tôi có thể hiểu, tôi cần đính kèm một đối tượng được xâu chuỗi vào phần thân của yêu cầu, ví dụ:

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

Khi sử dụng tiếng vang json của jsfiddle, tôi mong muốn thấy đối tượng tôi đã gửi lại ( {a: 1, b: 2}), nhưng điều này không xảy ra - chrome devtools thậm chí không hiển thị JSON như một phần của yêu cầu, có nghĩa là nó không được gửi.

Với async/awaithỗ trợ ES2017 , đây là cách POSTtải trọng 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);
})();

Không thể sử dụng ES2017? Xem câu trả lời của @ vp_art bằng lời hứa

Tuy nhiên, câu hỏi đặt ra là vấn đề gây ra bởi lỗi chrome đã được sửa từ lâu.
Câu trả lời gốc sau đây.

chrome devtools thậm chí không hiển thị JSON như một phần của yêu cầu

Đây là vấn đề thực sự ở đây và đó là lỗi với chrome devtools , đã được sửa trong Chrome 46.

Mã đó hoạt động tốt - nó đang gửi JSON chính xác, nó không thể được nhìn thấy.

Tôi mong đợi được nhìn thấy đối tượng tôi đã gửi lại

điều đó không hoạt động vì đó không phải là định dạng chính xác cho tiếng vang của JSfiddle .

Các mã đúng là:

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

Đối với các điểm cuối chấp nhận tải trọng JSON, mã gốc là chính xác

Tôi nghĩ vấn đề của bạn chỉ jsfiddlecó thể xử lý form-urlencodedyêu cầu.

Nhưng cách chính xác để thực hiện yêu cầu json là vượt qua chính xác jsonnhư một cơ thể:

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

Từ các công cụ tìm kiếm, tôi đã kết thúc chủ đề này để đăng dữ liệu không phải là json với tìm nạp, vì vậy tôi nghĩ rằng tôi sẽ thêm nó.

Đối với non-json, bạn không phải sử dụng dữ liệu biểu mẫu. Bạn có thể chỉ cần đặt Content-Typetiêu đề thành application/x-www-form-urlencodedvà sử dụng một chuỗi:

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

Một cách khác để xây dựng bodychuỗi đó , thay vì gõ nó như tôi đã làm ở trên, là sử dụng các thư viện. Ví dụ, stringifychức năng từ query-stringhoặc qsgói. Vì vậy, sử dụng nó sẽ trông như:

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

Sau khi dành một số lần, jsFiddle kỹ thuật đảo ngược, cố gắng tạo ra tải trọng - có một hiệu ứng.

Xin hãy chú ý trực tuyến return response.json();nơi phản hồi không phải là phản hồi - đó là lời hứa.

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

Tôi đã tạo một trình bao bọc mỏng xung quanh fetch () với nhiều cải tiến nếu bạn đang sử dụng API REST hoàn toàn 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);
});

Để sử dụng nó, bạn có biến apivà 4 phương thức:

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

Và trong một asyncchức năng:

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

Ví dụ với 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');
});

Điều này có liên quan đến Content-Type. Như bạn có thể nhận thấy từ các cuộc thảo luận và câu trả lời khác cho câu hỏi này, một số người có thể giải quyết nó bằng cách cài đặt Content-Type: 'application/json'. Thật không may trong trường hợp của tôi nó không hoạt động, yêu cầu POST của tôi vẫn trống ở phía máy chủ.

Tuy nhiên, nếu bạn thử với jQuery $.post()và nó hoạt động, lý do có thể là do jQuery sử dụng Content-Type: 'x-www-form-urlencoded'thay vì 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'}
})

Có cùng một vấn đề - không bodyđược gửi từ máy khách đến máy chủ.

Thêm Content-Typetiêu đề đã giải quyết nó cho tôi:

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

Câu trả lời hàng đầu không hoạt động đối với PHP7, vì nó có mã hóa sai, nhưng tôi có thể tìm ra mã hóa đúng với các câu trả lời khác. Mã này cũng gửi cookie xác thực mà bạn có thể muốn khi giao dịch với các diễn đàn 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);
    });
}

Nó có thể hữu ích cho ai đó:

Tôi gặp vấn đề là formdata không được gửi cho yêu cầu của tôi

Trong trường hợp của tôi, đó là sự kết hợp của các tiêu đề sau cũng gây ra sự cố và Loại nội dung sai.

Vì vậy, tôi đã gửi hai tiêu đề này với yêu cầu và nó đã không gửi formdata khi tôi loại bỏ các tiêu đề hoạt động.

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

Ngoài ra, như các câu trả lời khác cho thấy tiêu đề Kiểu Nội dung cần phải chính xác.

Đối với yêu cầu của tôi, tiêu đề Kiểu nội dung chính xác là:

"Loại nội dung": "application / x-www-form-urlencoding; charset = UTF-8"

Vì vậy, dòng dưới cùng nếu formdata của bạn không được đính kèm với Yêu cầu thì nó có thể có khả năng là tiêu đề của bạn. Hãy thử đưa tiêu đề của bạn đến mức tối thiểu và sau đó thử thêm từng cái một để xem vấn đề của bạn đã được giải quyết chưa.

Tôi nghĩ rằng, chúng ta không cần phân tích đối tượng JSON thành một chuỗi, nếu máy chủ từ xa chấp nhận json vào chúng yêu cầu, chỉ cần chạy:

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

Chẳng hạn như yêu cầu curl

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

Trong trường hợp phục vụ từ xa không chấp nhận tệp json làm phần thân, chỉ cần gửi 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
});

Chẳng hạn như yêu cầu curl

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

Nếu tải trọng JSON của bạn chứa các mảng và các đối tượng lồng nhau, tôi sẽ sử dụng URLSearchParams và param()phương thức của jQuery .

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

Đối với máy chủ của bạn, nó sẽ trông giống như một HTML tiêu chuẩn <form>đang được chỉnh sửa POST.