バニラjs：ポストフォームデータが動作していますが、ポストjsonが動作していません

Question

Reactコンポーネントからスプリングブートコントローラにデータをポストしようとしています。

私は400で失敗しました。このようなXHRリクエスト、送ら：

const xhr = new XMLHttpRequest(); 
xhr.open('post', `/display/clickNext.json?queueId=${this.props.queueId}&flag=${restFlag}`, true); 
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
xhr.send(); 

しかし、私が何であるかをwhy.n知らない：そして、私が働いており、これを試してみました

const valToSent = { 
    queueId: this.props.queueId, 
    flag: restFlag //value is '' or '1' 
}; 

const xhr = new XMLHttpRequest(); 
xhr.open('post', '/display/clickNext.json', true); 
xhr.setRequestHeader('Content-Type', 'application/json'); 
const data = JSON.stringify(valToSent); 
xhr.send(data); 

を彼らの違いは？

この質問を検索した結果、what's the difference between request payload vs form data as seen in chromeが正しいと理解していれば、「コンテンツタイプは異なりますが、データは送信されません」と伝えられるので、私が間違っている理由と、失敗しました。

私は本当にこの問題を理解したいと思っています。テンプレートリテラルは、このように使用することでとてもエレガントではないようです。もっと重要なのは、基本的な概念についてのようです。

Answer 1

最初の1つは、身体の中にJSを送信し、本文にJSONを送信することを示す賢明に整理されたPOSTリクエストです。

第2のものは...奇妙です。体内でフォームエンコードされたデータを送信していますが、実際にはデータを（適切なエスケープなしで）クエリ文字列に押し込みながら何も送信しません。

賢明な要求がサーバーから「400 Bad Request」エラーを受け取っている理由を説明するには、サーバー側のコードをデバッグする必要があります。