title: Passing data in POST request
body: <p>I want to post data in the POST request. I have a login form which looks like this </p>
  
  <pre><code>render(){
          return (
              &lt;div className="LoginPage"&gt;
                  &lt;div className="login-page"&gt;
                      &lt;div className="form"&gt;
                          &lt;form className="login-form"&gt;
                              &lt;input id="username" type="username" placeholder="username"/&gt;
                              &lt;input id="password" type="password" placeholder="password"/&gt;
                              &lt;p className="message"&gt;Not registered? &lt;a href="#"&gt;Request Username and Password&lt;/a&gt;&lt;/p&gt;
                          &lt;/form&gt;
                          &lt;button onClick={this.handleLoginButtonClick.bind(this)}&gt;login&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  </code></pre>
  
  <p>I am making a POST request in handleLoginButtonClick </p>
  
  <pre><code>handleLoginButtonClick() {
          let token;
          var settings = {
              "async": true,
              "crossDomain": true,
              "url": "https://trigger-backend.appspot.com/auth/login/",
              "method": "POST",
              "credentials": 'include',
              "headers": {
                  "content-type": "application/x-www-form-urlencoded",
              },
              "data": {
                  "password": JSON.stringify(document.getElementById("password").value),
                  "username": JSON.stringify(document.getElementById("username").value)
              },
              success: function( data, textStatus, jQxhr ){
                 // alert("success");
              },
          }
  
          $.ajax(settings).done((response) =&gt; {
  
              token = JSON.stringify(response.auth_token)
              this.context.router.push('/app')
          });
  </code></pre>
  
  <p>So I am currently including the data like this</p>
  
  <pre><code> "data": {
                  "password": JSON.stringify(document.getElementById("password").value),
                  "username": JSON.stringify(document.getElementById("username").value)
              }
  </code></pre>
  
  <p>But api gives me a 400 error like this</p>
  
  <p><a href="https://i.stack.imgur.com/wWxLB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wWxLB.png" alt="enter image description here"></a></p>
  
  <p>But at the same time if I pass the data like this then it works</p>
  
  <pre><code>"data": {
                  "password": "apurv",
                  "username": "Apurv"
              },
  </code></pre>
  
  <p>what is the problem here. Both should be same, right?</p>