title: vanilla js: post form data working, but post json not working
body: <p>I am trying to post data from React component to spring boot controller.</p>
  
  <p>I sent xhr requests like this, which failed with 400:</p>
  
  <pre><code>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);
  </code></pre>
  
  <p>Then I tried this, which worked:</p>
  
  <pre><code>const xhr = new XMLHttpRequest();
  xhr.open('post', `/display/clickNext.json?queueId=${this.props.queueId}&amp;flag=${restFlag}`, true);
  xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  xhr.send();
  </code></pre>
  
  <p>But I don't know why.n what is the difference between them?</p>
  
  <p>I searched and found this question <a href="https://stackoverflow.com/questions/23118249/whats-the-difference-between-request-payload-vs-form-data-as-seen-in-chrome">what's the difference between request payload vs form data as seen in chrome</a>, if I understand it right, the best answer tells 'they differ in the Content-Type but not in the way data is submitted', so I am more confused why I am wrong and failed.</p>
  
  <p>I really want to understand this problem,  the template literals seem not so elegant by using it this way, more important, it seemed like it is about some basic concepts.</p>