entityMap|blocks|key|7cp8t|text|在花了一段时间后，逆向工程jsFiddle，试图生成有效负载-有一个效果。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|dj99t|请注意(注意)在线|787g4|当响应不是响应时，它就是承诺。|c7ho9|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='+%2B+encodeURIComponent(JSON.stringify(json.json))+%2B+'&delay='+%2B+json.delay
})
.then(function+(response)+{
++++return+response.json();
})
.then(function+(result)+{
++++alert(result);
})
.catch+(function+(error)+{
++++console.log('Request+failed',+error);
});|code-block|syntax|javascript|a1k2n|jsFiddle：|82b7b|http://jsfiddle.net/egxt6cpz/46/|tr5j|&&+Firefox+>+39+&&+Chrome+>+42^0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|R|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|S|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|T|9|@]|A|@]|B|$]]|$2|G|4|H|6|I|8|U|9|@]|A|@]|B|$J|K]]|$2|L|4|M|6|7|8|V|9|@]|A|@]|B|$]]|$2|N|4|O|6|7|8|W|9|@]|A|@]|B|$]]|$2|P|4|Q|6|7|8|X|9|@]|A|@]|B|$]]]]

After spending some times, reverse engineering jsFiddle, trying to generate payload - there is an effect.

Please take eye (care) on line <code>return response.json();</code> where response is not a response - it is promise.

<pre><code>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)) + '&amp;delay=' + json.delay
})
.then(function (response) {
 return response.json();
})
.then(function (result) {
 alert(result);
})
.catch (function (error) {
 console.log('Request failed', error);
});
</code></pre>

jsFiddle: <a href="http://jsfiddle.net/egxt6cpz/46/" rel="noreferrer">http://jsfiddle.net/egxt6cpz/46/</a> &amp;&amp; Firefox > 39 &amp;&amp; Chrome > 42

entityMap|blocks|key|4l79|text|使用ES2017|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1ga8n|支持|fp0hc|，这是如何|631ec|JSON有效负载：|7ea2r|​|5dqcj|(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);
})();|code-block|syntax|javascript|dmr07|9ngjo|不能使用ES2017？请参阅@vp|cd0ke|_|1049n|艺术的|2r828|使用promises回答|473mr|然而，这个问题是在询问一个由以下原因引起的问题：|fckt3|一个很久以前修复的chrome错误。|c4fb|原始答案如下。|ls5h|chrome+devtools甚至没有将JSON显示为请求的一部分|b825k|8ilsp|这才是真正的问题所在|e108l|，它是一个|2a8b2|chrome+devtools的错误|15pk3|，已在Chrome+46中修复。|a6g8d|这段代码运行得很好--它正确地POSTing了JSON，只是看不到而已。|dvgnk|我希望看到我发回的对象|d4ovn|ford9|这是不起作用的，因为这不是|4j73n|JSfiddle回显的正确格式|87tui|..。|7rba3|The+The+The|2ij9f|正确的代码|8j8uv|是：|1nn7q|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+)+)+})|6o210|对于接受JSON有效负载的端点，|4m657|原始代码是正确的^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|22|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|23|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|24|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|25|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|26|9|@]|A|@]|B|$]]|$2|K|4|L|6|M|8|27|9|@]|A|@]|B|$N|O]]|$2|P|4|J|6|7|8|28|9|@]|A|@]|B|$]]|$2|Q|4|R|6|7|8|29|9|@]|A|@]|B|$]]|$2|S|4|T|6|7|8|2A|9|@]|A|@]|B|$]]|$2|U|4|V|6|7|8|2B|9|@]|A|@]|B|$]]|$2|W|4|X|6|7|8|2C|9|@]|A|@]|B|$]]|$2|Y|4|Z|6|7|8|2D|9|@]|A|@]|B|$]]|$2|10|4|11|6|7|8|2E|9|@]|A|@]|B|$]]|$2|12|4|13|6|7|8|2F|9|@]|A|@]|B|$]]|$2|14|4|15|6|7|8|2G|9|@]|A|@]|B|$]]|$2|16|4|-4|6|7|8|2H|9|@]|A|@]|B|$]]|$2|17|4|18|6|7|8|2I|9|@]|A|@]|B|$]]|$2|19|4|1A|6|7|8|2J|9|@]|A|@]|B|$]]|$2|1B|4|1C|6|7|8|2K|9|@]|A|@]|B|$]]|$2|1D|4|1E|6|7|8|2L|9|@]|A|@]|B|$]]|$2|1F|4|1G|6|7|8|2M|9|@]|A|@]|B|$]]|$2|1H|4|1I|6|7|8|2N|9|@]|A|@]|B|$]]|$2|1J|4|-4|6|7|8|2O|9|@]|A|@]|B|$]]|$2|1K|4|1L|6|7|8|2P|9|@]|A|@]|B|$]]|$2|1M|4|1N|6|7|8|2Q|9|@]|A|@]|B|$]]|$2|1O|4|1P|6|7|8|2R|9|@]|A|@]|B|$]]|$2|1Q|4|1R|6|7|8|2S|9|@]|A|@]|B|$]]|$2|1S|4|1T|6|7|8|2T|9|@]|A|@]|B|$]]|$2|1U|4|1V|6|7|8|2U|9|@]|A|@]|B|$]]|$2|1W|4|1X|6|M|8|2V|9|@]|A|@]|B|$N|O]]|$2|1Y|4|1Z|6|7|8|2W|9|@]|A|@]|B|$]]|$2|20|4|21|6|7|8|2X|9|@]|A|@]|B|$]]]]

With ES2017 <a href="https://caniuse.com/#feat=async-functions" rel="noreferrer"><code>async/await</code> support</a>, this is how to <code>POST</code> a JSON payload:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>(async () =&gt; {
 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);
})();</code></pre>
</div>
</div>


Can't use ES2017? See @vp_art's <a href="https://stackoverflow.com/a/42493030/304174">answer using promises</a>

The question however is asking for an issue caused by a long since fixed chrome bug. 
Original answer follows.

<blockquote>
 chrome devtools doesn't even show the JSON as part of the request
</blockquote>

This is the real issue here, and it's a <a href="https://code.google.com/p/chromium/issues/detail?id=457484" rel="noreferrer">bug with chrome devtools</a>, fixed in Chrome 46.

That code works fine - it is POSTing the JSON correctly, it just cannot be seen.

<blockquote>
 I'd expect to see the object I've sent back
</blockquote>

that's not working because that is not the <a href="http://doc.jsfiddle.net/use/echo.html#json" rel="noreferrer">correct format for JSfiddle's echo</a>.

The <a href="https://jsfiddle.net/Razor/abbpbah4/5/" rel="noreferrer">correct code</a> is:

<pre class="lang-js prettyprint-override"><code>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 ) ) })
</code></pre>

For endpoints accepting JSON payloads, the original code is correct

entityMap|blocks|key|c94dg|text|在搜索引擎中，我在非json发布数据的fetch上讨论了这个话题，所以我想我应该加上这个。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|476sn|对于|cp9po|非json|8q21o|您不必使用表单数据。您可以简单地将|6t7ld|标题至|cs3au|并使用字符串：|4aa0t|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'
});|code-block|syntax|javascript|d5rpu|另一种构建它的方法|61ucg|字符串，而不是像上面那样键入字符串，而是使用库。例如，|5nb9d|函数来源|4567n|或者|4q7ld|包。因此，使用此代码将如下所示：|8ec6l|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
});^0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|13|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|14|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|15|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|16|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|17|9|@]|A|@]|B|$]]|$2|K|4|L|6|7|8|18|9|@]|A|@]|B|$]]|$2|M|4|N|6|O|8|19|9|@]|A|@]|B|$P|Q]]|$2|R|4|S|6|7|8|1A|9|@]|A|@]|B|$]]|$2|T|4|U|6|7|8|1B|9|@]|A|@]|B|$]]|$2|V|4|W|6|7|8|1C|9|@]|A|@]|B|$]]|$2|X|4|Y|6|7|8|1D|9|@]|A|@]|B|$]]|$2|Z|4|10|6|7|8|1E|9|@]|A|@]|B|$]]|$2|11|4|12|6|O|8|1F|9|@]|A|@]|B|$P|Q]]]]

From search engines, I ended up on this topic for non-json posting data with fetch, so thought I would add this.

For non-json you don't have to use form data. You can simply set the <code>Content-Type</code> header to <code>application/x-www-form-urlencoded</code> and use a string:

<pre><code>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&amp;blah=1'
});
</code></pre>

An alternative way to build that <code>body</code> string, rather then typing it out as I did above, is to use libraries. For instance the <code>stringify</code> function from <a href="https://www.npmjs.com/package/query-string" rel="noreferrer"><code>query-string</code></a> or <a href="https://www.npmjs.com/package/qs" rel="noreferrer"><code>qs</code></a> packages. So using this it would look like:

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

entityMap|blocks|key|264th|text|我觉得你的问题是|type|unstyled|depth|inlineStyleRanges|entityRanges|data|fa8a9|can进程|9a3b0|仅限请求。|au4dv|但是正确的方法是传递正确的json请求|4r3ds|作为一个主体：|o4pk|​|2r1f6|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));|code-block|syntax|javascript|4r50s^0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|S|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|T|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|U|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|V|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|W|9|@]|A|@]|B|$]]|$2|K|4|L|6|7|8|X|9|@]|A|@]|B|$]]|$2|M|4|N|6|O|8|Y|9|@]|A|@]|B|$P|Q]]|$2|R|4|L|6|7|8|Z|9|@]|A|@]|B|$]]]]

I think your issue is <code>jsfiddle</code> can process <code>form-urlencoded</code> request only.
But correct way to make json request is pass correct <code>json</code> as a body:
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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: &amp;=&amp;'})
}).then(res =&gt; res.json())
 .then(res =&gt; console.log(res));</code></pre>
</div>
</div>

entityMap|blocks|key|a0o81|text|如果你使用的是纯json+REST+API，我已经为fetch()创建了一个简单的包装器，并做了很多改进：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|361d1|//+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+%7C%7C+'',++++//+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);
});|code-block|syntax|javascript|djfn6|要使用它，您需要使用变量|6q4uu|4种方法：|dp6t6|api.get('/todo').then(all+=>+{+/*+...+*/+});|4ame3|并且在一个|d2ro4|功能：|a9ia5|const+all+=+await+api.get('/todo');
//+...|1shm|jQuery示例：|9g4vr|$('.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');
});^0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|X|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|Y|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|Z|9|@]|A|@]|B|$]]|$2|J|4|K|6|7|8|10|9|@]|A|@]|B|$]]|$2|L|4|M|6|E|8|11|9|@]|A|@]|B|$F|G]]|$2|N|4|O|6|7|8|12|9|@]|A|@]|B|$]]|$2|P|4|Q|6|7|8|13|9|@]|A|@]|B|$]]|$2|R|4|S|6|E|8|14|9|@]|A|@]|B|$F|G]]|$2|T|4|U|6|7|8|15|9|@]|A|@]|B|$]]|$2|V|4|W|6|E|8|16|9|@]|A|@]|B|$F|G]]]]

I have created a thin wrapper around fetch() with many improvements if you are using a purely json REST API:

<pre class="lang-js prettyprint-override"><code>// 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 =&gt; 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 =&gt; {
 api[method] = api.bind(null, method);
});
</code></pre>

To use it you have the variable <code>api</code> and 4 methods:

<pre class="lang-js prettyprint-override"><code>api.get('/todo').then(all =&gt; { /* ... */ });
</code></pre>

And within an <code>async</code> function:

<pre class="lang-js prettyprint-override"><code>const all = await api.get('/todo');
// ...
</code></pre>

Example with jQuery:

<pre class="lang-js prettyprint-override"><code>$('.like').on('click', async e =&gt; {
 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');
});
</code></pre>

entityMap|blocks|key|cr2js|text|这与|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1kma8|..。从其他讨论和对此问题的回答中，您可能已经注意到，有些人能够通过设置|ctfdp|..。不幸的是，在我的情况下，它没有工作，我的POST请求在服务器端仍然是空的。|eig61|但是，如果您尝试使用jQuery的|bddis|它正在工作，原因可能是因为jQuery使用了|cg70n|而不是|4srj4|..。|2r1cl|data+=+Object.keys(data).map(key+=>+encodeURIComponent(key)+%2B+'='+%2B+encodeURIComponent(data[key])).join('&')
fetch('/api/',+{
++++method:+'post',+
++++credentials:+"include",+
++++body:+data,+
++++headers:+{'Content-Type':+'application/x-www-form-urlencoded'}
})|code-block|syntax|javascript^0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|T|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|U|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|V|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|W|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|X|9|@]|A|@]|B|$]]|$2|K|4|L|6|7|8|Y|9|@]|A|@]|B|$]]|$2|M|4|N|6|7|8|Z|9|@]|A|@]|B|$]]|$2|O|4|P|6|Q|8|10|9|@]|A|@]|B|$R|S]]]]

This is related to <code>Content-Type</code>. As you might have noticed from other discussions and answers to this question some people were able to solve it by setting <code>Content-Type: 'application/json'</code>. Unfortunately in my case it didn't work, my POST request was still empty on the server side.

However, if you try with jQuery's <code>$.post()</code> and it's working, the reason is probably because of jQuery using <code>Content-Type: 'x-www-form-urlencoded'</code> instead of <code>application/json</code>. 

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

entityMap|blocks|key|5c6p5|text|有同样的问题-不|type|unstyled|depth|inlineStyleRanges|entityRanges|data|ekvi8|从客户端发送到服务器。|1i1lv|添加|st83|header帮我解决了这个问题：|ac5p5|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+=>+{
+++...
})|code-block|syntax|javascript^0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|N|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|O|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|P|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|Q|9|@]|A|@]|B|$]]|$2|I|4|J|6|K|8|R|9|@]|A|@]|B|$L|M]]]]

Had the same issue - no <code>body</code> was sent from a client to a server.

Adding <code>Content-Type</code> header solved it for me:

<pre><code>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 =&gt; {
 ...
}).catch(err =&gt; {
 ...
})
</code></pre>

entityMap|blocks|key|7rbju|text|它可能对某些人有用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|ekjf9|我遇到了我的请求没有发送formdata的问题。|9qi7h|在我的例子中，下面的头的组合也导致了这个问题和错误的Content-Type。|4cocu|因此，我在请求中发送了这两个头文件，当我删除有效的头文件时，它并没有发送formdata。|i134|"X-Prototype-Version“："1.6.1"，”X-Requested+With“："XMLHttpRequest”|7gd80|dp20e|同样，正如其他答案所建议的那样，Content-Type标头需要是正确的。|2e3ip|对于我的请求，正确的Content-Type头是：|cnd1d|"Content-Type"："application/x-www-form-urlencoded；charset=UTF-8“|1lk2c|ch8vf|所以底线是，如果你的formdata没有被附加到请求中，那么它可能是你的头。试着把你的头文件减到最少，然后一个接一个地添加，看看你的问题是否解决了。^0|0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|U|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|V|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|W|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|X|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|Y|9|@]|A|@]|B|$]]|$2|K|4|-4|6|7|8|Z|9|@]|A|@]|B|$]]|$2|L|4|M|6|7|8|10|9|@]|A|@]|B|$]]|$2|N|4|O|6|7|8|11|9|@]|A|@]|B|$]]|$2|P|4|Q|6|7|8|12|9|@]|A|@]|B|$]]|$2|R|4|-4|6|7|8|13|9|@]|A|@]|B|$]]|$2|S|4|T|6|7|8|14|9|@]|A|@]|B|$]]]]

It might be useful to somebody:

I was having the issue that formdata was not being sent for my request

In my case it was a combination of following headers that were also causing the issue and the wrong Content-Type.

So I was sending these two headers with the request and it wasn't sending the formdata when I removed the headers that worked.

<blockquote>
<pre><code>"X-Prototype-Version" : "1.6.1",
"X-Requested-With" : "XMLHttpRequest"
</code></pre>
</blockquote>

Also as other answers suggest that the Content-Type header needs to be correct.

For my request the correct Content-Type header was:

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

So bottom line if your formdata is not being attached to the Request then it could potentially be your headers. Try bringing your headers to a minimum and then try adding them one by one to see if your problem is rsolved.

entityMap|blocks|key|25tcd|text|我认为，我们不需要将JSON对象解析成字符串，如果远程服务器将json接受到他们的请求中，只需运行：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1loif|const+request+=+await+fetch+('/echo/json',+{
++headers:+{
++++'Content-type':+'application/json'
++},
++method:+'POST',
++body:+{+a:+1,+b:+2+}
});|code-block|syntax|javascript|6ujag|例如curl请求|3994f|curl+-v+-X+POST+-H+'Content-Type:+application/json'+-d+'@data.json'+'/echo/json'|3o6nq|如果远程服务器不接受json文件作为正文，只需发送一个dataForm：|a4eku|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
});|3pd7l|cdg35|curl+-v+-X+POST+-H+'Content-type:+application/x-www-form-urlencoded'+-d+'@data.txt'+'/echo/form'^0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|S|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|T|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|U|9|@]|A|@]|B|$]]|$2|J|4|K|6|E|8|V|9|@]|A|@]|B|$F|G]]|$2|L|4|M|6|7|8|W|9|@]|A|@]|B|$]]|$2|N|4|O|6|E|8|X|9|@]|A|@]|B|$F|G]]|$2|P|4|I|6|7|8|Y|9|@]|A|@]|B|$]]|$2|Q|4|R|6|E|8|Z|9|@]|A|@]|B|$F|G]]]]

I think that, we don't need parse the JSON object into a string, if the remote server accepts json into they request, just run:

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

Such as the curl request

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

In case to the remote serve not accept a json file as the body, just send a dataForm:

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

Such as the curl request

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

entityMap|blocks|key|66m7a|text|最上面的答案不适用于PHP7，因为它有错误的编码，但我可以用其他答案找出正确的编码。此代码还发送身份验证cookies，这可能是您在处理PHP论坛时需要的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|7nnqc|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="+%2B+encodeURIComponent(juliacode)
++++})
++++.then(function(response)+{
++++++++return+response.json();+//+.text();
++++})
++++.then(function(myJson)+{
++++++++console.log(myJson);
++++});
}|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

The top answer doesn't work for PHP7, because it has wrong encoding, but I could figure the right encoding out with the other answers. This code also sends authentication cookies, which you probably want when dealing with e.g. PHP forums:

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

entityMap|blocks|key|a2qcg|text|如果您的JSON有效负载包含数组和嵌套对象，我将使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|ff4va|和jQuery的|frtno|方法。|4vsrp|fetch('/somewhere',+{
++method:+'POST',
++body:+new+URLSearchParams($.param(payload))
})|code-block|syntax|javascript|4h8ib|对于您的服务器，这将看起来像一个标准的HTML|1pb30|存在|bc4au|艾德。|ckkjs|​^0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|T|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|U|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|V|9|@]|A|@]|B|$]]|$2|G|4|H|6|I|8|W|9|@]|A|@]|B|$J|K]]|$2|L|4|M|6|7|8|X|9|@]|A|@]|B|$]]|$2|N|4|O|6|7|8|Y|9|@]|A|@]|B|$]]|$2|P|4|Q|6|7|8|Z|9|@]|A|@]|B|$]]|$2|R|4|S|6|7|8|10|9|@]|A|@]|B|$]]]]

If your JSON payload contains arrays and nested objects, I would use <code>URLSearchParams</code> and jQuery's <code>param()</code> method.

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

To your server, this will look like a standard HTML <code>&lt;form&gt;</code> being <code>POST</code>ed.

entityMap|blocks|key|fuo8u|text|您可以使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|fvb35|填充-获取|cau1a|，它是|91tef|..。简单地说，您可以像下面这样发布数据：|4nst4|import+{+fill+}+from+'fill-fetch';

const+fetcher+=+fill();

fetcher.config.timeout+=+3000;
fetcher.config.maxConcurrence+=+10;
fetcher.config.baseURL+=+'http://www.github.com';

const+res+=+await+fetcher.post('/',+{+a:+1+},+{
++++headers:+{
++++++++'bearer':+'1234'
++++}
});|code-block|syntax|javascript^0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|N|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|O|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|P|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|Q|9|@]|A|@]|B|$]]|$2|I|4|J|6|K|8|R|9|@]|A|@]|B|$L|M]]]]

you can use <a href="https://github.com/Bert0324/fill-fetch" rel="nofollow noreferrer">fill-fetch</a>, which is an extension of <code>fetch</code>. Simply, you can post data as below:
<pre><code>import { fill } from 'fill-fetch';

const fetcher = fill();

fetcher.config.timeout = 3000;
fetcher.config.maxConcurrence = 10;
fetcher.config.baseURL = 'http://www.github.com';

const res = await fetcher.post('/', { a: 1 }, {
 headers: {
 'bearer': '1234'
 }
});
</code></pre>

entityMap|blocks|key|d4dla|text|你只需要检查响应是否正常，因为调用没有返回任何东西。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|fvit2|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='+%2B+encodeURIComponent(JSON.stringify(json.json))+%2B+'&delay='+%2B+json.delay
})
.then((response)+=>+{if(response.ok){alert("the+call+works+ok")}})
.catch+(function+(error)+{
++++console.log('Request+failed',+error);
});|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

You only need to check if response is ok coz the call not returning anything.
<pre><code>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)) + '&amp;delay=' + json.delay
})
.then((response) =&gt; {if(response.ok){alert(&quot;the call works ok&quot;)}})
.catch (function (error) {
 console.log('Request failed', error);
}); 
</code></pre>

I'm trying to POST a JSON object using <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalFetch/fetch" rel="noreferrer">fetch</a>.
From what I can understand, I need to attach a stringified object to the body of the request, e.g.:
<pre class="lang-js prettyprint-override"><code>fetch(&quot;/echo/json/&quot;,
{
 headers: {
 'Accept': 'application/json',
 'Content-Type': 'application/json'
 },
 method: &quot;POST&quot;,
 body: JSON.stringify({a: 1, b: 2})
})
.then(function(res){ console.log(res) })
.catch(function(res){ console.log(res) })
</code></pre>
When using <a href="https://jsfiddle.net/abbpbah4/" rel="noreferrer">jsfiddle's JSON echo</a> I'd expect to see the object I've sent (<code>{a: 1, b: 2}</code>) back, but this does not happen - chrome devtools doesn't even show the JSON as part of the request, which means that it's not being sent.

Fetch: POST JSON data

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

 我正在尝试使用以下命令发布一个JSON对象 获取 ..。 据我所知，我需要将一个字符串对象附加到请求的正文中，例如： fetch("/echo/json/",{    headers: {      'Accept': 'application/json',      'Content-Type': 'applica...

问Fetch: POST json数据
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Fetch: POST json数据EN