title: Sending XMLHttpRequest with FormData
body: <p>I am trying to make an XHR with JavaScript, but I can't get it to work correctly.</p>
  <p>When I see the right requests in the &quot;Network&quot; tab of the Chrome developer tools I see that <strong>they have a &quot;Form Data&quot; section</strong> where are listed all the informations sent with the request, like this:</p>
  <p><img src="https://i.stack.imgur.com/4EYLS.jpg" alt="formdata" /></p>
  <p>Now, I've tried making my <code>XMLHttpRequest</code> in any way I know, but I can't get that result.</p>
  <p>I have tried this:</p>
  <pre><code>var xhr = new XMLHttpRequest(),
      form_data = &quot;data%5Btumblelog%5D=drunknight&amp;data%5Bsource%5D=FOLLOW_SOURCE_REBLOG&quot;;
      // this is uri encoded: %5b = [ and %5D = ]
  
  xhr.open('POST','https://www.somesite.com/page?' + form_data, false);
  xhr.send();
  </code></pre>
  <p>But I got this &quot;Query String Parameters&quot; instead of &quot;Form Data&quot;:</p>
  <p><img src="https://i.stack.imgur.com/zWwUH.jpg" alt="querystringparameters" /></p>
  <p>I have also tried this:</p>
  <pre><code>var xhr = new XMLHttpRequest(),
      formData = new FormData();
  
  formData.append(&quot;data[tumblelog]&quot;, &quot;drunknight&quot;);
  formData.append(&quot;data[source]&quot;, &quot;FOLLOW_SOURCE_REBLOG&quot;);
  xhr.open('POST','https://www.somesite.com/page', false);
  xhr.send(formData);
  </code></pre>
  <p>But I got this &quot;Request Payload&quot; instead of &quot;Form Data&quot;:</p>
  <p><img src="https://i.stack.imgur.com/9yFrW.jpg" alt="payload" /></p>
  <p>And, finally, I have tried this:</p>
  <pre><code>var xhr = new XMLHttpRequest(),
      formData = {
          &quot;data[tumblelog]&quot;: &quot;drunknight&quot;,
          &quot;data[source]&quot;: &quot;FOLLOW_SOURCE_REBLOG&quot;
      };
  
  xhr.open('POST','https://www.somesite.com/page', false);
  xhr.send(JSON.stringify(formData));
  </code></pre>
  <p>But I got another &quot;Request Payload&quot; instead of &quot;Form Data&quot;:</p>
  <p><img src="https://i.stack.imgur.com/KBbht.jpg" alt="payload2" /></p>
  <hr />
  <p>Now, my question is: how can I send my <code>XMLHttpRequest</code> in order to obtain the same result as shown in the FIRST image?</p>