title: Submit form in JSON with AJAX
body: <p>I am trying to submit a form in AJAX in JSON format. </p>
  
  <p>But whenever the form is submitted I get redirect to the form action page.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;form id="acc" action="#" method="post" autocomplete="off"&gt;{% csrf_token %}
              &lt;p&gt;Username: {{accform.username}}&lt;/p&gt;
              &lt;p&gt;Password: {{accform.password}} &lt;/p&gt;
              &lt;center&gt;&lt;input type="submit" value="update" class="button" /&gt;&lt;/center&gt;
          &lt;/form&gt;
  </code></pre>
  
  <p><strong>Jquery</strong></p>
  
  <pre><code>    $("#acc").submit(function(){
          username = $(this).find("#id_username").val();
          password = $(this).find("#id_password").val();
          var arr = { "X-CSRFToken": getCookie("csrftoken"), "username": username, "password": password};
          $.post("/myaccount/", arr,function(data){
              alert(data);
          }, "json");
          return false;
      });
  </code></pre>
  
  <p>An alternative to the code above I've also tried is:</p>
  
  <pre><code>$("#acc").submit(function(){
                  username = $(this).find("#id_username").val();
                  password = $(this).find("#id_password").val();
                  var arr = { "X-CSRFToken": getCookie("csrftoken"), "username": username, "password": password};
                  $.ajax({
                      url: '/myaccount/',
                      type: 'POST',
                      data: JSON.stringify(arr),
                      contentType: 'application/json; charset=utf-8',
                      dataType: 'json',
                      async: false,
                      success: function(msg) {
                          alert(msg);
                      }
                  });
                  return false;
              });
  </code></pre>
  
  <p>I've also noticed that I only get redirected when getting the <code>csrftoken</code> cookie.</p>
  
  <p>Why is that?</p>